OpenRewind/components/settings/MenuItem.tsx
2024-12-29 22:35:25 +08:00

28 lines
650 B
TypeScript

import { MouseEventHandler } from "react";
import { Icon } from "@iconify-icon/react";
const MenuItem = ({
icon,
text,
onClick
}: {
icon: string;
text: string;
onClick: MouseEventHandler<HTMLDivElement>;
}) => {
return (
<div
className="flex flex-col hover:bg-gray-200 dark:hover:bg-gray-700
rounded-md px-4 py-2 duration-75 gap-0.5 items-center"
onClick={onClick}
>
<div className="text-3xl flex justify-center items-center">
<Icon icon={icon} width="1em" height="1em" />
</div>
<span className="text-xs text-gray-600 dark:text-gray-200">{text}</span>
</div>
);
};
export default MenuItem;