max/memorium
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: optimize navigation

Browse Source
This commit is contained in:
max_richter
2023-07-30 21:43:09 +02:00
parent 0632ae05c1
commit 28c72264c5
15 changed files with 170 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
routes/index.tsx
View File

@ -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 (
<>
<Head>
<title>app</title>
</Head>
<MainLayout>
<MainLayout url={props.url}>
<div class="flex flex-wrap justify-center items-center gap-4 px-4">
<Card
title="Recipes"

46
routes/movies/[name].tsx Normal file
View File

@ -0,0 +1,46 @@
import { Handlers, PageProps } from "$fresh/server.ts";
import { IngredientsList } from "@islands/IngredientsList.tsx";
import { RecipeHero } from "@components/RecipeHero.tsx";
import { MainLayout } from "@components/layouts/main.tsx";
import { Recipe } from "@lib/recipes.ts";
import { getRecipe } from "../api/recipes/[name].ts";
import Counter from "@islands/Counter.tsx";
import { useSignal } from "@preact/signals";
export const handler: Handlers<Recipe | null> = {
async GET(_, ctx) {
const recipe = await getRecipe(ctx.params.name);
return ctx.render(recipe);
},
};
export default function Greet(props: PageProps<Recipe>) {
const recipe = props.data;
const portion = recipe.meta?.portion;
const amount = useSignal(portion || 1);
return (
<MainLayout url={props.url}>
<RecipeHero recipe={recipe} />
<div class="px-8 text-white mt-10">
<div class="flex items-center gap-8">
<h3 class="text-3xl my-5">Ingredients</h3>
{portion && <Counter count={amount} />}
</div>
<IngredientsList
ingredients={recipe.ingredients}
amount={amount}
portion={portion}
/>
<h3 class="text-3xl my-5">Preparation</h3>
<pre
class="whitespace-break-spaces"
dangerouslySetInnerHTML={{ __html: recipe.preparation || "" }}
>
{recipe.preparation}
</pre>
</div>
</MainLayout>
);
}

35
routes/movies/index.tsx Normal file
View File

@ -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<Recipe[] | null> = {
async GET(_, ctx) {
const recipes = await getRecipes();
return ctx.render(recipes);
},
};
export default function Greet(props: PageProps<Recipe[] | null>) {
return (
<MainLayout url={props.url}>
<header class="flex gap-4 items-center mb-5 md:hidden">
<a
class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
href="/"
>
<IconArrowLeft class="w-5 h-5" />
Back
</a>
<h3 class="text-2xl text-white font-light">Recipes</h3>
</header>
<div class="flex flex-wrap items-center gap-4 px-4">
{props.data?.map((doc) => {
return <RecipeCard recipe={doc} />;
})}
</div>
</MainLayout>
);
}

2
routes/recipes/[name].tsx
View File

@ -21,7 +21,7 @@ export default function Greet(props: PageProps<Recipe>) {
const amount = useSignal(portion || 1);
return (
<MainLayout>
<MainLayout url={props.url}>
<RecipeHero recipe={recipe} />
<div class="px-8 text-white mt-10">
<div class="flex items-center gap-8">

6
routes/recipes/index.tsx
View File

@ -13,8 +13,8 @@ export const handler: Handlers<Recipe[] | null> = {
export default function Greet(props: PageProps<Recipe[] | null>) {
return (
<MainLayout>
<header class="flex gap-4 items-center mb-5">
<MainLayout url={props.url}>
<header class="flex gap-4 items-center mb-5 md:hidden">
<a
class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
href="/"
@ -25,7 +25,7 @@ export default function Greet(props: PageProps<Recipe[] | null>) {
<h3 class="text-2xl text-white font-light">Recipes</h3>
</header>
<div class="flex flex-wrap justify-center items-center gap-4 px-4">
<div class="flex flex-wrap items-center gap-4 px-4">
{props.data?.map((doc) => {
return <RecipeCard recipe={doc} />;
})}