diff --git a/package.json b/package.json index ad1854b..6a513e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "r-and-m", - "version": "1.0.0", + "version": "0.0.0", "description": "![Рик огурчик!!!](./docs/cucumber.webp)", "main": "./src/index.tsx", "directories": { diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts new file mode 100644 index 0000000..02cd676 --- /dev/null +++ b/src/components/card/card.style.ts @@ -0,0 +1,56 @@ +import { css } from "@emotion/react"; +import styled from "@emotion/styled"; + +export const Wrapper = styled.article` + display: flex; + flex-direction: column; + margin-top: 24px; + border-radius: 30px; + box-shadow: 0 0 26px 2px #0000001c; + background: rgba(255, 255, 255, 0.59); + padding: 24px; +`; + +export const CardImage = styled.img<{ directionReverse: boolean }>` + width: 300px; + height: 300px; + margin-left: 0; + margin-right: auto; + + ${props => props.directionReverse && css` + margin-left: auto; + margin-right: 0; + `} +`; + +export const Header = styled.header` + display: flex; + justify-content: space-between; + font-size: 24px; + font-weight: 800; + align-items: center; +`; + +export const SubHeader = styled.h2` + color: #659a26; + font-size: 24px; +`; + +export const Content = styled.div<{ directionReverse: boolean }>` + display: flex; + flex-direction: row; + gap: 40px; + + ${props => { + if (props.directionReverse) { + return css` + flex-direction: row-reverse; + `; + } + + }} +`; + +export const Text = styled.p` + font-size: 24px; +`; diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx new file mode 100644 index 0000000..e6b91a5 --- /dev/null +++ b/src/components/card/card.tsx @@ -0,0 +1,49 @@ +import React from "react"; + +import { landing } from "../../assets/images"; +import { Link } from "../link"; + +import { + Header, + Wrapper, + SubHeader, + Content, + CardImage, + Text, +} from "./card.style"; + +export const Card = ({ + title, + subTitle, + children, + image, + link, + directionReverse, +}) => ( + +
+ {title && ( +

+ + {title} + +

+ )} + {subTitle && {subTitle}} +
+ + {image && ( + + )} + {children} + +
+); + +Card.defaultProps = { + title: void 0, + subTitle: void 0, + image: void 0, + link: void 0, + directionReverse: false, +}; diff --git a/src/components/card/index.ts b/src/components/card/index.ts new file mode 100644 index 0000000..6651f03 --- /dev/null +++ b/src/components/card/index.ts @@ -0,0 +1 @@ +export { Card } from './card' \ No newline at end of file diff --git a/src/components/link/link.styled.ts b/src/components/link/link.styled.ts index b1f03d9..15ee24b 100644 --- a/src/components/link/link.styled.ts +++ b/src/components/link/link.styled.ts @@ -1,19 +1,33 @@ -import styled from "@emotion/styled" -import { css } from '@emotion/react' +import styled from "@emotion/styled"; +import { css } from "@emotion/react"; -export const StyledLink = styled.a` +export const StyledLink = styled.a<{ + contrast?: boolean; + inheritColor?: boolean; +}>` font-weight: 400; text-decoration: underline; text-decoration-skip-ink: none; - color: ${(props: any) => props.contrast ? 'var(--text-contrast)' : 'var(--dark-link)'}; + color: ${(props: any) => + props.contrast ? "var(--text-contrast)" : "var(--dark-link)"}; - ${props => { + ${(props) => { if (props.contrast) { - return css` - &:hover { - color: var(--dark-link); - } - ` - } + return css` + &:hover { + color: var(--dark-link); + } + `; + } + }} + + ${(props) => { + if (props.inheritColor) { + return css` + font-weight: inherit; + color: inherit; + text-decoration: inherit; + `; + } }} `; diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx index c96af06..d011df6 100644 --- a/src/components/link/link.tsx +++ b/src/components/link/link.tsx @@ -3,17 +3,33 @@ import React, { useMemo } from "react"; import { externalIcon } from '../../assets/icons' import { StyledLink } from './link.styled' -// import './style.css' -export const Link = (props) => { - // const className = 'link' + (props.contrast ? ' link__contrast' : '') - - const isExternal = useMemo(() => props.href.startsWith('http'), [props.href]); +interface LinkProps { + href: string; + children: React.ReactNode; + contrast?: boolean; + inheritColor?: boolean; +} + +export const Link = (props: LinkProps) => { + const isExternal = useMemo(() => props.href?.startsWith('http'), [props.href]); + + const linkProps: any = {} + + if (isExternal) { + linkProps.target = '_blank' + linkProps.rel = 'noopener noreferrer' + } return ( - + {props.children} - {isExternal && external} + {isExternal && external link icon} ); }; + +Link.defaultProps = { + contrast: false, + inheritColor: false, +} diff --git a/src/components/link/style.css b/src/components/link/style.css deleted file mode 100644 index a892a88..0000000 --- a/src/components/link/style.css +++ /dev/null @@ -1,10 +0,0 @@ -.link { - font-weight: 400; - text-decoration: underline; - text-decoration-skip-ink: none; - color: var(--dark-link); -} - -.link__contrast { - color: var(--text-contrast); -} diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx index ee9edf5..83cfa1b 100644 --- a/src/pages/landing.tsx +++ b/src/pages/landing.tsx @@ -1,52 +1,51 @@ import React from "react"; import { NavPanel } from "../components/nav-panel"; - import logo from "../assets/logo_1x.png"; +import cucumber from "../assets/cucumber.png"; import logo2x from "../assets/logo_2x.png"; import logo4x from "../assets/logo_4x.png"; -import cucumber from "../assets/cucumber.png"; import { Link } from "../components/link"; -// directionReverse: false, +import { Card } from "../components/card"; const data = [ { id: Math.random().toString(), - title: 'Рик Санчез', - subTitle: 'Главный герой', - body: 'Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.', - image: 'rick', - link: 'https://en.wikipedia.org/wiki/Rick_Sanchez', + title: "Рик Санчез", + subTitle: "Главный герой", + body: "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.", + image: "rick", + link: "https://en.wikipedia.org/wiki/Rick_Sanchez", }, { id: Math.random().toString(), - title: 'Морти Смит', - subTitle: 'Внук Рика', - body: 'Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.', - image: 'morty', - link: 'https://en.wikipedia.org/wiki/morty', + title: "Морти Смит", + subTitle: "Внук Рика", + body: "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.", + image: "morty", + link: "https://en.wikipedia.org/wiki/morty", }, { id: Math.random().toString(), - title: 'Бет Смит', - subTitle: 'Мать Морти', - body: 'Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.', - image: 'beth', - link: 'https://en.wikipedia.org/wiki/beth', + title: "Бет Смит", + subTitle: "Мать Морти", + body: "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.", + image: "beth", + link: "https://en.wikipedia.org/wiki/beth", }, { id: Math.random().toString(), - title: 'Джерри Смит', - subTitle: 'Отец Морти', - body: 'Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.', - image: 'jerry', - link: 'https://en.wikipedia.org/wiki/beth', + title: "Джерри Смит", + subTitle: "Отец Морти", + body: "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.", + image: "jerry", + link: "https://en.wikipedia.org/wiki/beth", }, { id: Math.random().toString(), body: 'Семья Смитов - это только часть персонажей, представленных в сериале "Rick and Morty". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир "Rick and Morty"!', }, -] +]; export const LandingPage = () => { return ( @@ -91,24 +90,18 @@ export const LandingPage = () => { -
-
-

- Персонажи из
- огурчиковой вселенной -

- -

- На этой странице представлены персонажи из сериала “ - Rick and Morty - ”. Этот популярный анимационный сериал, созданный Джастином - Ройландом и Дэном Хармоном, рассказывает о приключениях Рика - Санчеза, гениального и эксцентричного ученого, и его внука Морти - Смита. -

-
- -
+ {data.map((item, index) => ( + + {item.body} + + ))}