Spaces:
Runtime error
Runtime error
File size: 1,516 Bytes
56b6519 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/24/outline';
type ListItem = {
href: string;
label: string;
};
type PrimaryDropdownProps = {
items: ListItem[];
title: string;
};
/**
* ### [WIP] No utilizar!!
*/
const PrimaryDropdown: React.FC<PrimaryDropdownProps> = ({ items, title }) => {
return (
<Menu>
<MenuButton className="w-52 inline-flex justify-between items-center gap-2 rounded-md bg-gray-800 py-1.5 px-3 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-700 data-[open]:bg-gray-700 data-[focus]:outline-1 data-[focus]:outline-white">
{title}
<ChevronDownIcon className="group pointer-events-none top-2.5 right-2.5 size-4 fill-white/60" />
</MenuButton>
<MenuItems
anchor="bottom"
className="w-52 origin-top-right rounded-xl border border-white/5 bg-stone-800 text-sm/6 text-white transition duration-100 ease-out [--anchor-gap:var(--spacing-1)] focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0"
>
{items.map(item => (
<MenuItem key={item.href}>
<a
className="group flex w-auto items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white"
href={item.href}
>
{item.label}
</a>
</MenuItem>
))}
</MenuItems>
</Menu>
);
};
export default PrimaryDropdown;
|