All files / Rindu/components/NavigationTopBarExtraField NavigationTopBarExtraField.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
19x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { ReactElement } from "react";
 
import Link from "next/link";
 
interface NavigationTopBarExtraFieldProps {
  selected: number;
}
 
export default function NavigationTopBarExtraField({
  selected,
}: NavigationTopBarExtraFieldProps): ReactElement {
  return (
    <nav className="extraField-nav">
      <ul>
        <li>
          <Link href="/collection/playlists">Playlists</Link>
        </li>
        <li>
          <Link href="/collection/podcasts">Podcasts</Link>
        </li>
        <li>
          <Link href="/collection/artists">Artists</Link>
        </li>
        <li>
          <Link href="/collection/albums">Albums</Link>
        </li>
      </ul>
      <style jsx>{`
        li:nth-of-type(${selected}) :global(a) {
          background-color: #343434;
        }
      `}</style>
      <style jsx>{`
        ul {
          display: flex;
          column-gap: 8px;
          margin-left: 24px;
        }
        li :global(a) {
          padding: 12px 18px;
          color: white;
          text-decoration: none;
          font-weight: 800;
          font-size: 13px;
          border-radius: 4px;
        }
        li {
          list-style: none;
        }
      `}</style>
    </nav>
  );
}