From b7aca389121eb578e7aee880f97b12e59fd74070 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Thu, 19 Dec 2024 19:18:22 +0100
Subject: [PATCH] 13 sharing recipes (#49)

* fix: update description image

* feat: share using navigator api
---
 README.md                  |  2 +-
 components/recipe/view.vue | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4973173..1e9c8aa 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Chef's Meal Planner
 
-![header image](https://socialify.git.ci/rjnemo/meal_planner/image?description=1&font=Raleway&language=1&logo=https%3A%2F%2Fchefs-meal-planner.onrender.com%2Flogo192.png&owner=1&pattern=Diagonal%20Stripes&stargazers=1&theme=Dark)
+![header image](https://socialify.git.ci/rjnemo/meal_planner/image?description=1&font=Raleway&language=1&logo=https%3A%2F%2Fmood2food.netlify.app%2Flogo192.png&owner=1&pattern=Diagonal%20Stripes&stargazers=1&theme=Dark)
 
 ![license](https://img.shields.io/github/license/rjNemo/meal_planner?style=for-the-badge)
 ![release tag](https://img.shields.io/github/v/release/rjNemo/meal_planner?style=for-the-badge)
diff --git a/components/recipe/view.vue b/components/recipe/view.vue
index 56c9d4c..4630118 100644
--- a/components/recipe/view.vue
+++ b/components/recipe/view.vue
@@ -2,6 +2,25 @@
 import type { Recipe } from "~/types/recipe";
 
 defineProps<{ recipe: Recipe }>();
+
+const shareRecipe = async (recipe: Recipe) => {
+  const url =
+    useRequestURL().href.split("/").slice(0, -1).join("/") + "/" + recipe.id;
+
+  if (navigator.share) {
+    try {
+      await navigator.share({
+        title: recipe.title,
+        text: `Check out this recipe: ${recipe.title}`,
+        url,
+      });
+    } catch (error) {
+      alert("Failed to share the recipe.");
+    }
+  } else {
+    alert("Sharing not supported on this device.");
+  }
+};
 </script>
 
 <template>
@@ -29,6 +48,10 @@ defineProps<{ recipe: Recipe }>();
       <p class="prose prose-lg max-w-none w-full">
         {{ recipe.instructions }}
       </p>
+      <button class="btn btn-accent mt-4" @click="shareRecipe(recipe)">
+        <icon name="uil:share-alt" class="mr-2 w-6 h-6" />
+        Share Recipe
+      </button>
     </div>
   </div>
 </template>