diff --git a/src/app/(static)/film/animate/page.tsx b/src/app/(static)/film/animate/page.tsx index 1c74e54d..c98d4beb 100644 --- a/src/app/(static)/film/animate/page.tsx +++ b/src/app/(static)/film/animate/page.tsx @@ -29,6 +29,7 @@ export default function FilmPage() {
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 418d40d7..482f6694 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -2,17 +2,26 @@ import { cc } from '@/utility/css'; export default function Badge({ children, + type = 'primary', uppercase, }: { children: React.ReactNode + type?: 'primary' | 'text-only' uppercase?: boolean }) { - return ( - { + switch (type) { + case 'primary': return cc( 'px-1 py-1 leading-none rounded-md', 'bg-gray-100 dark:bg-gray-800/75', 'text-gray-500 dark:text-gray-400', 'font-medium text-[0.7rem] tracking-wide', + ); + } + }; + return ( + {children} diff --git a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx index 6bf792c8..5ce917c1 100644 --- a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx +++ b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx @@ -9,24 +9,31 @@ import Badge from '@/components/Badge'; export default function PhotoFujifilmSimulation({ simulation, showIconFirst, + badged = true, }: { simulation: FujifilmSimulation showIconFirst?: boolean + badged?: boolean }) { const { small, medium, large } = getLabelForFilmSimulation(simulation); + + const renderContent = () => <> + + {small} + + + {medium} + + ; + return ( - - - {small} - - - {medium} - - + {badged + ? {renderContent()} + : {renderContent()}}