(#1) Landing on Card component
This commit is contained in:
parent
388aec2050
commit
68e94680e3
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "r-and-m",
|
||||
"version": "1.0.0",
|
||||
"version": "0.0.0",
|
||||
"description": "",
|
||||
"main": "./src/index.tsx",
|
||||
"directories": {
|
||||
|
||||
34
src/components/card/card.jsx
Normal file
34
src/components/card/card.jsx
Normal file
@ -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,
|
||||
}) => (
|
||||
<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,
|
||||
};
|
||||
0
src/components/card/card.style.ts
Normal file
0
src/components/card/card.style.ts
Normal file
1
src/components/card/index.ts
Normal file
1
src/components/card/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { Card } from './card.jsx'
|
||||
@ -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 (
|
||||
<StyledLink contrast={props.contrast} href={props.href}>
|
||||
<StyledLink contrast={props.contrast} href={props.href} {...linkProps}>
|
||||
{props.children}
|
||||
{isExternal && <img src={externalIcon} alt="external" />}
|
||||
{isExternal && <img src={externalIcon} alt="external link icon" />}
|
||||
</StyledLink>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -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 = () => {
|
||||
</div>
|
||||
<img className="card--img" src={cucumber} alt="" />
|
||||
</header>
|
||||
<article className="card card__toRight">
|
||||
<div className="card-text">
|
||||
<h1 className="h1">
|
||||
Персонажи из <br />
|
||||
<span className="brand-text">огурчиковой вселенной</span>
|
||||
</h1>
|
||||
|
||||
<p className="p card--text__p">
|
||||
На этой странице представлены персонажи из сериала “
|
||||
<Link href="https://en.wikipedia.org/wiki/Rick_Sanchez">Rick and Morty</Link>
|
||||
”. Этот популярный анимационный сериал, созданный Джастином
|
||||
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
|
||||
Санчеза, гениального и эксцентричного ученого, и его внука Морти
|
||||
Смита.
|
||||
</p>
|
||||
</div>
|
||||
<img className="card--img" src={cucumber} alt="" />
|
||||
</article>
|
||||
{data.map((item, index) => (
|
||||
<Card
|
||||
directionReverse={index % 2 === 0}
|
||||
key={item.id}
|
||||
title={item.title}
|
||||
image={item.image}
|
||||
link={item.link}
|
||||
>
|
||||
{item.body}
|
||||
</Card>
|
||||
))}
|
||||
</main>
|
||||
|
||||
<footer className="page-footer"></footer>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user