mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-09 16:13:31 +01:00
103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { ChevronsUpDown } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import type { Key } from 'react-aria-components';
|
|
import { useMediaQuery } from 'usehooks-ts';
|
|
import { Drawer as Vaul } from 'vaul';
|
|
import { Button } from './Button';
|
|
import { ListBox, ListBoxItem } from './ListBox';
|
|
import { Popover } from './Popover';
|
|
import { Select, SelectValue } from './Select';
|
|
|
|
export function VersionSelect({
|
|
packageName,
|
|
version,
|
|
versions,
|
|
}: {
|
|
readonly packageName: string;
|
|
readonly version: string;
|
|
readonly versions: { readonly version: string }[];
|
|
}) {
|
|
const [selectedVersion, setSelectedVersion] = useState<Key>(version);
|
|
const [open, setOpen] = useState(false);
|
|
const isMedium = useMediaQuery('(min-width: 768px)');
|
|
|
|
useEffect(() => {
|
|
if (isMedium) {
|
|
setOpen(false);
|
|
}
|
|
}, [isMedium, setOpen]);
|
|
|
|
return (
|
|
<>
|
|
<Select
|
|
aria-label="Select a version"
|
|
className="hidden md:block"
|
|
onSelectionChange={(selected) => {
|
|
setSelectedVersion(selected);
|
|
}}
|
|
selectedKey={selectedVersion}
|
|
>
|
|
<Button className="flex w-full place-content-between place-items-center rounded-md bg-neutral-200 p-2 dark:bg-neutral-800">
|
|
<SelectValue className="font-medium" />
|
|
<ChevronsUpDown aria-hidden size={20} />
|
|
</Button>
|
|
<Popover className="max-h-60 w-[--trigger-width] overflow-auto rounded-md border border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
|
|
<ListBox items={versions} shouldFocusWrap>
|
|
{(item) => (
|
|
<ListBoxItem
|
|
className="flex p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
|
|
href={`/docs/packages/${packageName}/${item.version}`}
|
|
id={item.version}
|
|
textValue={item.version}
|
|
>
|
|
{item.version}
|
|
</ListBoxItem>
|
|
)}
|
|
</ListBox>
|
|
</Popover>
|
|
</Select>
|
|
|
|
<Vaul.NestedRoot onOpenChange={setOpen} open={open}>
|
|
<Vaul.Trigger
|
|
aria-label="Open version select"
|
|
className="flex w-full place-content-between place-items-center rounded-md bg-neutral-200 p-2 dark:bg-neutral-800 md:hidden"
|
|
>
|
|
<span className="font-medium">{selectedVersion}</span>
|
|
<ChevronsUpDown aria-hidden size={20} />
|
|
</Vaul.Trigger>
|
|
<Vaul.Portal>
|
|
<Vaul.Overlay className="fixed inset-0 bg-black/40" />
|
|
<Vaul.Content className="fixed bottom-0 left-0 right-0 flex max-h-[80%] flex-col rounded-t-lg bg-neutral-100 p-4 dark:bg-neutral-900">
|
|
<div className="mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-neutral-400" />
|
|
<ListBox
|
|
aria-label="Select a version"
|
|
className="flex flex-col gap-2 overflow-auto"
|
|
items={versions}
|
|
onSelectionChange={(selected) => {
|
|
const [val] = selected;
|
|
setSelectedVersion(val as Key);
|
|
}}
|
|
selectedKeys={[selectedVersion]}
|
|
selectionMode="single"
|
|
shouldFocusWrap
|
|
>
|
|
{(item) => (
|
|
<ListBoxItem
|
|
className="rounded-md p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
|
|
href={`/docs/packages/${packageName}/${item.version}`}
|
|
id={item.version}
|
|
textValue={item.version}
|
|
>
|
|
{item.version}
|
|
</ListBoxItem>
|
|
)}
|
|
</ListBox>
|
|
</Vaul.Content>
|
|
</Vaul.Portal>
|
|
</Vaul.NestedRoot>
|
|
</>
|
|
);
|
|
}
|