Merge pull request '(#1) Landing on Card component' (#2) from feature/landing-main-blocks into main

Reviewed-on: https://git.inno-js.ru/inno-js/rick-and-morty/pulls/2
This commit is contained in:
Primakov Alexandr Alexandrovich 2024-04-20 22:34:55 +03:00
commit 9de669e3c1
8 changed files with 190 additions and 71 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "r-and-m", "name": "r-and-m",
"version": "1.0.0", "version": "0.0.0",
"description": "![Рик огурчик!!!](./docs/cucumber.webp)", "description": "![Рик огурчик!!!](./docs/cucumber.webp)",
"main": "./src/index.tsx", "main": "./src/index.tsx",
"directories": { "directories": {

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

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

View File

@ -1,19 +1,33 @@
import styled from "@emotion/styled" import styled from "@emotion/styled";
import { css } from '@emotion/react' import { css } from "@emotion/react";
export const StyledLink = styled.a` export const StyledLink = styled.a<{
contrast?: boolean;
inheritColor?: boolean;
}>`
font-weight: 400; font-weight: 400;
text-decoration: underline; text-decoration: underline;
text-decoration-skip-ink: none; 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) { if (props.contrast) {
return css` return css`
&:hover { &:hover {
color: var(--dark-link); color: var(--dark-link);
} }
` `;
}
}}
${(props) => {
if (props.inheritColor) {
return css`
font-weight: inherit;
color: inherit;
text-decoration: inherit;
`;
} }
}} }}
`; `;

View File

@ -3,17 +3,33 @@ import React, { useMemo } from "react";
import { externalIcon } from '../../assets/icons' import { externalIcon } from '../../assets/icons'
import { StyledLink } from './link.styled' import { StyledLink } from './link.styled'
// import './style.css'
export const Link = (props) => { interface LinkProps {
// const className = 'link' + (props.contrast ? ' link__contrast' : '') href: string;
children: React.ReactNode;
contrast?: boolean;
inheritColor?: boolean;
}
const isExternal = useMemo(() => props.href.startsWith('http'), [props.href]); 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 ( return (
<StyledLink contrast={props.contrast} href={props.href}> <StyledLink inheritColor={props.inheritColor} contrast={props.contrast} href={props.href} {...linkProps}>
{props.children} {props.children}
{isExternal && <img src={externalIcon} alt="external" />} {isExternal && <img src={externalIcon} alt="external link icon" />}
</StyledLink> </StyledLink>
); );
}; };
Link.defaultProps = {
contrast: false,
inheritColor: false,
}

View File

@ -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);
}

View File

@ -1,52 +1,51 @@
import React from "react"; import React from "react";
import { NavPanel } from "../components/nav-panel"; import { NavPanel } from "../components/nav-panel";
import logo from "../assets/logo_1x.png"; import logo from "../assets/logo_1x.png";
import cucumber from "../assets/cucumber.png";
import logo2x from "../assets/logo_2x.png"; import logo2x from "../assets/logo_2x.png";
import logo4x from "../assets/logo_4x.png"; import logo4x from "../assets/logo_4x.png";
import cucumber from "../assets/cucumber.png";
import { Link } from "../components/link"; import { Link } from "../components/link";
// directionReverse: false, import { Card } from "../components/card";
const data = [ const data = [
{ {
id: Math.random().toString(), id: Math.random().toString(),
title: 'Рик Санчез', title: "Рик Санчез",
subTitle: 'Главный герой', subTitle: "Главный герой",
body: 'Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.', body: "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.",
image: 'rick', image: "rick",
link: 'https://en.wikipedia.org/wiki/Rick_Sanchez', link: "https://en.wikipedia.org/wiki/Rick_Sanchez",
}, },
{ {
id: Math.random().toString(), id: Math.random().toString(),
title: 'Морти Смит', title: "Морти Смит",
subTitle: 'Внук Рика', subTitle: "Внук Рика",
body: 'Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.', body: "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.",
image: 'morty', image: "morty",
link: 'https://en.wikipedia.org/wiki/morty', link: "https://en.wikipedia.org/wiki/morty",
}, },
{ {
id: Math.random().toString(), id: Math.random().toString(),
title: 'Бет Смит', title: "Бет Смит",
subTitle: 'Мать Морти', subTitle: "Мать Морти",
body: 'Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.', body: "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.",
image: 'beth', image: "beth",
link: 'https://en.wikipedia.org/wiki/beth', link: "https://en.wikipedia.org/wiki/beth",
}, },
{ {
id: Math.random().toString(), id: Math.random().toString(),
title: 'Джерри Смит', title: "Джерри Смит",
subTitle: 'Отец Морти', subTitle: "Отец Морти",
body: 'Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.', body: "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.",
image: 'jerry', image: "jerry",
link: 'https://en.wikipedia.org/wiki/beth', link: "https://en.wikipedia.org/wiki/beth",
}, },
{ {
id: Math.random().toString(), id: Math.random().toString(),
body: 'Семья Смитов - это только часть персонажей, представленных в сериале "Rick and Morty". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир "Rick and Morty"!', body: 'Семья Смитов - это только часть персонажей, представленных в сериале "Rick and Morty". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир "Rick and Morty"!',
}, },
] ];
export const LandingPage = () => { export const LandingPage = () => {
return ( return (
@ -91,24 +90,18 @@ export const LandingPage = () => {
</div> </div>
<img className="card--img" src={cucumber} alt="" /> <img className="card--img" src={cucumber} alt="" />
</header> </header>
<article className="card card__toRight"> {data.map((item, index) => (
<div className="card-text"> <Card
<h1 className="h1"> directionReverse={index % 2 === 0}
Персонажи из <br /> key={item.id}
<span className="brand-text">огурчиковой вселенной</span> title={item.title}
</h1> image={item.image}
link={item.link}
<p className="p card--text__p"> subTitle={item.subTitle}
На этой странице представлены персонажи из сериала >
<Link href="https://en.wikipedia.org/wiki/Rick_Sanchez">Rick and Morty</Link> {item.body}
. Этот популярный анимационный сериал, созданный Джастином </Card>
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика ))}
Санчеза, гениального и эксцентричного ученого, и его внука Морти
Смита.
</p>
</div>
<img className="card--img" src={cucumber} alt="" />
</article>
</main> </main>
<footer className="page-footer"></footer> <footer className="page-footer"></footer>