From 68e94680e3a4dc04297fc34f772602b9e22dcf92 Mon Sep 17 00:00:00 2001 From: primakov Date: Sat, 20 Apr 2024 15:14:49 +0300 Subject: [PATCH 1/2] (#1) Landing on Card component --- package.json | 2 +- src/components/card/card.jsx | 34 ++++++++++++++ src/components/card/card.style.ts | 0 src/components/card/index.ts | 1 + src/components/link/link.tsx | 16 ++++--- src/components/link/style.css | 10 ---- src/pages/landing.tsx | 76 ++++++++++++++----------------- 7 files changed, 80 insertions(+), 59 deletions(-) create mode 100644 src/components/card/card.jsx create mode 100644 src/components/card/card.style.ts create mode 100644 src/components/card/index.ts delete mode 100644 src/components/link/style.css 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.jsx b/src/components/card/card.jsx new file mode 100644 index 0000000..0cd65f4 --- /dev/null +++ b/src/components/card/card.jsx @@ -0,0 +1,34 @@ +import React from "react"; + +import { landing } from "../../assets/images"; +import { Link } from "../link"; + +export const Card = ({ + title, + subTitle: _subTitle, + children, + image, + link, + directionReverse, +}) => ( +
+
+ {title && ( +

+ {title} +

+ )} + +

{children}

+
+ {image && } +
+); + +Card.defaultProps = { + title: void 0, + subTitle: void 0, + image: void 0, + link: void 0, + directionReverse: false, +}; diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/components/card/index.ts b/src/components/card/index.ts new file mode 100644 index 0000000..1f5a0c2 --- /dev/null +++ b/src/components/card/index.ts @@ -0,0 +1 @@ +export { Card } from './card.jsx' \ No newline at end of file diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx index c96af06..e5425f1 100644 --- a/src/components/link/link.tsx +++ b/src/components/link/link.tsx @@ -3,17 +3,21 @@ 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]); + 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} ); }; 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..014e764 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,17 @@ export const LandingPage = () => { -
-
-

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

- -

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

-
- -
+ {data.map((item, index) => ( + + {item.body} + + ))}
From 79bed2dae67f34fc2c3d5ff66541975537bc9fe3 Mon Sep 17 00:00:00 2001 From: primakov Date: Sat, 20 Apr 2024 22:33:06 +0300 Subject: [PATCH 2/2] =?UTF-8?q?(#1)=20=D0=94=D0=BE=D0=B1=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=B2=D1=91=D1=80=D1=81=D1=82=D0=BA=D1=83=20=D1=86=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D1=85=20=D0=B1=D0=BB?= =?UTF-8?q?=D0=BE=D0=BA=D0=BE=D0=B2=20landing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/card/card.jsx | 34 ------------------ src/components/card/card.style.ts | 56 ++++++++++++++++++++++++++++++ src/components/card/card.tsx | 49 ++++++++++++++++++++++++++ src/components/card/index.ts | 2 +- src/components/link/link.styled.ts | 36 +++++++++++++------ src/components/link/link.tsx | 16 +++++++-- src/pages/landing.tsx | 1 + 7 files changed, 146 insertions(+), 48 deletions(-) delete mode 100644 src/components/card/card.jsx create mode 100644 src/components/card/card.tsx diff --git a/src/components/card/card.jsx b/src/components/card/card.jsx deleted file mode 100644 index 0cd65f4..0000000 --- a/src/components/card/card.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; - -import { landing } from "../../assets/images"; -import { Link } from "../link"; - -export const Card = ({ - title, - subTitle: _subTitle, - children, - image, - link, - directionReverse, -}) => ( -
-
- {title && ( -

- {title} -

- )} - -

{children}

-
- {image && } -
-); - -Card.defaultProps = { - title: void 0, - subTitle: void 0, - image: void 0, - link: void 0, - directionReverse: false, -}; diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts index e69de29..02cd676 100644 --- a/src/components/card/card.style.ts +++ 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 index 1f5a0c2..6651f03 100644 --- a/src/components/card/index.ts +++ b/src/components/card/index.ts @@ -1 +1 @@ -export { Card } from './card.jsx' \ No newline at end of file +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 e5425f1..d011df6 100644 --- a/src/components/link/link.tsx +++ b/src/components/link/link.tsx @@ -4,7 +4,14 @@ import { externalIcon } from '../../assets/icons' import { StyledLink } from './link.styled' -export const Link = (props) => { +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 = {} @@ -15,9 +22,14 @@ export const Link = (props) => { } return ( - + {props.children} {isExternal && external link icon} ); }; + +Link.defaultProps = { + contrast: false, + inheritColor: false, +} diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx index 014e764..83cfa1b 100644 --- a/src/pages/landing.tsx +++ b/src/pages/landing.tsx @@ -97,6 +97,7 @@ export const LandingPage = () => { title={item.title} image={item.image} link={item.link} + subTitle={item.subTitle} > {item.body}