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

[PIE-6] Add first (non-final) (temporary-ish) stylings (#5)

Browse Source 
this was a doozy.
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>
This commit was merged in pull request #5.
This commit is contained in:
June
2025-08-12 23:39:33 +12:00
committed by June
parent 5c099f5b49
commit c1910a71c6
21 changed files with 507 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Card/OverviewCard.astro Normal file
View File

@@ -0,0 +1,27 @@
---
import client from "@/data/pocketbase"
const { recipe } = Astro.props;
const headerImage = await client.collection("images").getOne(recipe.images[0])
const image = await client.files.getURL(headerImage, headerImage.image)
---
<div class="relative z-0 flex h-60">
<img
class="w-full h-full object-cover rounded-xl"
src={ image }
/>
<div class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
<p class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
<p class="text-white text-[10pt]"> {recipe.description} </p>
<div class="flex flex-row">
{recipe.tags.map(async tag => (
<p class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md">{
(await client.collection("tags").getOne(tag)).name
}</p>
))}
</div>
</div>
</div>

13
src/components/Header.astro Normal file
View File

@@ -0,0 +1,13 @@
<div class="flex w-full items-center bg-yellow-100 p-5">
<a class="flex" href="/">
<p class=" text-3xl">Reci</p>
<p class=" text-3xl text-amber-500">pie</p>
🥧
</a>
<div class="flex ml-10 space-x-5">
<!-- <span>new</span>
<span>sf</span> -->
</div>
</div>

5
src/data/pocketbase.ts
View File

@@ -1,4 +1,5 @@
import Pocketbase from "pocketbase"
export const client = new Pocketbase(import.meta.env.PUBLIC_PB_URL)
// export const client = new Pocketbase("http://localhost:8080")
const client = new Pocketbase(import.meta.env.PUBLIC_URL)
client.autoCancellation(false)
export default client;

2
src/layouts/base.astro
View File

@@ -1,5 +1,6 @@
---
import BaseHead from "../components/BaseHead.astro";
import Header from "@/components/Header";
---
<html lang=en>
@@ -8,6 +9,7 @@ import BaseHead from "../components/BaseHead.astro";
</head>
<body>
<main id="main" class="flex-1">
<Header/>
<slot />
</main>
</body>

26
src/pages/index.astro
View File

@@ -1,16 +1,22 @@
---
import PageLayout from "@/layouts/base"
import { client } from "@/data/pocketbase"
import client from "@/data/pocketbase"
import OverviewCard from "@/components/Card/OverviewCard"
const reccies = await client.collection("recipes").getFullList()
const recipies = await client.collection("recipes").getFullList()
---
<PageLayout>
<p class="text-3xl font-medium">Recipie</p>
{
reccies.map(rec => (
<p>{rec.name}</p>
))
}
<PageLayout>
<div id="content" class="p-5 pt-2">
<!-- <p class="pb-2">What would you like today?</p> -->
<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{
recipies.map(r => (
<OverviewCard recipe={r} />
))
}
</div>
</div>
</PageLayout>

5
src/styles/global.css
View File

@@ -1,6 +1,7 @@
@import "tailwindcss";
html {
@apply bg-[#fefefe];
@apply p-5;
/* @apply bg-[#1d1f21]; */
@apply bg-[#fafafa];
@apply font-stretch-condensed;
}