From 2bf96af87e54ff069a45df357d3cd132aeeb457d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 2 Nov 2023 09:13:10 -0500
Subject: [PATCH] Create <Badge /> component

---
 src/components/Badge.tsx                      | 21 +++++++++++++++
 .../fujifilm/PhotoFujifilmSimulation.tsx      | 27 +++++++------------
 2 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Badge.tsx

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 00000000..418d40d7
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,21 @@
+import { cc } from '@/utility/css';
+
+export default function Badge({
+  children,
+  uppercase,
+}: {
+  children: React.ReactNode
+  uppercase?: boolean
+}) {
+  return (
+    <span className={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',
+      uppercase && 'uppercase',
+    )}>
+      {children}
+    </span>
+  );
+}
diff --git a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
index 10459e75..6bf792c8 100644
--- a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
+++ b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
@@ -4,6 +4,7 @@ import {
   getLabelForFilmSimulation,
 } from '@/vendors/fujifilm';
 import PhotoFujifilmSimulationIcon from './PhotoFujifilmSimulationIcon';
+import Badge from '@/components/Badge';
 
 export default function PhotoFujifilmSimulation({
   simulation,
@@ -16,24 +17,16 @@ export default function PhotoFujifilmSimulation({
   return (
     <span
       title={`Film Simulation: ${large}`}
-      className={cc(
-        'inline-flex items-center gap-1',
-        'text-medium uppercase',
-      )}
+      className="inline-flex items-center gap-1"
     >
-      <span className={cc(
-        'xs:hidden',
-        small.endsWith('.') && '-mr-1',
-      )}>
-        {small}
-      </span>
-      <span className={cc(
-        'hidden xs:inline-block',
-        'bg-gray-100 px-1 py-1 leading-none rounded-md',
-        'text-gray-500 font-medium text-[0.7rem] tracking-wide',
-      )}>
-        {medium}
-      </span>
+      <Badge uppercase>
+        <span className="xs:hidden">
+          {small}
+        </span>
+        <span className="hidden xs:inline-block">
+          {medium}
+        </span>
+      </Badge>
       <span className={cc(
         'translate-y-[-1.25px] text-extra-dim',
         showIconFirst && 'order-first',