From 73fee23ef0b63df4fcebbf2ce5e9ec3cdacddb66 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 3 Mar 2025 20:06:54 -0600
Subject: [PATCH] Finalize initial recipe og content draft

---
 src/photo/PhotoHeader.tsx       |  1 +
 src/photo/form/index.ts         |  4 ++--
 src/recipe/RecipeOGTile.tsx     | 42 +++++++++++++++++++++++++++++++++
 src/recipe/RecipeShareModal.tsx | 23 ++++++++++++++++++
 src/recipe/index.ts             |  3 +++
 src/share/ShareModals.tsx       |  4 ++++
 6 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 src/recipe/RecipeOGTile.tsx
 create mode 100644 src/recipe/RecipeShareModal.tsx

diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx
index 36662d10..2af025b4 100644
--- a/src/photo/PhotoHeader.tsx
+++ b/src/photo/PhotoHeader.tsx
@@ -151,6 +151,7 @@ export default function PhotoHeader({
                     tag={tag}
                     camera={camera}
                     simulation={simulation}
+                    recipe={recipe}
                     focal={focal}
                     count={count}
                     dateRange={dateRange}
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index 47e94a01..fd4f3713 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -121,6 +121,8 @@ const FORM_METADATA = (
     label: 'recipe data',
     spellCheck: false,
     capitalize: false,
+    shouldHide: ({ make }) => make !== MAKE_FUJIFILM,
+    shouldNotOverwriteWithNullDataOnSync: true,
     validate: value => {
       let validationMessage = undefined;
       if (value) {
@@ -132,8 +134,6 @@ const FORM_METADATA = (
       }
       return validationMessage;
     },
-    shouldHide: ({ make }) => make !== MAKE_FUJIFILM,
-    shouldNotOverwriteWithNullDataOnSync: true,
   },
   focalLength: { label: 'focal length' },
   focalLengthIn35MmFormat: { label: 'focal length 35mm-equivalent' },
diff --git a/src/recipe/RecipeOGTile.tsx b/src/recipe/RecipeOGTile.tsx
new file mode 100644
index 00000000..97631693
--- /dev/null
+++ b/src/recipe/RecipeOGTile.tsx
@@ -0,0 +1,42 @@
+import { Photo, PhotoDateRange } from '@/photo';
+import { absolutePathForRecipeImage, pathForRecipe } from '@/app/paths';
+import OGTile from '@/components/OGTile';
+import { descriptionForRecipePhotos, titleForRecipe } from '.';
+
+export type OGLoadingState = 'unloaded' | 'loading' | 'loaded' | 'failed';
+
+export default function RecipeOGTile({
+  recipe,
+  photos,
+  loadingState: loadingStateExternal,
+  riseOnHover,
+  onLoad,
+  onFail,
+  retryTime,
+  count,
+  dateRange,
+}: {
+  recipe: string
+  photos: Photo[]
+  loadingState?: OGLoadingState
+  onLoad?: () => void
+  onFail?: () => void
+  riseOnHover?: boolean
+  retryTime?: number
+  count?: number
+  dateRange?: PhotoDateRange
+}) {
+  return (
+    <OGTile {...{
+      title: titleForRecipe(recipe, photos, count),
+      description: descriptionForRecipePhotos(photos, true, count, dateRange),
+      path: pathForRecipe(recipe),
+      pathImageAbsolute: absolutePathForRecipeImage(recipe),
+      loadingState: loadingStateExternal,
+      onLoad,
+      onFail,
+      riseOnHover,
+      retryTime,
+    }}/>
+  );
+};
diff --git a/src/recipe/RecipeShareModal.tsx b/src/recipe/RecipeShareModal.tsx
new file mode 100644
index 00000000..cb62fb82
--- /dev/null
+++ b/src/recipe/RecipeShareModal.tsx
@@ -0,0 +1,23 @@
+import { absolutePathForRecipe } from '@/app/paths';
+import { PhotoSetAttributes } from '../photo';
+import ShareModal from '@/share/ShareModal';
+import { shareTextForRecipe } from '.';
+import RecipeOGTile from './RecipeOGTile';
+
+export default function RecipeShareModal({
+  recipe,
+  photos,
+  count,
+  dateRange,
+}: {
+  recipe: string
+} & PhotoSetAttributes) {
+  return (
+    <ShareModal
+      pathShare={absolutePathForRecipe(recipe)}
+      socialText={shareTextForRecipe(recipe)}
+    >
+      <RecipeOGTile {...{ recipe, photos, count, dateRange }} />
+    </ShareModal>
+  );
+};
diff --git a/src/recipe/index.ts b/src/recipe/index.ts
index 19ce2ca4..c49257eb 100644
--- a/src/recipe/index.ts
+++ b/src/recipe/index.ts
@@ -31,6 +31,9 @@ export const titleForRecipe = (
   photoQuantityText(explicitCount ?? photos.length),
 ].join(' ');
 
+export const shareTextForRecipe = (recipe: string) =>
+  `${formatRecipe(recipe)} recipe photos`;
+
 export const descriptionForRecipePhotos = (
   photos: Photo[] = [],
   dateBased?: boolean,
diff --git a/src/share/ShareModals.tsx b/src/share/ShareModals.tsx
index 2e0ea8fe..45811390 100644
--- a/src/share/ShareModals.tsx
+++ b/src/share/ShareModals.tsx
@@ -6,6 +6,7 @@ import CameraShareModal from '@/camera/CameraShareModal';
 import FilmSimulationShareModal from '@/simulation/FilmSimulationShareModal';
 import FocalLengthShareModal from '@/focal/FocalLengthShareModal';
 import { useAppState } from '@/state/AppState';
+import RecipeShareModal from '@/recipe/RecipeShareModal';
 
 export default function ShareModals() {
   const { shareModalProps = {} } = useAppState();
@@ -18,6 +19,7 @@ export default function ShareModals() {
     tag,
     camera,
     simulation,
+    recipe,
     focal,
   } = shareModalProps;
 
@@ -33,6 +35,8 @@ export default function ShareModals() {
       return <FilmSimulationShareModal {...{simulation, ...attributes}} />;
     } else if (focal !== undefined) {
       return <FocalLengthShareModal {...{focal, ...attributes}} />;
+    } else if (recipe) {
+      return <RecipeShareModal {...{recipe, ...attributes}} />;
     }
   }
 }