Merge pull request #11 from sambecker/breadcrumb

Upgrade badges and breadcrumbs

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

@@ -22,13 +22,14 @@ export default function FilmPage() {
       contentMain={<div className={cc(
         'flex items-center justify-center min-h-[30rem]',
       )}>
-        <div className="w-[250px] scale-150">
+        <div className="w-[250px] scale-[2.5]">
           <div className="dark:text-gray-500/50 uppercase">
             Film Simulation:
           </div>
           <PhotoFujifilmSimulation
             simulation={FILM_SIMULATION_FORM_INPUT_OPTIONS[index].value}
             showIconFirst
+            badged={false}
           />
           <div className="mt-4 text-dim relative">
             <div>

src/app/layout.tsx

@@ -13,7 +13,7 @@ import '../site/globals.css';
 
 const ibmPlexMono = IBM_Plex_Mono({
   subsets: ['latin'],
-  weight: ['400', '700'],
+  weight: ['400', '500', '700'],
   variable: '--font-ibm-plex-mono',
 });
 

src/components/AdminChildPage.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { FiArrowLeft } from 'react-icons/fi';
 import SiteGrid from './SiteGrid';
 import { cc } from '@/utility/css';
+import Badge from './Badge';
 
 function AdminChildPage({
   backPath,
@@ -41,12 +42,9 @@ function AdminChildPage({
                 {breadcrumb &&
                   <>
                     <span>/</span>
-                    <span className={cc(
-                      'py-0.5 px-2 rounded-md bg-gray-100 dark:bg-gray-900',
-                      'border border-gray-200 dark:border-gray-800'
-                    )}>
+                    <Badge>
                       {breadcrumb}
-                    </span>
+                    </Badge>
                   </>}
               </div>
               {accessory &&

src/components/Badge.tsx

@@ -0,0 +1,34 @@
+import { cc } from '@/utility/css';
+
+export default function Badge({
+  children,
+  type = 'primary',
+  uppercase,
+}: {
+  children: React.ReactNode
+  type?: 'primary' | 'secondary' | 'text-only'
+  uppercase?: boolean
+}) {
+  const baseStyles = () => {
+    switch (type) {
+    case 'primary': return cc(
+      'px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-900',
+      'border border-gray-200 dark:border-gray-800'
+    );
+    case 'secondary': return cc(
+      'px-1 py-1 leading-none rounded-md',
+      'bg-gray-100 dark:bg-gray-800/75',
+      'text-medium',
+      'font-medium text-[0.7rem]',
+    );
+    }
+  };
+  return (
+    <span className={cc(
+      baseStyles(),
+      uppercase && 'uppercase tracking-wider',
+    )}>
+      {children}
+    </span>
+  );
+}

src/photo/PhotoEditPageClient.tsx

@@ -39,7 +39,9 @@ export default function PhotoEditPageClient({
         <form action={action}>
           <input name="photoUrl" value={photo.url} hidden readOnly />
           <SubmitButtonWithStatus
-            icon={<IconGrSync className="translate-y-[0.5px] mr-[4px]"/>}
+            icon={<IconGrSync
+              className="translate-y-[-1px] sm:mr-[4px]"
+            />}
           >
             EXIF
           </SubmitButtonWithStatus>

src/photo/PhotoLarge.tsx

@@ -75,21 +75,23 @@ export default function PhotoLarge({
                 <PhotoTags tags={tagsToShow} />}
             </div>
             {showCamera && photoHasCameraData(photo) &&
+            <div className="space-y-0.5">
               <PhotoCamera
                 camera={camera}
                 showIcon={false}
                 hideApple={false}
-              />}
+              />
+              {photo.filmSimulation &&
+                <div className="-translate-x-0.5"> 
+                  <PhotoFujifilmSimulation
+                    simulation={photo.filmSimulation}
+                  />
+                </div>}
+            </div>}
           </>)}
           {renderMiniGrid(<>
             {photoHasExifData(photo) &&
               <ul className="text-medium">
-                {photo.filmSimulation &&
-                  <li>
-                    <PhotoFujifilmSimulation
-                      simulation={photo.filmSimulation}
-                    />
-                  </li>}
                 <li>
                   {photo.focalLengthFormatted}
                   {photo.focalLengthIn35MmFormatFormatted &&

src/vendors/fujifilm/PhotoFujifilmSimulation.tsx

@@ -1,39 +1,39 @@
-/* eslint-disable max-len */
 import { cc } from '@/utility/css';
 import {
   FujifilmSimulation,
   getLabelForFilmSimulation,
 } from '@/vendors/fujifilm';
 import PhotoFujifilmSimulationIcon from './PhotoFujifilmSimulationIcon';
+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={cc(
-        'inline-flex items-center gap-1.5',
-        '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',
-        medium.endsWith('.') && '-mr-1',
-      )}>
-        {medium}
-      </span>
+      {badged
+        ? <Badge type="secondary" uppercase>{renderContent()}</Badge>
+        : <span className="uppercase text-medium">{renderContent()}</span>}
       <span className={cc(
         'translate-y-[-1.25px] text-extra-dim',
         showIconFirst && 'order-first',