Agregando Componente Link

web/.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

web/src/components/Hero.astro

@@ -1,3 +1,8 @@
+---
+import { TypeLink } from "./common/Constantes";
+import Link from "./common/Link.astro";
+---
+
 <section class="flex flex-col max-w-3xl mx-auto mb-12 gap-12">
   <article class="flex flex-col items-center justify-center gap-10 md:flex-row">
     <div
@@ -9,50 +14,16 @@
         el acceso a contenido de calidad sobre <strong>Desarrollo Web</strong>.
       </p>
       <footer class="flex gap-4 items-center">
-        <a
-          target="_blank"
-          rel="noopener"
-          href="https://youtube.com/midulive?sub_confirmation=1"
-          class="inline-flex items-center justify-center px-2 py-1 text-xs font-semibold text-center text-black bg-white transition border border-[#c4302b] rounded-lg md:px-4 md:py-2 hover:bg-[#ffc8c6] md:text-sm"
-          ><svg
-            class="w-6 h-6 mr-2"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 28.57 20"
-            ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.57 20"
-              ><path
-                fill="red"
-                d="M27.9727 3.12324C27.6435 1.89323 26.6768.926623 25.4468.597366 23.2197 2.2e-7 14.285 0 14.285 0S5.35042 2.2e-7 3.12323.597366C1.89323.926623.926623 1.89323.597366 3.12324 2.2e-7 5.35042 0 10 0 10s2.2e-7 4.6496.597366 6.8768c.329257 1.23 1.295864 2.1966 2.525864 2.5258C5.35042 20 14.285 20 14.285 20s8.9347 0 11.1618-.5974c1.23-.3292 2.1967-1.2958 2.5259-2.5258.5974-2.2272.5974-6.8768.5974-6.8768s-.0024-4.64958-.5974-6.87676Z"
-              ></path><path
-                fill="#fff"
-                d="m11.4253 14.2854 7.4224-4.285-7.4224-4.28507v8.57007Z"
-              ></path></svg
-            ></svg
-          >Sígueme en YouTube</a
-        >
-
-        <a
-          href="https://twitch.tv/midudev"
-          target="_blank"
-          rel="noopener"
-          class="inline-flex items-center justify-center px-2 py-1 text-xs font-semibold text-center text-black transition bg-white rounded-lg md:px-4 md:py-2 hover:bg-[#d1b9ff] md:text-sm border border-[#874af6]"
-        >
-          <svg
-            class="w-6 h-6 mr-1"
-            xmlns="http://www.w3.org/2000/svg"
-            width="118"
-            height="138"
-            viewBox="0 0 118 138"
-            ><g fill="none" fill-rule="evenodd"
-              ><path
-                fill="#FFF"
-                d="m107.8058 63.7036-19.602 19.601h-19.6l-17.152 17.151v-17.151h-22.05V9.8006h78.404z"
-              ></path><path
-                fill="#9146FF"
-                d="M117.605 0v68.605l-44.102 44.099H53.904l-24.503 24.503v-24.503H0V24.502L24.5 0h93.105Zm-9.8 9.801H29.401v73.503h22.051v17.15l17.153-17.15h19.601l19.599-19.601V9.801ZM93.1042 26.9518v29.4h-9.8v-29.4h9.8Zm-26.951 0v29.4h-9.8v-29.4h9.8Z"
-              ></path></g
-            ></svg
-          >Sígueme en Twitch</a
-        >
+        <Link
+          title="Sígueme en YouTube"
+          typeLink={TypeLink.Youtube}
+          url="https://youtube.com/midulive?sub_confirmation=1"
+        />
+        <Link
+          title="Sígueme en Twitch"
+          typeLink={TypeLink.Twitch}
+          url="https://twitch.tv/midudev"
+        />
       </footer>
     </div>
     <img

web/src/components/Projects.astro

@@ -1,9 +1,11 @@
 ---
-import { PROJECTS } from "../consts"
+import { PROJECTS } from "../consts";
+import { TypeLink } from "./common/Constantes";
+import Link from "./common/Link.astro";
 
 const finalProjects = PROJECTS.filter((project) => !project.hidden)
   .slice()
-  .reverse()
+  .reverse();
 ---
 
 <div
@@ -40,8 +42,8 @@ const finalProjects = PROJECTS.filter((project) => !project.hidden)
   </article>
   {
     finalProjects.map((project, reversedIndex) => {
-      const index = finalProjects.length - reversedIndex - 1
-      const num = `${index + 1}`.padStart(2, "0")
+      const index = finalProjects.length - reversedIndex - 1;
+      const num = `${index + 1}`.padStart(2, "0");
 
       return (
         <article class="relative items-center text-black rounded-lg">
@@ -79,84 +81,32 @@ const finalProjects = PROJECTS.filter((project) => !project.hidden)
             </ul>
             <ul class="flex flex-wrap gap-2 mt-4">
               <li>
-                <a
-                  href={`https://github.com/midudev/javascript-100-proyectos/tree/main/${project.slug}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-black bg-white transition border border-black/60 rounded-lg hover:bg-black/10 md:text-sm"
-                >
-                  <svg
-                    class="w-5 h-5 mr-1"
-                    fill="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                  Código
-                </a>
+                <Link
+                  title="Código"
+                  typeLink={TypeLink.Github}
+                  url={`https://github.com/midudev/javascript-100-proyectos/tree/main/${project.slug}`}
+                />
               </li>
               <li>
-                <a
-                  href={`/${project.slug}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-sky-700 bg-white transition border border-sky-700/60 rounded-lg hover:bg-sky-600/20 md:text-sm"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="1.5"
-                    stroke="currentColor"
-                    class="w-5 h-5 mr-1"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
-                    />
-                  </svg>
-                  Demo
-                </a>
+                <Link
+                  title="Demo"
+                  typeLink={TypeLink.Web}
+                  url={`/${project.slug}`}
+                />
               </li>
               {project.youtube != null && (
                 <li>
-                  <a
-                    href={project.youtube}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-red-700 bg-white transition border border-red-700/60 rounded-lg hover:bg-red-600/20 md:text-sm"
-                  >
-                    <svg
-                      class="w-5 h-5 mr-1"
-                      viewBox="0 0 256 180"
-                      width="256"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      preserveAspectRatio="xMidYMid"
-                    >
-                      <path
-                        d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"
-                        fill="red"
-                      />
-                      <path
-                        fill="#FFF"
-                        d="m102.421 128.06 66.328-38.418-66.328-38.418z"
-                      />
-                    </svg>
-                    Vídeo
-                  </a>
+                  <Link
+                    title="Vídeo"
+                    typeLink={TypeLink.Youtube}
+                    url={project.youtube}
+                  />
                 </li>
               )}
             </ul>
           </div>
         </article>
-      )
+      );
     })
   }
 </div>

web/src/components/common/Constantes.ts

@@ -0,0 +1,49 @@
+export enum TypeLink {
+  Youtube,
+  Twitch,
+  Github,
+  Web,
+}
+
+export interface ColorsModel {
+  typeLink: TypeLink;
+  Colors: {
+    text: string;
+    hover: string;
+    border: string;
+  };
+}
+export const colorsModel: ColorsModel[] = [
+  {
+    typeLink: TypeLink.Youtube,
+    Colors: {
+      text: "text-black",
+      hover: "hover:bg-[#ffc8c6]",
+      border: "border-[#c4302b]",
+    },
+  },
+  {
+    typeLink: TypeLink.Twitch,
+    Colors: {
+      text: "text-black",
+      hover: "hover:bg-[#d1b9ff]",
+      border: "border-[#874af6]",
+    },
+  },
+  {
+    typeLink: TypeLink.Github,
+    Colors: {
+      text: "text-black",
+      hover: "hover:bg-black/10",
+      border: "border-black/60",
+    },
+  },
+  {
+    typeLink: TypeLink.Web,
+    Colors: {
+      text: "text-sky-700",
+      hover: "border-sky-700/60",
+      border: "hover:bg-sky-600/20",
+    },
+  },
+];

web/src/components/common/Link.astro

@@ -0,0 +1,33 @@
+---
+import { colorsModel, TypeLink, type ColorsModel } from "./Constantes";
+
+import Github from "./svg/Github.astro";
+import Twitch from "./svg/Twitch.astro";
+import Web from "./svg/Web.astro";
+import Youtube from "./svg/Youtube.astro";
+
+interface Props {
+  title: string;
+  url: string;
+  typeLink: TypeLink;
+}
+
+const { title, url, typeLink } = Astro.props;
+
+const { Colors }: ColorsModel = colorsModel.find(
+  (e) => e.typeLink === typeLink
+)!;
+---
+
+<a
+  target="_blank"
+  rel="noopener"
+  href={url}
+  class={`inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center ${Colors.text} bg-white transition border ${Colors.border} rounded-lg md:px-4 md:py-2 ${Colors.hover} md:text-sm`}
+>
+  {typeLink === TypeLink.Youtube && <Youtube />}
+  {typeLink === TypeLink.Github && <Github />}
+  {typeLink === TypeLink.Twitch && <Twitch />}
+  {typeLink === TypeLink.Web && <Web />}
+  {title}</a
+>

web/src/components/common/svg/Github.astro

@@ -0,0 +1,11 @@
+<svg
+  class="w-5 h-5 mr-1"
+  fill="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden="true"
+>
+  <path
+    fill-rule="evenodd"
+    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+    clip-rule="evenodd"></path>
+</svg>

web/src/components/common/svg/Twitch.astro

@@ -0,0 +1,16 @@
+<svg
+  class="w-6 h-5 mr-1"
+  xmlns="http://www.w3.org/2000/svg"
+  width="118"
+  height="138"
+  viewBox="0 0 118 138"
+  ><g fill="none" fill-rule="evenodd"
+    ><path
+      fill="#FFF"
+      d="m107.8058 63.7036-19.602 19.601h-19.6l-17.152 17.151v-17.151h-22.05V9.8006h78.404z"
+    ></path><path
+      fill="#9146FF"
+      d="M117.605 0v68.605l-44.102 44.099H53.904l-24.503 24.503v-24.503H0V24.502L24.5 0h93.105Zm-9.8 9.801H29.401v73.503h22.051v17.15l17.153-17.15h19.601l19.599-19.601V9.801ZM93.1042 26.9518v29.4h-9.8v-29.4h9.8Zm-26.951 0v29.4h-9.8v-29.4h9.8Z"
+    ></path></g
+  ></svg
+>

web/src/components/common/svg/Web.astro

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class="w-5 h-5 mr-1"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
+  ></path>
+</svg>

web/src/components/common/svg/Youtube.astro

@@ -0,0 +1,13 @@
+<svg
+  class="w-6 h-5 mr-2"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 28.57 20"
+  ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.57 20"
+    ><path
+      fill="red"
+      d="M27.9727 3.12324C27.6435 1.89323 26.6768.926623 25.4468.597366 23.2197 2.2e-7 14.285 0 14.285 0S5.35042 2.2e-7 3.12323.597366C1.89323.926623.926623 1.89323.597366 3.12324 2.2e-7 5.35042 0 10 0 10s2.2e-7 4.6496.597366 6.8768c.329257 1.23 1.295864 2.1966 2.525864 2.5258C5.35042 20 14.285 20 14.285 20s8.9347 0 11.1618-.5974c1.23-.3292 2.1967-1.2958 2.5259-2.5258.5974-2.2272.5974-6.8768.5974-6.8768s-.0024-4.64958-.5974-6.87676Z"
+    ></path><path
+      fill="#fff"
+      d="m11.4253 14.2854 7.4224-4.285-7.4224-4.28507v8.57007Z"></path></svg
+  ></svg
+>

web/src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />