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

fix(website): keys

Browse Source
This commit is contained in:
iCrawl
2023-03-25 14:42:53 +01:00
parent d8d5f31d39
commit 1d2c152320
4 changed files with 158 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/website/src/components/OverloadSwitcher.tsx
View File

@@ -4,7 +4,7 @@ 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/menu';
import type { PropsWithChildren, ReactNode } from 'react';
import { useState } from 'react';
import { useMemo, useState } from 'react';
export interface OverloadSwitcherProps {
overloads: ReactNode[];
@@ -15,6 +15,20 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
const overloadedNode = overloads[overloadIndex - 1]!;
const menu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
const menuItems = useMemo(
() =>
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>
)),
[overloads],
);
return (
<div className="flex flex-col place-items-start gap-2">
<MenuButton
@@ -37,15 +51,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
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>
))}
{menuItems}
</Menu>
{children}
{overloadedNode}