diff --git a/src/camera/PhotoCamera.tsx b/src/camera/PhotoCamera.tsx index aebb79e5..581a0861 100644 --- a/src/camera/PhotoCamera.tsx +++ b/src/camera/PhotoCamera.tsx @@ -1,56 +1,45 @@ import { AiFillApple } from 'react-icons/ai'; -import { cc } from '@/utility/css'; -import Link from 'next/link'; import { pathForCamera } from '@/site/paths'; import { IoMdCamera } from 'react-icons/io'; import { Camera } from '.'; +import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink'; export default function PhotoCamera({ camera, - showIcon = true, - hideApple = true, + hideAppleIcon = true, + type = 'icon-first', + badged, + dim, countOnHover, }: { camera: Camera - showIcon?: boolean - hideApple?: boolean + hideAppleIcon?: boolean countOnHover?: number -}) { +} & EntityLinkExternalProps) { + const isCameraApple = camera.make?.toLowerCase() === 'apple'; + const showAppleIcon = !hideAppleIcon && isCameraApple; + return ( - - - {showIcon && <> - -   - } - {!(hideApple && camera.make?.toLowerCase() === 'apple') && - <> - {camera.make?.toLowerCase() === 'apple' - ? - : camera.make} -   - } + + {!isCameraApple && <>{camera.make} } {camera.model} - - {countOnHover !== undefined && - - {' '} - {countOnHover} - } - + } + href={pathForCamera(camera)} + icon={showAppleIcon + ? + : } + type={type} + badged={badged} + dim={dim} + hoverEntity={countOnHover} + /> ); } diff --git a/src/components/EntityLink.tsx b/src/components/EntityLink.tsx index 2f5839f8..ad7ef893 100644 --- a/src/components/EntityLink.tsx +++ b/src/components/EntityLink.tsx @@ -3,7 +3,11 @@ 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 interface EntityLinkExternalProps { + type?: 'icon-last' | 'icon-first' | 'icon-only' | 'text-only'; + badged?: boolean + dim?: boolean +} export default function EntityLink({ label, @@ -11,18 +15,20 @@ export default function EntityLink({ href, icon, title, - type = 'icon-last', + type = 'icon-first', badged, hoverEntity, + dim, }: { - label: string - labelSmall?: string + label: ReactNode + labelSmall?: ReactNode href: string icon?: ReactNode title?: string type?: EntityType badged?: boolean hoverEntity?: ReactNode + dim?: boolean }) { const renderContent = () => <> @@ -34,27 +40,34 @@ export default function EntityLink({ ; return ( - + {type !== 'icon-only' && <> {badged - ? - {renderContent()} - - : + ? + + {renderContent()} + + + : {renderContent()} } } - {icon && type !== 'text-only' && - {icon} - } + {icon && type !== 'text-only' && + + {icon} + } {hoverEntity !== undefined && diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx index 78331e44..f3e72e19 100644 --- a/src/photo/PhotoGridSidebar.tsx +++ b/src/photo/PhotoGridSidebar.tsx @@ -36,8 +36,9 @@ export default function PhotoGridSidebar({ )} />} {cameras.length > 0 && )} />} {simulations.length > 0 && {showSimulation && photo.filmSimulation &&
diff --git a/src/photo/PhotoSetHeader.tsx b/src/photo/PhotoSetHeader.tsx index f034a867..cec0c70f 100644 --- a/src/photo/PhotoSetHeader.tsx +++ b/src/photo/PhotoSetHeader.tsx @@ -37,7 +37,7 @@ export default function PhotoSetHeader({ items={[
{entity} diff --git a/src/simulation/PhotoFilmSimulation.tsx b/src/simulation/PhotoFilmSimulation.tsx index 551ed6a7..08bb8a02 100644 --- a/src/simulation/PhotoFilmSimulation.tsx +++ b/src/simulation/PhotoFilmSimulation.tsx @@ -2,19 +2,18 @@ import { labelForFilmSimulation } from '@/vendors/fujifilm'; import PhotoFilmSimulationIcon from './PhotoFilmSimulationIcon'; import { pathForFilmSimulation } from '@/site/paths'; import { FilmSimulation } from '.'; -import EntityLink, { EntityType } from '@/components/EntityLink'; +import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink'; export default function PhotoFilmSimulation({ simulation, type = 'icon-last', badged = true, + dim, countOnHover, }: { simulation: FilmSimulation - type?: EntityType - badged?: boolean countOnHover?: number -}) { +} & EntityLinkExternalProps) { const { small, medium, large } = labelForFilmSimulation(simulation); return ( @@ -22,10 +21,14 @@ export default function PhotoFilmSimulation({ label={medium} labelSmall={small} href={pathForFilmSimulation(simulation)} - icon={} + icon={} title={`Film Simulation: ${large}`} type={type} badged={badged} + dim={dim} hoverEntity={countOnHover} /> ); diff --git a/src/tag/PhotoTag.tsx b/src/tag/PhotoTag.tsx index b86eacd6..796152ef 100644 --- a/src/tag/PhotoTag.tsx +++ b/src/tag/PhotoTag.tsx @@ -1,44 +1,34 @@ -import Link from 'next/link'; import { pathForTag } from '@/site/paths'; import { FaTag } from 'react-icons/fa'; import { cc } from '@/utility/css'; import { formatTag } from '.'; +import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink'; export default function PhotoTag({ tag, - showIcon = true, + type, + badged, + dim, countOnHover, }: { tag: string - showIcon?: boolean countOnHover?: number -}) { +} & EntityLinkExternalProps) { return ( - - - {showIcon && - } - - {formatTag(tag)} - - - {countOnHover !== undefined && - - {' '} - {countOnHover} - } - + />} + type={type} + badged={badged} + dim={dim} + hoverEntity={countOnHover} + /> ); }