30 lines
990 B
TypeScript
30 lines
990 B
TypeScript
import { MouseEventHandler } from "react";
|
|
import SvgIcon, { IconType } from "./SvgIcon";
|
|
import classNames from "classnames";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
export default function ShortcutPrompt (data: {
|
|
id: string;
|
|
icon?: IconType;
|
|
label?: string;
|
|
className?: string;
|
|
onClick?: MouseEventHandler;
|
|
})
|
|
{
|
|
return (
|
|
<div
|
|
onClick={data.onClick}
|
|
style={{ viewTransitionName: data.id }}
|
|
className={twMerge("xs:text-xs sm:p-1 sm:text-sm",
|
|
"flex md:gap-2 bg-base-100 text-base-content neutral-content md:pl-2 md:pr-3 md:py-1.5 rounded-full items-center md:text-lg drop-shadow-sm ring-[1px] ring-base-content/10 drop-shadow-black/30 active:text-base-300 active:bg-base-content",
|
|
data.className,
|
|
classNames({
|
|
"hover:bg-base-300 cursor-pointer": !!data.onClick,
|
|
})
|
|
)}
|
|
>
|
|
{data.icon && <SvgIcon className="size-6 portrait:size-6 md:size-8" icon={data.icon} />}
|
|
{data.label}
|
|
</div>
|
|
);
|
|
}
|