Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-12 01:23:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(website): extract layouts and use more server components (#9027)

Browse Source 
Closes https://github.com/discordjs/discord.js/issues/8920
Closes https://github.com/discordjs/discord.js/issues/8997
This commit is contained in:
Suneet Tipirneni
2023-01-10 12:25:14 -05:00
committed by GitHub
parent 158db474b7
commit 39c4de2dbc
73 changed files with 1831 additions and 1476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/website/src/components/OverloadSwitcher.tsx Normal file
View File

@@ -0,0 +1,54 @@
'use client';
import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
import type { PropsWithChildren, ReactNode } from 'react';
import { useState } from 'react';
export interface OverloadSwitcherProps {
overloads: ReactNode[];
}
export function OverloadSwitcher({ overloads, children }: PropsWithChildren<{ overloads: ReactNode[] }>) {
const [overloadIndex, setOverloadIndex] = useState(1);
const overloadedNode = overloads[overloadIndex - 1]!;
const menu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
return (
<div className="flex flex-col place-items-start gap-2">
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={menu}
>
<div className="flex flex-row place-content-between place-items-center gap-2">
<VscVersions size={20} />
<div>
<span className="font-semibold">{`Overload ${overloadIndex}`}</span>
{` of ${overloads.length}`}
</div>
<VscChevronDown
className={`transform transition duration-150 ease-in-out ${menu.open ? 'rotate-180' : 'rotate-0'}`}
size={20}
/>
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
state={menu}
>
{overloads.map((_, idx) => (
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
key={idx}
onClick={() => setOverloadIndex(idx + 1)}
>
{`Overload ${idx + 1}`}
</MenuItem>
))}
</Menu>
{children}
{overloadedNode}
</div>
);
}