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>
+  );
+}