From 79bed2dae67f34fc2c3d5ff66541975537bc9fe3 Mon Sep 17 00:00:00 2001 From: primakov Date: Sat, 20 Apr 2024 22:33:06 +0300 Subject: [PATCH] =?UTF-8?q?(#1)=20=D0=94=D0=BE=D0=B1=D0=B8=D0=BB=20=D0=B2?= =?UTF-8?q?=D1=91=D1=80=D1=81=D1=82=D0=BA=D1=83=20=D1=86=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D1=80=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D1=85=20=D0=B1=D0=BB=D0=BE?= =?UTF-8?q?=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}