mirror of
https://github.com/rjNemo/meal_planner
synced 2026-06-06 02:26:49 +00:00
31 lines
844 B
Vue
31 lines
844 B
Vue
<script setup lang="ts">
|
|
import type { Recipe } from "~/types/recipe";
|
|
import { useStorage } from "@vueuse/core";
|
|
const cookbook = useStorage<Recipe[]>("cookbook", [], localStorage);
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<div
|
|
v-if="cookbook.length === 0"
|
|
class="flex justify-center items-center min-h-screen"
|
|
>
|
|
<div class="alert alert-info">
|
|
<span>No recipes found in this category.</span>
|
|
</div>
|
|
</div>
|
|
<ul>
|
|
<li v-for="recipe in cookbook" :key="recipe.id">
|
|
<nuxt-link :to="`/${recipe.id}`">
|
|
<recipe-card
|
|
:title="recipe.title"
|
|
:picture-url="recipe.pictureUrl"
|
|
:video-url="recipe.videoUrl"
|
|
:category="recipe.category"
|
|
:origin="recipe.origin"
|
|
/>
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
</template>
|