diff --git a/index.d.ts b/index.d.ts index 6218df0..b49fb82 100644 --- a/index.d.ts +++ b/index.d.ts @@ -2,3 +2,8 @@ declare module '*.png' { const path: string; export default path; } + +declare module '*.svg' { + const path: string; + export default path; +} diff --git a/src/assets/icons/external-link.svg b/src/assets/icons/external-link.svg new file mode 100644 index 0000000..f5af398 --- /dev/null +++ b/src/assets/icons/external-link.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts new file mode 100644 index 0000000..066f200 --- /dev/null +++ b/src/assets/icons/index.ts @@ -0,0 +1 @@ +export { default as externalIcon } from './external-link.svg'; diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts new file mode 100644 index 0000000..7af471b --- /dev/null +++ b/src/assets/images/index.ts @@ -0,0 +1 @@ +export * as landing from './landing'; diff --git a/src/assets/images/landing/beth.png b/src/assets/images/landing/beth.png new file mode 100644 index 0000000..6c9dbdc Binary files /dev/null and b/src/assets/images/landing/beth.png differ diff --git a/src/assets/images/landing/index.ts b/src/assets/images/landing/index.ts new file mode 100644 index 0000000..fe03dbc --- /dev/null +++ b/src/assets/images/landing/index.ts @@ -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'; diff --git a/src/assets/images/landing/jerry.png b/src/assets/images/landing/jerry.png new file mode 100644 index 0000000..6bd0ead Binary files /dev/null and b/src/assets/images/landing/jerry.png differ diff --git a/src/assets/images/landing/morty.png b/src/assets/images/landing/morty.png new file mode 100644 index 0000000..6cfd82f Binary files /dev/null and b/src/assets/images/landing/morty.png differ diff --git a/src/assets/images/landing/rick.png b/src/assets/images/landing/rick.png new file mode 100644 index 0000000..3be6144 Binary files /dev/null and b/src/assets/images/landing/rick.png differ diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx index 7880d30..c96af06 100644 --- a/src/components/link/link.tsx +++ b/src/components/link/link.tsx @@ -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 './style.css' export const Link = (props) => { // const className = 'link' + (props.contrast ? ' link__contrast' : '') + + const isExternal = useMemo(() => props.href.startsWith('http'), [props.href]); + return ( {props.children} + {isExternal && external} ); }; diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx index 7920021..ee9edf5 100644 --- a/src/pages/landing.tsx +++ b/src/pages/landing.tsx @@ -1,11 +1,52 @@ import React from "react"; -import { NavPanel } from '../components/nav-panel' +import { NavPanel } from "../components/nav-panel"; -import logo from '../assets/logo_1x.png' -import logo2x from '../assets/logo_2x.png' -import logo4x from '../assets/logo_4x.png' -import cucumber from '../assets/cucumber.png' +import logo from "../assets/logo_1x.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, + +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 = () => { return ( @@ -41,16 +82,14 @@ export const LandingPage = () => {

На этой странице представлены персонажи из сериала “ - - Rick and Morty - + Rick and Morty ”. Этот популярный анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном, рассказывает о приключениях Рика Санчеза, гениального и эксцентричного ученого, и его внука Морти Смита.

- +
@@ -61,9 +100,7 @@ export const LandingPage = () => {

На этой странице представлены персонажи из сериала “ - - Rick and Morty - + Rick and Morty ”. Этот популярный анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном, рассказывает о приключениях Рика Санчеза, гениального и эксцентричного ученого, и его внука Морти @@ -74,7 +111,6 @@ export const LandingPage = () => {

- );