diff --git a/src/components/EntityLink.tsx b/src/components/EntityLink.tsx
new file mode 100644
index 00000000..2f5839f8
--- /dev/null
+++ b/src/components/EntityLink.tsx
@@ -0,0 +1,65 @@
+import Link from 'next/link';
+import { ReactNode } from 'react';
+import Badge from './Badge';
+import { cc } from '@/utility/css';
+
+export type EntityType = 'icon-last' | 'icon-first' | 'icon-only' | 'text-only';
+
+export default function EntityLink({
+ label,
+ labelSmall,
+ href,
+ icon,
+ title,
+ type = 'icon-last',
+ badged,
+ hoverEntity,
+}: {
+ label: string
+ labelSmall?: string
+ href: string
+ icon?: ReactNode
+ title?: string
+ type?: EntityType
+ badged?: boolean
+ hoverEntity?: ReactNode
+}) {
+ const renderContent = () => <>
+
+ {labelSmall ?? label}
+
+
+ {label}
+
+ >;
+
+ return (
+
+
+ {type !== 'icon-only' && <>
+ {badged
+ ?
+ {renderContent()}
+
+ :
+ {renderContent()}
+ }
+ >}
+ {icon && type !== 'text-only' &&
+ {icon}
+ }
+
+ {hoverEntity !== undefined &&
+
+ {hoverEntity}
+ }
+
+ );
+}
diff --git a/src/simulation/PhotoFilmSimulation.tsx b/src/simulation/PhotoFilmSimulation.tsx
index 1531052f..551ed6a7 100644
--- a/src/simulation/PhotoFilmSimulation.tsx
+++ b/src/simulation/PhotoFilmSimulation.tsx
@@ -1,10 +1,8 @@
-import { cc } from '@/utility/css';
import { labelForFilmSimulation } from '@/vendors/fujifilm';
import PhotoFilmSimulationIcon from './PhotoFilmSimulationIcon';
-import Badge from '@/components/Badge';
-import Link from 'next/link';
import { pathForFilmSimulation } from '@/site/paths';
import { FilmSimulation } from '.';
+import EntityLink, { EntityType } from '@/components/EntityLink';
export default function PhotoFilmSimulation({
simulation,
@@ -13,46 +11,22 @@ export default function PhotoFilmSimulation({
countOnHover,
}: {
simulation: FilmSimulation
- type?: 'icon-last' | 'icon-first' | 'icon-only' | 'text-only'
+ type?: EntityType
badged?: boolean
countOnHover?: number
}) {
const { small, medium, large } = labelForFilmSimulation(simulation);
- const renderContent = () => <>
-
- {small}
-
-
- {medium}
-
- >;
-
return (
-
-
- {type !== 'icon-only' && <>
- {badged
- ?
- {renderContent()}
-
- : {renderContent()}}
- >}
- {type !== 'text-only' &&
-
- }
-
- {countOnHover !== undefined &&
-
- {countOnHover}
- }
-
+ }
+ title={`Film Simulation: ${large}`}
+ type={type}
+ badged={badged}
+ hoverEntity={countOnHover}
+ />
);
}