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

feat: show rating

Browse Source
This commit is contained in:
max_richter
2023-07-30 19:40:39 +02:00
parent c7279105ca
commit 0632ae05c1
12 changed files with 172 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Button.tsx
View File

@ -6,7 +6,7 @@ export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
<button
{...props}
disabled={!IS_BROWSER || props.disabled}
class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
class="px-2 py-1 border-gray-500 border-2 "
/>
);
}

71
components/IngredientsList.tsx
View File

@ -1,71 +0,0 @@
import type {
Ingredient,
IngredientGroup,
Ingredients,
} from "../lib/recipes.ts";
import { FunctionalComponent } from "preact";
type IngredientsProps = {
ingredients: Ingredients;
};
const IngredientList = ({ ingredients }: { ingredients: Ingredient[] }) => {
return (
<>
{ingredients.map((item, index) => {
// Render Ingredient
const { type, amount, unit } = item as Ingredient;
return (
<tr key={index}>
<td class="pr-4 py-2">
{amount + (typeof unit !== "undefined" ? unit : "")}
</td>
<td class="px-4 py-2">{type}</td>
</tr>
);
})}
</>
);
};
const IngredientTable: FunctionalComponent<{ ingredients: Ingredients }> = (
{ ingredients },
) => {
return (
<table class="w-full border-collapse table-auto">
<tbody>
{ingredients.map((item, index) => {
if ("name" in item) {
// Render IngredientGroup
const { name, ingredients: groupIngredients } =
item as IngredientGroup;
return (
<>
<tr key={index}>
<td colSpan={3} class="pr-4 py-2 font-italic">{name}</td>
</tr>
<IngredientList ingredients={groupIngredients} />
</>
);
} else {
// Render Ingredient
const { type, amount, unit } = item as Ingredient;
return (
<tr key={index}>
<td class="pr-4 py-2">
{(amount ? amount : "") +
(unit ? (" " + unit) : "")}
</td>
<td class="px-4 py-2">{type}</td>
</tr>
);
}
})}
</tbody>
</table>
);
};
export const IngredientsList = ({ ingredients }: IngredientsProps) => {
return <IngredientTable ingredients={ingredients} />;
};

26
components/RecipeHero.tsx
View File

@ -1,5 +1,7 @@
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;
@ -15,22 +17,38 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
class="object-cover w-full h-full"
/>
<div class="absolute top-4 left-4 pt-4">
<div class="absolute top-8 left-8 ">
<a
class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg"
class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg block"
href="/recipes"
>
Back
</a>
</div>
<div class="absolute inset-x-0 bottom-0 py-4 px-8 py-8 noisy-gradient">
{recipe.meta?.link &&
(
<div class="absolute top-8 right-8 ">
<a
href={recipe.meta.link}
target="__blank"
class="p-2 ml-4 bg-gray-300 text-gray-800 rounded-lg flex"
name="Link to Original recipe"
>
<IconExternalLink />
</a>
</div>
)}
<div class="absolute inset-x-0 bottom-0 py-4 px-8 py-8 noisy-gradient flex gap-4 items-center pt-12">
<h2
class="relative text-4xl font-bold mt-4 z-10"
class="relative text-4xl font-bold z-10"
style={{ color: "#1F1F1F" }}
>
{recipe.name}
</h2>
{recipe.meta?.rating && <Star rating={recipe.meta.rating} />}
</div>
</div>
);

20
components/Stars.tsx Normal file
View File

@ -0,0 +1,20 @@
import IconStar from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star.tsx";
import IconStarFilled from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star-filled.tsx";
export const Star = (
{ max = 5, rating = 3 }: { max?: number; rating: number },
) => {
return (
<div
class="flex gap-2 px-4 py-2 rounded-2xl bg-gray-200 z-10"
style={{ color: "#1F1F1F" }}
>
{Array.from({ length: max }).map((_, i) => {
if (rating >= i) {
return <IconStarFilled class="w-4 h-4" />;
}
return <IconStar class="w-4 h-4" />;
})}
</div>
);
};