From 68e94680e3a4dc04297fc34f772602b9e22dcf92 Mon Sep 17 00:00:00 2001
From: primakov <primakovpro@gmail.com>
Date: Sat, 20 Apr 2024 15:14:49 +0300
Subject: [PATCH] (#1) Landing on Card component

---
 package.json                      |  2 +-
 src/components/card/card.jsx      | 34 ++++++++++++++
 src/components/card/card.style.ts |  0
 src/components/card/index.ts      |  1 +
 src/components/link/link.tsx      | 16 ++++---
 src/components/link/style.css     | 10 ----
 src/pages/landing.tsx             | 76 ++++++++++++++-----------------
 7 files changed, 80 insertions(+), 59 deletions(-)
 create mode 100644 src/components/card/card.jsx
 create mode 100644 src/components/card/card.style.ts
 create mode 100644 src/components/card/index.ts
 delete mode 100644 src/components/link/style.css

diff --git a/package.json b/package.json
index ad1854b..6a513e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "r-and-m",
-    "version": "1.0.0",
+    "version": "0.0.0",
     "description": "![Рик огурчик!!!](./docs/cucumber.webp)",
     "main": "./src/index.tsx",
     "directories": {
diff --git a/src/components/card/card.jsx b/src/components/card/card.jsx
new file mode 100644
index 0000000..0cd65f4
--- /dev/null
+++ b/src/components/card/card.jsx
@@ -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,
+};
diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/card/index.ts b/src/components/card/index.ts
new file mode 100644
index 0000000..1f5a0c2
--- /dev/null
+++ b/src/components/card/index.ts
@@ -0,0 +1 @@
+export { Card } from './card.jsx'
\ No newline at end of file
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index c96af06..e5425f1 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -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>
   );
 };
diff --git a/src/components/link/style.css b/src/components/link/style.css
deleted file mode 100644
index a892a88..0000000
--- a/src/components/link/style.css
+++ /dev/null
@@ -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);
-}
diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx
index ee9edf5..014e764 100644
--- a/src/pages/landing.tsx
+++ b/src/pages/landing.tsx
@@ -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>