52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import clsx from 'clsx/lite';
|
|
import { FaPlus } from 'react-icons/fa6';
|
|
import Tooltip from '@/components/Tooltip';
|
|
import { useRef } from 'react';
|
|
import { useAppText } from '@/i18n/state/client';
|
|
|
|
export default function PhotoRecipeOverlayButton({
|
|
className,
|
|
toggleRecipeOverlay,
|
|
isShowingRecipeOverlay,
|
|
}: {
|
|
className?: string
|
|
toggleRecipeOverlay: () => void
|
|
isShowingRecipeOverlay?: boolean
|
|
}) {
|
|
const ref = useRef<HTMLButtonElement>(null);
|
|
|
|
const appText = useAppText();
|
|
|
|
return (
|
|
<Tooltip content={appText.tooltip.recipeInfo}>
|
|
<button
|
|
ref={ref}
|
|
type="button"
|
|
onClick={() => {
|
|
toggleRecipeOverlay?.();
|
|
// Avoid unexpected tooltip trigger
|
|
ref.current?.blur();
|
|
}}
|
|
className={clsx(
|
|
'text-medium hover:text-main',
|
|
'bg-dim hover:bg-medium active:bg-dim',
|
|
'rounded-md border-transparent shadow-none',
|
|
'p-0 inline-flex items-center justify-center',
|
|
'size-[17px] sm:size-5',
|
|
'hover:bg-extra-dim active:bg-dim',
|
|
className,
|
|
)}>
|
|
<FaPlus
|
|
className={clsx(
|
|
'transition-transform',
|
|
isShowingRecipeOverlay && 'rotate-45',
|
|
)}
|
|
size={10}
|
|
/>
|
|
</button>
|
|
</Tooltip>
|
|
);
|
|
}
|