From 789ab25c7238e7e6fd5fa8ad0cb87939ac4e9069 Mon Sep 17 00:00:00 2001
From: Asis Ferrer <aferrer@aferrer.cloud>
Date: Fri, 31 Oct 2025 16:25:18 +0000
Subject: [PATCH] Refactor Projects component to use structured tags with icons
 and add link icon SVG

---
 src/components/Projects.astro | 34 ++++++++++++++++++++++------------
 src/data/index.ts             |  6 +++++-
 src/icons/link.svg            |  6 ++++++
 3 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 src/icons/link.svg

diff --git a/src/components/Projects.astro b/src/components/Projects.astro
index b499b1c..f255c15 100644
--- a/src/components/Projects.astro
+++ b/src/components/Projects.astro
@@ -1,12 +1,18 @@
 ---
+import { Icon } from "astro-icon/components";
 import Section from "./ui/Section.astro";
 
 const { projects } = Astro.props;
 
-interface project {
+interface ProjectTag {
+	name: string;
+	icon?: string;
+}
+
+interface ProjectProps {
 	title: string;
 	description: string;
-	tags: string[];
+	tags: ProjectTag[];
 	liveUrl?: string;
 	repoUrl: string;
 }
@@ -17,7 +23,7 @@ interface project {
     </h3>
     <div class="space-y-12">
         {
-            projects.map((project: project) => (
+            projects.map((project: ProjectProps) => (
                 <div class="section-card overflow-hidden md:flex">
                     <div class="p-8 flex-1">
                         <h4 class="text-xl font-bold text-white mb-2">
@@ -25,13 +31,15 @@ interface project {
                         </h4>
                         <p class="text-gray-400 mb-4">{project.description}</p>
                         <div class="flex flex-wrap gap-2 mb-6">
-                            {project.tags.map((tag) => (
-                                <span class="bg-gray-700 text-sky-300 text-xs font-semibold px-2.5 py-1 rounded-full">
-                                    {tag}
+                            {project.tags.map((tag: ProjectTag) => (
+                                <span class="inline-flex items-center px-3 py-1 bg-gray-800 text-gray-300 text-sm rounded-full">
+                                    <Icon
+                                        name={tag.icon}
+                                        class="w-6 h-6 mr-2"
+                                        data-inline="false"
+                                    />
                                 </span>
                             ))}
-                        </div>
-                        <div class="flex items-center gap-4">
                             {project.liveUrl && (
                                 <a
                                     href={project.liveUrl}
@@ -39,14 +47,16 @@ interface project {
                                     rel="noopener noreferrer"
                                     class="inline-flex items-center gap-2 text-sky-400 hover:text-sky-300 transition-colors"
                                 >
-                                    <span
-                                        class="iconify"
-                                        data-icon="mdi:open-in-new"
+                                    <Icon
+                                        name="link"
+                                        class="w-6 h-6 mr-2 hover:scale-110 hover:text-gray-100 transition-transform duration-300"
                                         data-inline="false"
+                                        fill={"bg-white"}
                                     />
-                                    URL Live
                                 </a>
                             )}
+                        </div>
+                        <div class="flex items-center gap-4">
                             {project.repoUrl && (
                             <a
                                 href={project.repoUrl}
diff --git a/src/data/index.ts b/src/data/index.ts
index fa83168..5a5a570 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -66,7 +66,11 @@ export const projects = [
 		title: "HAM Italia - Sitio Web Corporativo",
 		description:
 			"Sitio web corporativo desarrollado con Astro, React y Tailwind CSS para HAM Italia. Incluye múltiples secciones informativas, formularios de contacto y solicitud de tarjetas, optimizado para rendimiento, SEO y experiencia de usuario.",
-		tags: ["Astro", "React", "Tailwind CSS"],
+		tags: [
+			{ name: "Astro", icon: "astro" },
+			{ name: "React", icon: "react" },
+			{ name: "Tailwind CSS", icon: "tailwind" },
+		],
 		liveUrl: "https://hamitalia.com",
 		repoUrl: null,
 	},
diff --git a/src/icons/link.svg b/src/icons/link.svg
new file mode 100644
index 0000000..6249ad1
--- /dev/null
+++ b/src/icons/link.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 2.00001L11.75 12.25" stroke="#d1d5dc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.9998 6.49999L21.9998 1.99999L17.0568 1.99999" stroke="#d1d5dc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 2H4C2.89543 2 2 2.89543 2 4V20C2 21.1046 2.89543 22 4 22H20C21.1046 22 22 21.1046 22 20V12.75" stroke="#d1d5dc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file