feat: init

components/Button.tsx

@@ -0,0 +1,12 @@
+import { JSX } from "preact";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <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"
+    />
+  );
+}

components/IngredientsList.tsx

@@ -0,0 +1,33 @@
+import type { Ingredient, Ingredients } from "../lib/recipes.ts";
+
+type IngredientsProps = {
+  ingredients: Ingredients;
+};
+
+function formatIngredient(ingredient: Ingredient) {
+  return `${
+    ingredient.amount && ingredient.unit &&
+    ` - ${ingredient.amount} ${ingredient.unit}`
+  } ${ingredient.type}`;
+}
+
+export const IngredientsList = ({ ingredients }: IngredientsProps) => {
+  return (
+    <div>
+      {ingredients.map((item, index) => (
+        <div key={index} class="mb-4">
+          {"type" in item && formatIngredient(item)}
+          {"ingredients" in item && Array.isArray(item.ingredients) && (
+            <ul class="pl-4 list-disc">
+              {item.ingredients.map((ingredient, idx) => (
+                <li key={idx}>
+                  {formatIngredient(ingredient)}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

components/RecipeCard.tsx

@@ -0,0 +1,25 @@
+import { Document } from "../lib/documents.ts";
+import { Recipe } from "../lib/recipes.ts";
+
+export function RecipeCard({ recipe }: { recipe: Recipe }) {
+  return (
+    <a
+      href={`/recipes/${recipe.id}`}
+      style={{
+        backgroundImage: `url(${recipe?.meta?.image})`,
+        backgroundSize: "cover",
+      }}
+      class="bg-gray-900 text-white rounded-3xl shadow-md p-4 
+flex flex-col justify-between
+      lg:w-56 lg:h-56 
+      sm:w-40 sm:h-40 
+      w-32 h-32"
+    >
+      <div>
+      </div>
+      <div class="mt-2 ">
+        {recipe.name}
+      </div>
+    </a>
+  );
+}

components/RecipeHero.tsx

@@ -0,0 +1,31 @@
+import { Recipe } from "../lib/recipes.ts";
+
+export function RecipeHero({ recipe }: { recipe: Recipe }) {
+  return (
+    <div class="relative w-full h-[400px] rounded-3xl overflow-hidden bg-black">
+      <img
+        src={recipe?.meta?.image}
+        alt="Recipe Banner"
+        class="object-cover w-full h-full"
+      />
+
+      <div class="absolute top-4 left-4">
+        <a
+          class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg"
+          href="/recipes"
+        >
+          Back
+        </a>
+      </div>
+
+      <div
+        class="absolute inset-x-0 bottom-0 py-4 px-12 py-8"
+        style={{ background: "linear-gradient(0deg, #fffe, #fff0)" }}
+      >
+        <h2 class="text-4xl font-bold mt-4" style={{ color: "#1F1F1F" }}>
+          {recipe.name}
+        </h2>
+      </div>
+    </div>
+  );
+}

components/layouts/main.tsx

@@ -0,0 +1,21 @@
+import { ComponentChildren } from "preact";
+
+export type Props = {
+  children: ComponentChildren;
+  title?: string;
+  name?: string;
+  description?: string;
+};
+
+export const MainLayout = ({ children }: Props) => {
+  return (
+    <>
+      <main
+        class="max-w-2xl mx-auto lg:max-w-4xl py-5"
+        style={{ fontFamily: "Work Sans" }}
+      >
+        {children}
+      </main>
+    </>
+  );
+};