Refactor Projects component to use structured tags with icons and add link icon SVG

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}