45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { pathForRecipe } from '@/app/paths';
|
|
import EntityLink, {
|
|
EntityLinkExternalProps,
|
|
} from '@/components/primitives/EntityLink';
|
|
import { formatRecipe } from '.';
|
|
import clsx from 'clsx/lite';
|
|
import { ComponentProps } from 'react';
|
|
import IconRecipe from '@/components/icons/IconRecipe';
|
|
import PhotoRecipeOverlayButton from './PhotoRecipeOverlayButton';
|
|
|
|
export default function PhotoRecipe({
|
|
ref,
|
|
recipe,
|
|
countOnHover,
|
|
toggleRecipeOverlay,
|
|
isShowingRecipeOverlay,
|
|
...props
|
|
}: {
|
|
recipe: string
|
|
countOnHover?: number
|
|
} & Partial<ComponentProps<typeof PhotoRecipeOverlayButton>>
|
|
& EntityLinkExternalProps) {
|
|
return (
|
|
<EntityLink
|
|
{...props}
|
|
ref={ref}
|
|
title="Recipe"
|
|
label={formatRecipe(recipe)}
|
|
href={pathForRecipe(recipe)}
|
|
icon={<IconRecipe
|
|
size={16}
|
|
className={clsx(
|
|
props.badged && 'translate-x-[-1px] translate-y-[0.5px]',
|
|
)}
|
|
/>}
|
|
action={toggleRecipeOverlay &&
|
|
<PhotoRecipeOverlayButton {...{
|
|
toggleRecipeOverlay,
|
|
isShowingRecipeOverlay,
|
|
}} />}
|
|
hoverEntity={countOnHover}
|
|
/>
|
|
);
|
|
}
|