From 26ca0d860a1007a812340fbc7ddacdb1befddca6 Mon Sep 17 00:00:00 2001 From: June Date: Mon, 17 Nov 2025 14:40:58 +1300 Subject: [PATCH] Beginning recipe detail view --- web/src/components/detail/ImageCarousel.astro | 47 +++++++++++++++++++ web/src/layouts/Base.astro | 1 + web/src/pages/index.astro | 4 +- web/src/pages/recipe/[id].astro | 34 ++++++++++++++ 4 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 web/src/components/detail/ImageCarousel.astro create mode 100644 web/src/pages/recipe/[id].astro diff --git a/web/src/components/detail/ImageCarousel.astro b/web/src/components/detail/ImageCarousel.astro new file mode 100644 index 0000000..784bf16 --- /dev/null +++ b/web/src/components/detail/ImageCarousel.astro @@ -0,0 +1,47 @@ +--- +import { authPB } from "@data/pb" +const { class: className, images } = Astro.props + +--- + + + +
+ + + +
+ + + + +
+
\ No newline at end of file diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro index 5686540..4fe5f1c 100644 --- a/web/src/layouts/Base.astro +++ b/web/src/layouts/Base.astro @@ -1,6 +1,7 @@ --- import BaseHead from '@component/BaseHead' import Header from '@component/Header' +import "../styles/global.css"; --- diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro index c7c551f..4dcad1f 100644 --- a/web/src/pages/index.astro +++ b/web/src/pages/index.astro @@ -16,7 +16,8 @@ const images = await Promise.all( --- - { +
+ { recipes.map((r, i) => ( )) } +
\ No newline at end of file diff --git a/web/src/pages/recipe/[id].astro b/web/src/pages/recipe/[id].astro new file mode 100644 index 0000000..739a04b --- /dev/null +++ b/web/src/pages/recipe/[id].astro @@ -0,0 +1,34 @@ +--- +import Base from "@layout/Base"; +import ImageCarousel from "@component/detail/ImageCarousel"; +import { authPB } from "@data/pb"; + +const { id } = Astro.params + +const pb = await authPB() +const re = await pb.collection('recipes').getOne(id as string) +const images = await Promise.all( + re.images.map(r => pb.files.getURL(re, r)) +) +--- + + +
+
+ +

{re.name}

+ + + + +

Ingredients

+ +
+ +
+ + +
+ +
+ \ No newline at end of file