(#1) Landing on Card component #2

Merged
primakov merged 2 commits from feature/landing-main-blocks into main 2024-04-20 22:34:56 +03:00
7 changed files with 146 additions and 48 deletions
Showing only changes of commit 79bed2dae6 - Show all commits

View File

@ -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,
}) => (
<article className={`card ${directionReverse ? "card__toRight" : ""}`}>
<div className="card-text">
{title && (
<h1 className="h1">
<Link href={link}>{title}</Link>
</h1>
)}
<p className="p card--text__p">{children}</p>
</div>
{image && <img className="card--img" src={landing[image]} alt="" />}
</article>
);
Card.defaultProps = {
title: void 0,
subTitle: void 0,
image: void 0,
link: void 0,
directionReverse: false,
};

View File

@ -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;
`;

View File

@ -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,
}) => (
<Wrapper>
<Header>
{title && (
<h1 className="h1">
<Link inheritColor href={link}>
{title}
</Link>
</h1>
)}
{subTitle && <SubHeader>{subTitle}</SubHeader>}
</Header>
<Content directionReverse={directionReverse}>
{image && (
<CardImage directionReverse={directionReverse} src={landing[image]} />
)}
<Text>{children}</Text>
</Content>
</Wrapper>
);
Card.defaultProps = {
title: void 0,
subTitle: void 0,
image: void 0,
link: void 0,
directionReverse: false,
};

View File

@ -1 +1 @@
export { Card } from './card.jsx'
export { Card } from './card'

View File

@ -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);
}
`
`;
}
}}
${(props) => {
if (props.inheritColor) {
return css`
font-weight: inherit;
color: inherit;
text-decoration: inherit;
`;
}
}}
`;

View File

@ -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 (
<StyledLink contrast={props.contrast} href={props.href} {...linkProps}>
<StyledLink inheritColor={props.inheritColor} contrast={props.contrast} href={props.href} {...linkProps}>
{props.children}
{isExternal && <img src={externalIcon} alt="external link icon" />}
</StyledLink>
);
};
Link.defaultProps = {
contrast: false,
inheritColor: false,
}

View File

@ -97,6 +97,7 @@ export const LandingPage = () => {
title={item.title}
image={item.image}
link={item.link}
subTitle={item.subTitle}
>
{item.body}
</Card>