Add configuration: new confg

NopAngel · Sep 28, 2024 · 1d8873f · 1d8873f
1 parent 5d189b8
commit 1d8873f
Show file tree

Hide file tree

Showing 11 changed files with 298 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,17 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="EmojiX es una librería de emojis que te permite buscar y guardar tus favoritos." />
     <title>EmojiX | Librería de Emojis.</title>
+    <meta name="author" content="NopAngel">
+    <meta property="og:title" content="EmojiX | Librería de Emojis" />
+    <meta property="og:description" content="Descubre y comparte emojis con EmojiX, tu librería de emojis favorita." />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@EmojiX" />
+    <meta name="twitter:title" content="EmojiX | Librería de Emojis" />
+    <meta name="twitter:description" content="Descubre y comparte emojis con EmojiX, tu librería de emojis favorita." />
+    <meta name="twitter:image" content="/logo.png" />
   </head>
   <body>
     <div id="app"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "vite": "^5.2.0"
   },
   "dependencies": {
+    "svelte-sonner": "^0.3.28",
     "svelte-spa-router": "^4.0.1"
   }
 }
-
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,9 +1,12 @@
 <script>
   import Router from "svelte-spa-router";
-  import Card from "./components/Cards/Card.svelte";
   import Navbar from "./components/Navbar.svelte";
   import routes from "./routes/route";
+  import { Toaster, toast } from 'svelte-sonner'
 </script>
 
-<Navbar />
-<Router {routes} />
+<main>
+  <Toaster />
+  <Navbar />
+  <Router {routes} />
+</main>
diff --git a/src/app.css b/src/app.css
@@ -1,7 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 html{
+  font-family: 'Poppins', sans-serif;
   color-scheme: dark;
 }
diff --git a/src/components/Cards/Card.svelte b/src/components/Cards/Card.svelte
@@ -1,25 +1,71 @@
 <script>
+  import { Toaster, toast } from 'svelte-sonner'
+
   export let emoji;
   export let name;
   export let id;
   export let type;
+  export let isButtonSaved;
+
+  function saveEmojiType() {
+    let savedEmojis = JSON.parse(localStorage.getItem("savedEmojis")) || [];
+    
+    const emojiData = { emoji, name, id, type };
+    
+    // Verificar si el emoji ya existe en la lista
+    const existingIndex = savedEmojis.findIndex(item => item.id === id);
+    
+    if (existingIndex !== -1) {
+      // Si existe, actualizamos la información
+      savedEmojis[existingIndex] = emojiData;
+    } else {
+      // Si no existe, lo añadimos a la lista
+      savedEmojis.push(emojiData);
+    }
+    
+    localStorage.setItem("savedEmojis", JSON.stringify(savedEmojis));
+    console.log(`Emoji guardado: ${emoji}`);
+    toast.success("Se a guardado el emoji.")
+
+  }
+
+  function removeEmojis() {
+    let savedEmojis = JSON.parse(localStorage.getItem("savedEmojis")) || [];
+    savedEmojis = savedEmojis.filter((item) => item.id !== id);
+    localStorage.setItem("savedEmojis", JSON.stringify(savedEmojis));
+    console.log(`Emoji eliminado: ${emoji}`);
+    toast.success("Se a borrado el emoji.")
+  }
 </script>
 
 <article
   id={`${id}-card`}
-  class="lg:max-w-[250px] rounded-lg hover:cursor-pointer hover:-translate-y-6 transition-transform border-[1px] border-neutral-800 flex items-center justify-center h-fit"
+  class="lg:max-w-[250px] h-[350px] rounded-lg hover:cursor-pointer border-[1px] border-neutral-800 flex items-center justify-center"
 >
   <div class="text-center">
     <div class="mt-3">
-      <h1 class="text-3xl">{emoji}</h1>
+      <h1 class="text-3xl font-semibold">{emoji}</h1>
     </div>
     <section class="p-4">
       <h1 class="text-xl p-2">{name}</h1>
       <article
         class="w-fit mx-auto pl-10 pr-10 bg-neutral-800/55 p-[3px] rounded-xl border-[1px] opacity-70 border-neutral-700/55"
       >
+
         <span>{type}</span>
+
       </article>
+      <div class="mt-4">
+        {#if isButtonSaved === true}
+          <button class="bg-neutral-800/55 p-2 rounded-xl border-[1px] border-neutral-700/55" on:click={saveEmojiType}>
+            Guardar
+          </button>
+          {:else}
+            <button class="bg-neutral-800/55 p-2 rounded-xl border-[1px] border-neutral-700/55 text-red-500" on:click={removeEmojis}>
+              Eliminar
+            </button>
+        {/if}
+      </div>
     </section>
   </div>
 </article>
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -21,6 +21,11 @@
           <a href="/#/api">API</a>
         </li>
 
+        <li class="flex items-center gap-2">
+          <Cloud />
+          <a href="/#/saves">Guardados</a>
+        </li>
+
         <li>
           <a href="https://github.com/NopAngel/emojix" target="_blank">
             <Github />

diff --git a/src/routes/route.ts b/src/routes/route.ts
@@ -1,9 +1,11 @@
 import Api from "./routeapps/api.svelte";
 import Home from "./routeapps/home.svelte";
+import Saves from "./routeapps/saves.svelte";
 
 const routes = {
     '/': Home,
     '/api': Api,
+    '/saves': Saves,
 }
 
 export default routes;
diff --git a/src/routes/routeapps/home.svelte b/src/routes/routeapps/home.svelte
@@ -14,6 +14,7 @@
         id={data.id}
         name={data.title}
         type={data.type}
+        isButtonSaved={true}
       />
     {/each}
   </section>

diff --git a/src/routes/routeapps/saves.svelte b/src/routes/routeapps/saves.svelte
@@ -0,0 +1,22 @@
+<script>
+  import Card from "../../components/Cards/Card.svelte";
+
+  let savedEmojis = JSON.parse(localStorage.getItem("savedEmojis")) || [];
+</script>
+
+<main>
+    <section
+      class="xl:w-fit mt-10 mx-auto grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6"
+    >
+      {#each savedEmojis as emojis}
+        <Card
+          emoji={emojis.emoji}
+          id={emojis.id}
+          name={emojis.name}
+          type={emojis.type}
+          isButtonSaved={false}
+        />
+      {/each}
+    </section>
+  </main>
+