Files
supabase/apps/docs/components/RefVersionDropdown.tsx
Ivan Vasilov 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00

82 lines
2.1 KiB
TypeScript

'use client'
import { ChevronDown } from 'lucide-react'
import { useRouter } from 'next/navigation'
import {
Badge,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger,
} from 'ui'
import { REFERENCES } from '~/content/navigation.references'
const RevVersionDropdown = ({
library,
currentVersion,
}: {
library: string
currentVersion: string
}) => {
const { push } = useRouter()
const libraryMeta = REFERENCES?.[library] ?? undefined
const versions = libraryMeta?.versions ?? []
if (!versions || versions.length <= 1) {
return null
}
const onSelectVersion = (version: string) => {
if (version === versions[0]) {
push(`/reference/${library}`)
} else {
push(`/reference/${library}/${version}`)
}
}
return (
<DropdownMenu>
<DropdownMenuTrigger>
<div
className="
group
justify-between
bg-control
border
hover:border-control
hover:bg-overlay-hover
border-control px-2 h-[32px] rounded-sm
font-mono
flex items-center gap-1 text-foreground-muted text-xs group-hover:text-foreground transition
"
>
<span className="text-foreground text-sm group-hover:text-foreground transition">
{currentVersion}.0
</span>
<ChevronDown size={14} strokeWidth={2} />
</div>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" side="bottom" className="w-48">
<DropdownMenuLabel className="text-xs">Stable releases</DropdownMenuLabel>
{versions.map((version, index) => (
<DropdownMenuItem
key={version}
onClick={() => onSelectVersion(version)}
className="justify-between flex"
>
<span className={`${currentVersion === version ? 'font-bold' : ''}`}>
Version {version}.0
</span>
{index === 0 && <Badge>Latest</Badge>}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
)
}
export default RevVersionDropdown