Files
2022-10-05 20:06:04 +08:00

41 lines
914 B
TypeScript

import clsx from 'clsx';
import React from 'react';
import { Menu } from '@headlessui/react';
type Props = Readonly<{
href?: string;
isSelected?: boolean;
label: React.ReactNode;
onClick: () => void;
}>;
export default function DropdownMenuItem({
href,
isSelected = false,
label,
onClick,
}: Props) {
return (
<Menu.Item>
{({ active }) => {
const props = {
children: label,
className: clsx(
isSelected ? 'font-medium text-slate-900' : 'text-slate-500',
active && 'bg-slate-100',
'block px-4 py-2 text-sm w-full text-left',
),
onClick,
};
if (href == null) {
return <button type="button" {...props} />;
}
// TODO: Change to <Link> when there's a need for client-side navigation.
return <a href={href} {...props} />;
}}
</Menu.Item>
);
}