uk.react.dev/src/components/Layout/TopNav/BrandMenu.tsx at 92a4e0de4b7273061cfa3f430e67b5d06fdbf70b · reactjs/uk.react.dev · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import * as ContextMenu from '@radix-ui/react-context-menu';
import {IconCopy} from 'components/Icon/IconCopy';
import {IconDownload} from 'components/Icon/IconDownload';
import {IconNewPage} from 'components/Icon/IconNewPage';
import {ExternalLink} from 'components/ExternalLink';
import {IconClose} from '../../Icon/IconClose';

function MenuItem({
  children,
  onSelect,
}: {
  children: React.ReactNode;
  onSelect?: () => void;
}) {
  return (
    <ContextMenu.Item
      className="flex items-center hover:bg-border dark:hover:bg-border-dark ps-6 pe-4 py-2 w-full text-base cursor-pointer"
      onSelect={onSelect}>
      {children}
    </ContextMenu.Item>
  );
}

function DownloadMenuItem({
  fileName,
  href,
  children,
}: {
  fileName: string;
  href: string;
  children: React.ReactNode;
}) {
  return (
    <a download={fileName} href={href} className="flex items-center w-full">
      <MenuItem>{children}</MenuItem>
    </a>
  );
}

export default function BrandMenu({children}: {children: React.ReactNode}) {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger className="flex items-center">
        {children}
      </ContextMenu.Trigger>
      <ContextMenu.Portal>
        <ContextMenu.Content
          className="hidden lg:block z-50 mt-6 bg-wash border border-border dark:border-border-dark dark:bg-wash-dark rounded min-w-56 overflow-hidden shadow"
          // @ts-ignore
          sideOffset={0}
          align="end">
          <ContextMenu.Label className="ps-4 pt-2 text-base text-tertiary dark:text-tertiary-dark">
            Темний режим
          </ContextMenu.Label>
          <DownloadMenuItem
            fileName="react_logo_dark.svg"
            href="/images/brand/logo_dark.svg">
            <span className="w-8">
              <IconDownload />
            </span>
            <span>Лого як SVG</span>
          </DownloadMenuItem>
          <DownloadMenuItem
            fileName="react_wordmark_dark.svg"
            href="/images/brand/wordmark_dark.svg">
            <span className="w-8">
              <IconDownload />
            </span>
            <span>Шрифтове лого як SVG</span>
          </DownloadMenuItem>
          <MenuItem
            onSelect={async () => {
              await navigator.clipboard.writeText('#58C4DC');
            }}>
            <span className="w-8">
              <IconCopy />
            </span>
            <span>Скопіювати колір темного режиму</span>
          </MenuItem>
          <ContextMenu.Label className="ps-4 text-base text-tertiary dark:text-tertiary-dark">
            Світлий режим
          </ContextMenu.Label>
          <DownloadMenuItem
            fileName="react_logo_light.svg"
            href="/images/brand/logo_light.svg">
            <span className="w-8">
              <IconDownload />
            </span>
            <span>Лого SVG</span>
          </DownloadMenuItem>
          <DownloadMenuItem
            fileName="react_wordmark_light.svg"
            href="/images/brand/wordmark_light.svg">
            <span className="w-8">
              <IconDownload />
            </span>
            <span>Шрифтове лого як SVG</span>
          </DownloadMenuItem>
          <MenuItem
            onSelect={async () => {
              await navigator.clipboard.writeText('#087EA4');
            }}>
            <span className="w-8">
              <IconCopy />
            </span>
            <span>Скопіювати колір світлого режиму</span>
          </MenuItem>
          <div className="uwu-visible flex flex-col">
            <ContextMenu.Separator className="" />
            <ContextMenu.Label className="ps-4 text-base text-tertiary dark:text-tertiary-dark">
              uwu
            </ContextMenu.Label>
            <MenuItem
              onSelect={() => {
                // @ts-ignore
                window.__setUwu(false);
              }}>
              <span className="w-8">
                <IconClose />
              </span>
              <span>Вимкнути</span>
            </MenuItem>
            <DownloadMenuItem fileName="react_uwu_png" href="/images/uwu.png">
              <span className="w-8">
                <IconDownload />
              </span>
              <span>Лого як PNG</span>
            </DownloadMenuItem>

            <ExternalLink
              className="flex items-center"
              href="https://github.com/SAWARATSUKI/KawaiiLogos">
              <MenuItem>
                <span className="w-8">
                  <IconNewPage />
                </span>
                <span>Лого від @sawaratsuki1004</span>
              </MenuItem>
            </ExternalLink>
          </div>
        </ContextMenu.Content>
      </ContextMenu.Portal>
    </ContextMenu.Root>
  );
}