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

Compare commits

base: breadone:main
Branches Tags
breadone:main
..
compare: breadone:75b7f03f1247f5cf8b02b2da8561e236b68d7fcb
Branches Tags
breadone:main

2 Commits
main ... 75b7f03f12

Author SHA1 Message Date
June
75b7f03f12 smal 2025-11-19 21:43:01 +13:00
June
020bbeb078 added a decent enough search bar will refactor 2025-11-19 21:40:34 +13:00
6 changed files with 26 additions and 14 deletions
Expand all files Collapse all files

9
web/src/components/BaseHead.astro Normal file
View File

@@ -0,0 +1,9 @@
---
import "../styles/global.css"
---
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>

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

@@ -1,19 +1,12 @@
--- ---
import BaseHead from '@component/BaseHead'
import Header from '@component/Header' import Header from '@component/Header'
import "../styles/global.css"; import "../styles/global.css";
const {
title
} = Astro.props
--- ---
<html lang=en> <html lang=en>
<head> <head>
<meta charset="utf-8" /> <BaseHead title="Recipie" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title ? title : "Recipie"}</title>
</head> </head>
<body> <body>
<main id="main" class="flex-1"> <main id="main" class="flex-1">

2
web/src/pages/recipe/[id]/edit.astro
View File

@@ -53,7 +53,7 @@ const recipeId = id as string
}); });
</script> </script>
<Base title="Edit Recipe"> <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 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 sticky"> <div class="flex md:flex-1/3 flex-col sticky">

2
web/src/pages/recipe/[id]/index.astro
View File

@@ -20,7 +20,7 @@ const images = await Promise.all(
) )
--- ---
<Base title=`${recipeData.metadata.title}: Recipie` > <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 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"> <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
<ImageCarousel class="w-full" images={images} /> <ImageCarousel class="w-full" images={images} />

2
web/src/pages/recipe/new.astro
View File

@@ -57,7 +57,7 @@ tags:
}); });
</script> </script>
<Base title="New Recipe"> <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 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 sticky"> <div class="flex md:flex-1/3 flex-col sticky">

14
web/src/pages/search.astro
View File

@@ -30,7 +30,7 @@ if (query) {
} }
--- ---
<Base title=`Search${ query != "" ? ": " + query : "" }`> <Base>
<div class="mb-6"> <div class="mb-6">
<!-- <h1 class="text-3xl font-bold mb-4">Search Recipes</h1> --> <!-- <h1 class="text-3xl font-bold mb-4">Search Recipes</h1> -->
@@ -60,7 +60,7 @@ if (query) {
)} )}
</div> </div>
{query && recipes.length > 0 && ( {query && recipes.length > 0 ? (
<div class="grid gap-3 grid-cols-1 py-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6"> <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) => (
@@ -74,5 +74,15 @@ if (query) {
)) ))
} }
</div> </div>
) : query ? (
<div class="text-center py-12 text-gray-400">
<p class="text-xl">No recipes found</p>
<p class="mt-2">Try a different search term</p>
</div>
) : (
<div class="text-center py-12 text-gray-400">
<p class="text-xl">Start searching for recipes</p>
<p class="mt-2">Enter a search term above to find your favorite recipes</p>
</div>
)} )}
</Base> </Base>