Skip to content

Commit f523e65

Browse files
tannerlinsleytannerlinsley
committed
More upgrades
1 parent 580b67c commit f523e65

19 files changed

Lines changed: 600 additions & 495 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
"dependencies": {
2323
"@auth/core": "0.37.0",
2424
"@floating-ui/react": "^0.27.8",
25-
"@headlessui/react": "1.7.18",
2625
"@netlify/functions": "^5.1.0",
2726
"@netlify/neon": "^0.1.0",
2827
"@netlify/vite-plugin-tanstack-start": "^1.0.2",
2928
"@number-flow/react": "^0.4.1",
3029
"@observablehq/plot": "^0.6.17",
3130
"@octokit/graphql": "^7.0.2",
31+
"@radix-ui/react-dialog": "^1.1.15",
3232
"@radix-ui/react-dropdown-menu": "^2.1.12",
3333
"@radix-ui/react-toast": "^1.2.2",
3434
"@sentry/react": "^8.35.0",

‎pnpm-lock.yaml‎

Lines changed: 54 additions & 51 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/BrandContextMenu.tsx‎

Lines changed: 64 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
import * as React from 'react'
2-
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
32
import { useToast } from '~/components/ToastProvider'
43
import { useNavigate } from '@tanstack/react-router'
54
import { twMerge } from 'tailwind-merge'
5+
import {
6+
Dropdown,
7+
DropdownTrigger,
8+
DropdownContent,
9+
DropdownItem,
10+
DropdownSeparator,
11+
} from './Dropdown'
612

713
interface BrandContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
814
children: React.ReactNode
@@ -51,8 +57,8 @@ export function BrandContextMenu({ children, ...rest }: BrandContextMenuProps) {
5157
return (
5258
<div onContextMenu={onContextMenu} {...rest}>
5359
{children}
54-
<DropdownMenu.Root open={open} onOpenChange={setOpen} modal>
55-
<DropdownMenu.Trigger asChild>
60+
<Dropdown open={open} onOpenChange={setOpen} modal>
61+
<DropdownTrigger asChild={false}>
5662
<span
5763
ref={virtualTriggerRef}
5864
style={{
@@ -63,71 +69,64 @@ export function BrandContextMenu({ children, ...rest }: BrandContextMenuProps) {
6369
height: 1,
6470
}}
6571
/>
66-
</DropdownMenu.Trigger>
67-
<DropdownMenu.Portal>
68-
<DropdownMenu.Content
69-
sideOffset={4}
70-
align="start"
71-
className="relative z-[1000] min-w-48 rounded-md border border-gray-200 bg-white p-1 text-sm shadow-lg dark:border-gray-700 dark:bg-gray-900/50 backdrop-blur-md"
72-
>
73-
{[
74-
{
75-
label: 'Logo as SVG (Black)',
76-
url: '/images/logos/logo-black.svg',
77-
},
78-
{
79-
label: 'Logo as SVG (White)',
80-
url: '/images/logos/logo-white.svg',
81-
darkBg: true,
82-
},
83-
{
84-
label: 'Wordmark as SVG (Black)',
85-
url: '/images/logos/logo-word-black.svg',
86-
},
87-
{
88-
label: 'Wordmark as SVG (White)',
89-
url: '/images/logos/logo-word-white.svg',
90-
darkBg: true,
91-
},
92-
].map(({ label, url, darkBg }) => (
93-
<DropdownMenu.Item
94-
key={label}
72+
</DropdownTrigger>
73+
<DropdownContent
74+
sideOffset={4}
75+
align="start"
76+
className="dark:bg-gray-900/50 backdrop-blur-md"
77+
>
78+
{[
79+
{
80+
label: 'Logo as SVG (Black)',
81+
url: '/images/logos/logo-black.svg',
82+
},
83+
{
84+
label: 'Logo as SVG (White)',
85+
url: '/images/logos/logo-white.svg',
86+
darkBg: true,
87+
},
88+
{
89+
label: 'Wordmark as SVG (Black)',
90+
url: '/images/logos/logo-word-black.svg',
91+
},
92+
{
93+
label: 'Wordmark as SVG (White)',
94+
url: '/images/logos/logo-word-white.svg',
95+
darkBg: true,
96+
},
97+
].map(({ label, url, darkBg }) => (
98+
<DropdownItem
99+
key={label}
100+
className="py-1"
101+
onSelect={async () => {
102+
try {
103+
const res = await fetch(url)
104+
const text = await res.text()
105+
await copyText(text)
106+
} catch (err) {
107+
console.error('Failed to copy logo', err)
108+
}
109+
}}
110+
>
111+
{label}
112+
<div
95113
className={twMerge(
96-
'flex cursor-pointer select-none items-center gap-2 rounded px-3 py-1 outline-none hover:bg-gray-500/20',
114+
'p-1 rounded-full',
115+
darkBg
116+
? 'bg-black text-white shadow-md'
117+
: 'bg-white text-black shadow-md',
97118
)}
98-
onSelect={async () => {
99-
try {
100-
const res = await fetch(url)
101-
const text = await res.text()
102-
await copyText(text)
103-
} catch (err) {
104-
console.error('Failed to copy logo', err)
105-
}
106-
}}
107119
>
108-
{label}
109-
<div
110-
className={twMerge(
111-
'p-1 rounded-full',
112-
darkBg
113-
? 'bg-black text-white shadow-md'
114-
: 'bg-white text-black shadow-md',
115-
)}
116-
>
117-
<img src={url} alt={label} className="h-6" />
118-
</div>
119-
</DropdownMenu.Item>
120-
))}
121-
<DropdownMenu.Separator className="my-1 h-px bg-gray-200 dark:bg-gray-700" />
122-
<DropdownMenu.Item
123-
className="flex cursor-pointer select-none items-center gap-2 rounded px-3 py-2 outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
124-
onSelect={() => navigate({ to: '/brand-guide' })}
125-
>
126-
Brand Guide & All Assets
127-
</DropdownMenu.Item>
128-
</DropdownMenu.Content>
129-
</DropdownMenu.Portal>
130-
</DropdownMenu.Root>
120+
<img src={url} alt={label} className="h-6" />
121+
</div>
122+
</DropdownItem>
123+
))}
124+
<DropdownSeparator />
125+
<DropdownItem onSelect={() => navigate({ to: '/brand-guide' })}>
126+
Brand Guide & All Assets
127+
</DropdownItem>
128+
</DropdownContent>
129+
</Dropdown>
131130
</div>
132131
)
133132
}

0 commit comments

Comments
 (0)