51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import type React from "react";
|
|
|
|
import { Disclosure } from "@headlessui/react";
|
|
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
|
|
|
|
import { Mono } from "./Mono.js";
|
|
|
|
export interface DropdownProps {
|
|
title: string;
|
|
stat?: number;
|
|
icon: JSX.Element;
|
|
defaultOpen?: boolean;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Dropdown = ({
|
|
title,
|
|
stat,
|
|
icon,
|
|
defaultOpen,
|
|
children,
|
|
}: DropdownProps): JSX.Element => {
|
|
return (
|
|
<Disclosure defaultOpen={defaultOpen}>
|
|
{({ open }) => (
|
|
<>
|
|
<Disclosure.Button className="group flex h-8 justify-between bg-slate-100 px-2 hover:bg-slate-200">
|
|
<div className="my-auto flex gap-2 text-slate-700">
|
|
<div className="my-auto">{icon}</div>
|
|
<span className="text-lg font-medium">{title}</span>
|
|
{stat !== undefined && (
|
|
<span className="my-auto flex rounded-full bg-slate-200 px-3 py-0.5 group-hover:bg-slate-300">
|
|
<Mono>{stat}</Mono>
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="my-auto text-slate-600">
|
|
{open ? (
|
|
<ChevronUpIcon className="h-5" />
|
|
) : (
|
|
<ChevronDownIcon className="h-5" />
|
|
)}
|
|
</div>
|
|
</Disclosure.Button>
|
|
<Disclosure.Panel>{children}</Disclosure.Panel>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
);
|
|
};
|