Подготовка компонента на лэндинг

This commit is contained in:
Primakov Alexandr Alexandrovich 2024-04-20 13:23:27 +03:00
parent d79676cbb4
commit 388aec2050
11 changed files with 73 additions and 15 deletions

5
index.d.ts vendored
View File

@ -2,3 +2,8 @@ declare module '*.png' {
const path: string; const path: string;
export default path; export default path;
} }
declare module '*.svg' {
const path: string;
export default path;
}

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11" stroke="#2E81FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 3H21V9" stroke="#2E81FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 14L21 3" stroke="#2E81FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 644 B

View File

@ -0,0 +1 @@
export { default as externalIcon } from './external-link.svg';

View File

@ -0,0 +1 @@
export * as landing from './landing';

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

View File

@ -0,0 +1,4 @@
export { default as beth } from './beth.png';
export { default as jerry } from './jerry.png';
export { default as morty } from './morty.png';
export { default as rick } from './rick.png';

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

View File

@ -1,13 +1,19 @@
import React from "react"; import React, { useMemo } from "react";
import { externalIcon } from '../../assets/icons'
// import './style.css'
import { StyledLink } from './link.styled' import { StyledLink } from './link.styled'
// import './style.css'
export const Link = (props) => { export const Link = (props) => {
// const className = 'link' + (props.contrast ? ' link__contrast' : '') // const className = 'link' + (props.contrast ? ' link__contrast' : '')
const isExternal = useMemo(() => props.href.startsWith('http'), [props.href]);
return ( return (
<StyledLink contrast={props.contrast} href={props.href}> <StyledLink contrast={props.contrast} href={props.href}>
{props.children} {props.children}
{isExternal && <img src={externalIcon} alt="external" />}
</StyledLink> </StyledLink>
); );
}; };

View File

@ -1,11 +1,52 @@
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 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 cucumber from "../assets/cucumber.png";
import { Link } from "../components/link";
// directionReverse: false,
const data = [
{
id: Math.random().toString(),
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',
},
{
id: Math.random().toString(),
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',
},
{
id: Math.random().toString(),
body: 'Семья Смитов - это только часть персонажей, представленных в сериале "Rick and Morty". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир "Rick and Morty"!',
},
]
export const LandingPage = () => { export const LandingPage = () => {
return ( return (
@ -41,16 +82,14 @@ export const LandingPage = () => {
<p className="p card--text__p"> <p className="p card--text__p">
На этой странице представлены персонажи из сериала На этой странице представлены персонажи из сериала
<a className="link" href="#"> <Link href="#">Rick and Morty</Link>
Rick and Morty
</a>
. Этот популярный анимационный сериал, созданный Джастином . Этот популярный анимационный сериал, созданный Джастином
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
Санчеза, гениального и эксцентричного ученого, и его внука Морти Санчеза, гениального и эксцентричного ученого, и его внука Морти
Смита. Смита.
</p> </p>
</div> </div>
<img className="card--img" src="./assets/cucumber.png" alt="" /> <img className="card--img" src={cucumber} alt="" />
</header> </header>
<article className="card card__toRight"> <article className="card card__toRight">
<div className="card-text"> <div className="card-text">
@ -61,9 +100,7 @@ export const LandingPage = () => {
<p className="p card--text__p"> <p className="p card--text__p">
На этой странице представлены персонажи из сериала На этой странице представлены персонажи из сериала
<a className="link" href="#"> <Link href="https://en.wikipedia.org/wiki/Rick_Sanchez">Rick and Morty</Link>
Rick and Morty
</a>
. Этот популярный анимационный сериал, созданный Джастином . Этот популярный анимационный сериал, созданный Джастином
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
Санчеза, гениального и эксцентричного ученого, и его внука Морти Санчеза, гениального и эксцентричного ученого, и его внука Морти
@ -74,7 +111,6 @@ export const LandingPage = () => {
</article> </article>
</main> </main>
<aside></aside>
<footer className="page-footer"></footer> <footer className="page-footer"></footer>
</> </>
); );