diff --git a/components/RecipeCard.tsx b/components/RecipeCard.tsx index 37a60ff..3d9a837 100644 --- a/components/RecipeCard.tsx +++ b/components/RecipeCard.tsx @@ -2,7 +2,7 @@ import { Card } from "@components/Card.tsx"; import { Recipe } from "@lib/recipes.ts"; export function RecipeCard({ recipe }: { recipe: Recipe }) { - const { meta: { image = "Recipes/images/placeholder.jpg" } = {} } = recipe; + const { meta: { image = "/placeholder.svg" } = {} } = recipe; const imageUrl = image.startsWith("Recipes/images/") ? `/api/images?image=${image}&width=200&height=200` diff --git a/components/RecipeHero.tsx b/components/RecipeHero.tsx index 5c2e687..7ff53c9 100644 --- a/components/RecipeHero.tsx +++ b/components/RecipeHero.tsx @@ -3,19 +3,26 @@ import { Recipe } from "@lib/recipes.ts"; import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx"; import { Star } from "@components/Stars.tsx"; export function RecipeHero({ recipe }: { recipe: Recipe }) { - const { meta: { image = "Recipes/images/placeholder.jpg" } = {} } = recipe; + const { meta: { image } = {} } = recipe; - const imageUrl = image.startsWith("Recipes/images/") + const imageUrl = image?.startsWith("Recipes/images/") ? `/api/images?image=${image}&width=800` : image; return ( -
- Recipe Banner +
+ {imageUrl && + ( + Recipe Banner + )}
)} -
+

{recipe.name}

diff --git a/components/Stars.tsx b/components/Stars.tsx index 1d879da..3f4949b 100644 --- a/components/Stars.tsx +++ b/components/Stars.tsx @@ -4,13 +4,14 @@ import IconStarFilled from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star- export const Star = ( { max = 5, rating = 3 }: { max?: number; rating: number }, ) => { + console.log({ max, rating }); return (
{Array.from({ length: max }).map((_, i) => { - if (rating >= i) { + if ((i + 1) <= rating) { return ; } return ; diff --git a/components/layouts/main.tsx b/components/layouts/main.tsx index 172966b..cf8b3a4 100644 --- a/components/layouts/main.tsx +++ b/components/layouts/main.tsx @@ -4,18 +4,50 @@ export type Props = { children: ComponentChildren; title?: string; name?: string; + url: URL; description?: string; }; -export const MainLayout = ({ children }: Props) => { +export const MainLayout = ({ children, url }: Props) => { + const menu = [ + { + name: "🏡 Home", + link: "/", + }, + { + name: "🍽️ Recipes", + link: "/recipes", + }, + { + name: "🍿 Movies", + link: "/movies", + }, + ]; + return ( - <> +
+
{children}
- +
); }; diff --git a/fresh.gen.ts b/fresh.gen.ts index c94b676..18a0472 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -9,8 +9,10 @@ import * as $3 from "./routes/api/index.ts"; import * as $4 from "./routes/api/recipes/[name].ts"; import * as $5 from "./routes/api/recipes/index.ts"; import * as $6 from "./routes/index.tsx"; -import * as $7 from "./routes/recipes/[name].tsx"; -import * as $8 from "./routes/recipes/index.tsx"; +import * as $7 from "./routes/movies/[name].tsx"; +import * as $8 from "./routes/movies/index.tsx"; +import * as $9 from "./routes/recipes/[name].tsx"; +import * as $10 from "./routes/recipes/index.tsx"; import * as $$0 from "./islands/Counter.tsx"; import * as $$1 from "./islands/IngredientsList.tsx"; @@ -23,8 +25,10 @@ const manifest = { "./routes/api/recipes/[name].ts": $4, "./routes/api/recipes/index.ts": $5, "./routes/index.tsx": $6, - "./routes/recipes/[name].tsx": $7, - "./routes/recipes/index.tsx": $8, + "./routes/movies/[name].tsx": $7, + "./routes/movies/index.tsx": $8, + "./routes/recipes/[name].tsx": $9, + "./routes/recipes/index.tsx": $10, }, islands: { "./islands/Counter.tsx": $$0, diff --git a/routes/index.tsx b/routes/index.tsx index a8b7075..80640bf 100644 --- a/routes/index.tsx +++ b/routes/index.tsx @@ -3,15 +3,15 @@ import { useSignal } from "@preact/signals"; import Counter from "@islands/Counter.tsx"; import { MainLayout } from "@components/layouts/main.tsx"; import { Card } from "@components/Card.tsx"; +import { PageProps } from "$fresh/server.ts"; -export default function Home() { - const count = useSignal(3); +export default function Home(props: PageProps) { return ( <> app - +
= { + async GET(_, ctx) { + const recipe = await getRecipe(ctx.params.name); + return ctx.render(recipe); + }, +}; + +export default function Greet(props: PageProps) { + const recipe = props.data; + + const portion = recipe.meta?.portion; + const amount = useSignal(portion || 1); + + return ( + + +
+
+

Ingredients

+ {portion && } +
+ +

Preparation

+ 
+          {recipe.preparation}
+
+
+ + ); +} diff --git a/routes/movies/index.tsx b/routes/movies/index.tsx new file mode 100644 index 0000000..2cef35b --- /dev/null +++ b/routes/movies/index.tsx @@ -0,0 +1,35 @@ +import { Handlers, PageProps } from "$fresh/server.ts"; +import { RecipeCard } from "@components/RecipeCard.tsx"; +import { MainLayout } from "@components/layouts/main.tsx"; +import { Recipe } from "@lib/recipes.ts"; +import { getRecipes } from "../api/recipes/index.ts"; +import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx"; +export const handler: Handlers = { + async GET(_, ctx) { + const recipes = await getRecipes(); + return ctx.render(recipes); + }, +}; + +export default function Greet(props: PageProps) { + return ( + +
+ + + Back + + +

Recipes

+
+
+ {props.data?.map((doc) => { + return ; + })} +
+ + ); +} diff --git a/routes/recipes/[name].tsx b/routes/recipes/[name].tsx index 70e2bee..43c8920 100644 --- a/routes/recipes/[name].tsx +++ b/routes/recipes/[name].tsx @@ -21,7 +21,7 @@ export default function Greet(props: PageProps) { const amount = useSignal(portion || 1); return ( - +
diff --git a/routes/recipes/index.tsx b/routes/recipes/index.tsx index 88730bd..2cef35b 100644 --- a/routes/recipes/index.tsx +++ b/routes/recipes/index.tsx @@ -13,8 +13,8 @@ export const handler: Handlers = { export default function Greet(props: PageProps) { return ( - -
+ +
) {

Recipes

-
+
{props.data?.map((doc) => { return ; })} diff --git a/static/g10.svg:Zone.Identifier b/static/g10.svg:Zone.Identifier new file mode 100644 index 0000000..053d112 --- /dev/null +++ b/static/g10.svg:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=about:internet diff --git a/static/g8.svg:Zone.Identifier b/static/g8.svg:Zone.Identifier new file mode 100644 index 0000000..053d112 --- /dev/null +++ b/static/g8.svg:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=about:internet diff --git a/static/grainy-gradient.png b/static/grainy-gradient.png index b072539..71af862 100644 Binary files a/static/grainy-gradient.png and b/static/grainy-gradient.png differ diff --git a/static/placeholder.svg b/static/placeholder.svg new file mode 100644 index 0000000..9157265 --- /dev/null +++ b/static/placeholder.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/vecteezy_picture-gallery-image-line-icon-vector-illustration_.svg:Zone.Identifier b/static/vecteezy_picture-gallery-image-line-icon-vector-illustration_.svg:Zone.Identifier new file mode 100644 index 0000000..6e88659 --- /dev/null +++ b/static/vecteezy_picture-gallery-image-line-icon-vector-illustration_.svg:Zone.Identifier @@ -0,0 +1,4 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=https://cloudconvert.com/ +HostUrl=https://storage.cloudconvert.com/tasks/748af8fd-a74c-4374-b73b-fa782814df9d/vecteezy_picture-gallery-image-line-icon-vector-illustration_.svg?AWSAccessKeyId=cloudconvert-production&Expires=1690830191&Signature=fBYB2Q0uKneAnH7%2BrXXzsWOKUXw%3D&response-content-disposition=attachment%3B%20filename%3D%22vecteezy_picture-gallery-image-line-icon-vector-illustration_.svg%22&response-content-type=image%2Fsvg%2Bxml