mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-30 05:34:33 +08:00
41 lines
914 B
TypeScript
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>
|
|
);
|
|
}
|