From 9ebc097a4b3de15d262a30942202f51655e88153 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 2 Nov 2023 14:18:31 -0500
Subject: [PATCH] Animate film simulations without badges

---
 src/app/(static)/film/animate/page.tsx        |  1 +
 src/components/Badge.tsx                      | 13 +++++++++--
 .../fujifilm/PhotoFujifilmSimulation.tsx      | 23 ++++++++++++-------
 3 files changed, 27 insertions(+), 10 deletions(-)

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() {
           <PhotoFujifilmSimulation
             simulation={FILM_SIMULATION_FORM_INPUT_OPTIONS[index].value}
             showIconFirst
+            badged={false}
           />
           <div className="mt-4 text-dim relative">
             <div>
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 (
-    <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}
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 = () => <>
+    <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',