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

Refactor StepView and InfoView

Browse Source
This commit is contained in:
June 2025-08-13 18:27:20 +12:00
parent 8a5fec1712
commit 3e10128a03
Signed by: breadone
GPG Key ID: FDC19FE143200483
3 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Detail/InfoView.astro Normal file
View File

@ -0,0 +1,26 @@
---
const { re } = Astro.props
function formatTime(seconds) {
if (seconds === 0) return null
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
let result = "";
if (h > 0) result += `${h}h`;
if (m > 0) result += `${m}m`;
if (result === "") result = "0m";
return result;
}
const workTime = formatTime(re.worktime)
const waitTime = formatTime(re.waittime)
---
<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
<div class="flex pt-1 items-center">
{re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
{workTime && (<p class="border-r px-2">{workTime} Work</p>)}
{waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
{re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
</div>

13
src/components/Detail/StepView.astro Normal file
View File

@ -0,0 +1,13 @@
---
const { steps } = Astro.props
---
<div class="md:ml-5 mt-2 md:mt-0">
<p class="text-[22pt] font-bold md:hidden">Steps</p>
{ steps.map(s => (
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
<p class="text-bold text-[10pt]">Step {s.index + 1}</p>
<p>{s.instruction}</p>
</div>
)) }
</div>

36
src/pages/recipe/[recipeid].astro
View File

@ -3,6 +3,8 @@ import client from "@/data/pocketbase";
import SiteLayout from "@/layouts/base";
import ImageCarousel from "@/components/Detail/ImageCarousel";
import IngredientTableView from "@/components/Detail/IngredientTableView";
import StepView from "@/components/Detail/StepView";
import InfoView from "@/components/Detail/InfoView";
const { recipeid } = Astro.params;
@ -23,20 +25,6 @@ const ingredients = await Promise.all(
await client.collection("ingredients").getOne(s)
)
)
function formatTime(seconds) {
if (seconds === 0) return null
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
let result = "";
if (h > 0) result += `${h}h`;
if (m > 0) result += `${m}m`;
if (result === "") result = "0m";
return result;
}
const workTime = formatTime(re.worktime)
const waitTime = formatTime(re.waittime)
---
<SiteLayout>
@ -46,13 +34,7 @@ const waitTime = formatTime(re.waittime)
<p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
<!-- Details -->
<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
<div class="flex pt-1 items-center">
{re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
{workTime && (<p class="border-r px-2">{workTime} Work</p>)}
{waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
{re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
</div>
<InfoView re={re} />
<p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} />
@ -62,17 +44,7 @@ const waitTime = formatTime(re.waittime)
<p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
<!-- Steps -->
<div class="md:ml-5 mt-2 md:mt-0">
<p class="text-[22pt] font-bold md:hidden">Steps</p>
{ steps.map(s => (
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
<p class="text-bold text-[10pt]">Step {s.index + 1}</p>
<p>{s.instruction}</p>
</div>
)) }
</div>
<StepView steps={steps} />
</div>
</div>