13.04 components + maps

src/components/link/index.ts

@@ -0,0 +1 @@
+export { Link } from './link'

src/components/link/link.styled.ts

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

src/components/link/link.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+// import './style.css'
+import { StyledLink } from './link.styled'
+
+export const Link = (props) => {
+  // const className = 'link' + (props.contrast ? ' link__contrast' : '')
+  return (
+    <StyledLink contrast={props.contrast} href={props.href}>
+      {props.children}
+    </StyledLink>
+  );
+};

src/components/link/style.css

@@ -0,0 +1,10 @@
+.link {
+  font-weight: 400;
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  color: var(--dark-link);
+}
+
+.link__contrast {
+  color: var(--text-contrast);
+}

src/components/nav-panel/index.ts

@@ -0,0 +1 @@
+export { NavPanel } from './nav-panel'

src/components/nav-panel/nav-panel.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { Link } from "../link";
+
+const navList = [
+  { title: "Home", href: "#01" },
+  { title: "Персонажи", href: "#02" },
+  { title: "Локации", href: "#03" },
+  { title: "Эризоды", href: "#04" },
+];
+
+export function NavPanel() {
+  return (
+    <nav className="nav">
+      <ul>
+        {navList.map((element, index) => (
+          <li key={element.href}>
+            <Link contrast={Boolean(index)} href={element.href}>{element.title}</Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

src/pages/landing.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+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'
@@ -26,31 +28,7 @@ export const LandingPage = () => {
           (min-width: 520px) 880px
         "
         />
-
-        <nav className="nav">
-          <ul>
-            <li>
-              <a className="link" href="#01">
-                Home
-              </a>
-            </li>
-            <li>
-              <a className="link link__contrast" href="#02">
-                Персонажи
-              </a>
-            </li>
-            <li>
-              <a className="link link__contrast" href="#03">
-                Локации
-              </a>
-            </li>
-            <li>
-              <a className="link link__contrast" href="#04">
-                Эризоды
-              </a>
-            </li>
-          </ul>
-        </nav>
+        <NavPanel />
       </header>
 
       <main className="main">

src/style/main.css

@@ -30,19 +30,6 @@ body {
   color: var(--brand);
 }
 
-.link {
-  font-weight: 400;
-  text-decoration: underline;
-  text-decoration-skip-ink: none;
-  color: var(--dark-link);
-}
-
-.link__contrast {
-  color: var(--text-contrast);
-}
-
-
-
 .p {
   font-size: 24px;
 }
@@ -115,6 +102,7 @@ body {
 .nav ul {
   display: flex;
   gap: 12px;
+  list-style: none;
 }
 
 .nav {