css.gui/apps/docs/components/Header.tsx at parse · uiforks/css.gui · GitHub

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { useId } from 'react'
import Link from 'next/link'
import { Logo } from '@compai/logo'
import pkg from '../../../packages/gui/package.json'

export const Header = () => {
  const id = useId()

  return (
    <header
      sx={{
        fontFamily: 'body',
        borderBottom: 'thin solid',
        borderColor: 'border',
        height: '54px',
        px: 3,
        position: 'sticky',
        width: '100%',
        backgroundColor: 'background',
        zIndex: 999,
        top: 0,
        display: 'flex',
        alignItems: 'center',
      }}
    >
      <a
        href="https://components.ai"
        title="Components AI - Home"
        sx={{
          color: 'text',
          textDecoration: 'none',
          display: 'flex',
          alignItems: 'center',
          mr: 3,
        }}
      >
        <span>
          <Logo height={20} width={20} seed={id} />
        </span>
      </a>
      <Link href="/" passHref={true}>
        <a
          sx={{
            fontWeight: 500,
            color: 'text',
            textDecoration: 'none',
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <span>
            CSS GUI
            <span sx={{ fontSize: 0, color: 'muted', ml: 1 }}>
              v{pkg.version}
            </span>
          </span>
        </a>
      </Link>
      <Link href="/home" passHref={true}>
        <a
          sx={{
            fontWeight: 500,
            color: 'text',
            textDecoration: 'none',
            display: 'flex',
            alignItems: 'center',
            fontSize: [0, 1, 1],
            px: 3,
            ml: 'auto',
          }}
        >
          Docs
        </a>
      </Link>
      <Link href="/properties" passHref={true}>
        <a
          sx={{
            fontWeight: 500,
            color: 'text',
            textDecoration: 'none',
            display: 'flex',
            alignItems: 'center',
            fontSize: [0, 1, 1],
            px: 3,
          }}
        >
          Properties
        </a>
      </Link>
      <a
        sx={{
          textDecoration: 'none',
          color: 'currentColor',
          fontWeight: 600,
          transition: 'color .2s ease-in-out',
          px: 3,
          fontSize: [0, 1, 1],
          ':hover': {
            color: 'primary',
          },
        }}
        href="https://github.com/components-ai/css.gui"
      >
        GitHub
      </a>
    </header>
  )
}