breadone/Recipie2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Beginning recipe detail view

Browse Source
This commit is contained in:
June
2025-11-17 14:40:58 +13:00
parent 38691dc357
commit 26ca0d860a
4 changed files with 85 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/components/detail/ImageCarousel.astro Normal file
View File

@@ -0,0 +1,47 @@
---
import { authPB } from "@data/pb"
const { class: className, images } = Astro.props
---
<script>
let pos = 0;
const dataElement = document.getElementById('carousel-data');
const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
const cap = links.length - 1;
const img = document.getElementById('carousel-img') as HTMLImageElement;
if (cap == 0) {
const b0 = document.getElementById('dec-button')
const b1 = document.getElementById('inc-button')
b0!.hidden = true
b1!.hidden = true
}
function inc() {
pos = pos === cap ? 0 : pos + 1;
if (img) img.src = links[pos];
}
function dec() {
pos = pos === 0 ? cap : pos - 1;
if (img) img.src = links[pos];
}
// make functions globally accessible
(window as any).inc = inc;
(window as any).dec = dec;
</script>
<div class={className}>
<!-- Hidden element to pass server data to client -->
<div class="hidden" id="carousel-data">{JSON.stringify(images)}</div>
<div class="relative flex items-center w-full h-60">
<button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button>
<img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={images[0]} />
<!-- <div class="w-70 h-60 bg-green-600" /> -->
<button id="inc-button" class="absolute right-2" onclick="inc()">&gt;</button>
</div>
</div>

1
web/src/layouts/Base.astro
View File

@@ -1,6 +1,7 @@
--- ---
import BaseHead from '@component/BaseHead' import BaseHead from '@component/BaseHead'
import Header from '@component/Header' import Header from '@component/Header'
import "../styles/global.css";
--- ---
<html lang=en> <html lang=en>

4
web/src/pages/index.astro
View File

@@ -16,7 +16,8 @@ const images = await Promise.all(
--- ---
<Base> <Base>
{ <div class="grid gap-3 grid-cols-1 py-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
{
recipes.map((r, i) => ( recipes.map((r, i) => (
<RecipeCard <RecipeCard
id={ids[i]} id={ids[i]}
@@ -27,4 +28,5 @@ const images = await Promise.all(
/> />
)) ))
} }
</div>
</Base> </Base>

34
web/src/pages/recipe/[id].astro Normal file
View File

@@ -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))
)
---
<Base>
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
<div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
<ImageCarousel class="w-full" images={images} />
<p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
<!-- Details -->
<!-- <InfoView re={re} /> -->
<p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
<!-- <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={re.expand.ingredients ?? []} /> -->
</div>
<div class="flex mt-4 md:flex-2/3 w-full flex-col">
<!-- Steps -->
<!-- <StepView class="md:ml-3" steps={re.expand.steps ?? []} /> -->
</div>
</div>
</Base>