From b17953ea8ff29066fe798794682db40174127a8d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 29 Oct 2023 20:42:17 -0500
Subject: [PATCH] Update film simulation samples

---
 src/app/(static)/film/animate/page.tsx        | 33 +++++++++++++++++++
 src/app/(static)/film/page.tsx                |  7 ++--
 .../fujifilm/PhotoFujifilmSimulation.tsx      |  9 +++--
 3 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(static)/film/animate/page.tsx

diff --git a/src/app/(static)/film/animate/page.tsx b/src/app/(static)/film/animate/page.tsx
new file mode 100644
index 00000000..4e2f1f89
--- /dev/null
+++ b/src/app/(static)/film/animate/page.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import InfoBlock from '@/components/InfoBlock';
+import { cc } from '@/utility/css';
+import { FILM_SIMULATION_FORM_INPUT_OPTIONS } from '@/vendors/fujifilm';
+import PhotoFujifilmSimulation from
+  '@/vendors/fujifilm/PhotoFujifilmSimulation';
+import { useEffect, useState } from 'react';
+
+export default function FilmPage() {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((index + 1) % FILM_SIMULATION_FORM_INPUT_OPTIONS.length);
+    }, 200);
+    return () => clearInterval(interval);
+  });
+
+  return (
+    <InfoBlock className="w-[250px] h-[125px] m-36 scale-150">
+      <div className={cc(
+        'w-[250px] h-[125px]',
+        'flex justify-start items-center pl-12',
+      )}>
+        <PhotoFujifilmSimulation
+          simulation={FILM_SIMULATION_FORM_INPUT_OPTIONS[index].value}
+          showIconFirst
+        />
+      </div>
+    </InfoBlock>
+  );
+}
diff --git a/src/app/(static)/film/page.tsx b/src/app/(static)/film/page.tsx
index c9ca28cc..31ac78de 100644
--- a/src/app/(static)/film/page.tsx
+++ b/src/app/(static)/film/page.tsx
@@ -4,10 +4,13 @@ import PhotoFujifilmSimulation from
 
 export default function FilmPage() {
   return (
-    <div className="space-y-1">
+    <div className="space-y-1 my-12">
       {FILM_SIMULATION_FORM_INPUT_OPTIONS.map(({ value }) =>
         <div key={value}>
-          <PhotoFujifilmSimulation simulation={value} />
+          <PhotoFujifilmSimulation
+            simulation={value}
+            showIconFirst
+          />
         </div>)}
     </div>
   );
diff --git a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
index 8c7c78fa..8f12a517 100644
--- a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
+++ b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
@@ -8,8 +8,10 @@ import PhotoFujifilmSimulationIcon from './PhotoFujifilmSimulationIcon';
 
 export default function PhotoFujifilmSimulation({
   simulation,
+  showIconFirst,
 }: {
-  simulation: FujifilmSimulation;
+  simulation: FujifilmSimulation
+  showIconFirst?: boolean
 }) {
   const { small, medium, large } = getLabelForFilmSimulation(simulation);
   return (
@@ -32,7 +34,10 @@ export default function PhotoFujifilmSimulation({
       )}>
         {medium}
       </span>
-      <span className="translate-y-[-1.25px] text-extra-dim">
+      <span className={cc(
+        'translate-y-[-1.25px] text-extra-dim',
+        showIconFirst && 'order-first',
+      )}>
         <PhotoFujifilmSimulationIcon simulation={simulation} />
       </span>
     </span>