Animate film simulations without badges

src/app/(static)/film/animate/page.tsx

@@ -29,6 +29,7 @@ export default function FilmPage() {
           <PhotoFujifilmSimulation
             simulation={FILM_SIMULATION_FORM_INPUT_OPTIONS[index].value}
             showIconFirst
+            badged={false}
           />
           <div className="mt-4 text-dim relative">
             <div>

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 (
-    <span className={cc(
+  const coreStyles = () => {
+    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 (
+    <span className={cc(
+      coreStyles(),
       uppercase && 'uppercase',
     )}>
       {children}

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 = () => <>
+    <span className="xs:hidden">
+      {small}
+    </span>
+    <span className="hidden xs:inline-block">
+      {medium}
+    </span>
+  </>;
+
   return (
     <span
       title={`Film Simulation: ${large}`}
       className="inline-flex items-center gap-1"
     >
-      <Badge uppercase>
-        <span className="xs:hidden">
-          {small}
-        </span>
-        <span className="hidden xs:inline-block">
-          {medium}
-        </span>
-      </Badge>
+      {badged
+        ? <Badge uppercase>{renderContent()}</Badge>
+        : <span className="uppercase text-medium">{renderContent()}</span>}
       <span className={cc(
         'translate-y-[-1.25px] text-extra-dim',
         showIconFirst && 'order-first',