Reworked icons

src/components/AppBar/index.astro

@@ -1,5 +1,6 @@
 ---
-import Icon from "../Icons/index.astro";
+import Icon from "../Icons/Icon.astro";
+import Github from "../Icons/Github.astro";
 
 type Icon = {
   pack: string;
@@ -100,8 +101,8 @@ const hasIcon = (
     <label for="mobile_hamburger" class="md:hidden">
       <Icon pack="mdi" name="hamburger-menu" />
     </label>
-    <a href="https://github.com/Naapperas">
-      <Icon iconClasses={["ml-5"]} pack="mdi" name="github" />
+    <a href="https://github.com/Naapperas" class="pl-5">
+      <Github />
     </a>
     <div id="mobile" class="hidden peer-checked/mobile_hamburger:hidden">
       <!-- TODO: change this last one to flex once we found a way -->

src/components/Chip/List.astro

@@ -11,7 +11,7 @@ const { labels, caption } = Astro.props;
 
 <div>
   {caption ? <h3>{caption}</h3> : null}
-  <ul class="chip-list">
+  <ul class="flex gap-2">
     {
       labels.map((label) => (
         <li>

src/components/Footer.astro

@@ -2,7 +2,7 @@
 ---
 
 <footer class="w-screen">
-    <p class="w-fit mx-auto mb-2">
+    <p class="w-fit mx-auto mb-2 text-sm">
         Built with <a href="https://astro.build" class="hover:underline">{Astro.generator}</a>
     </p>
 </footer>

src/components/Icons/Github.astro

@@ -0,0 +1,9 @@
+---
+import Icon, {type Props as IconProps} from "./Icon.astro";
+
+type Props = Pick<IconProps, "iconClasses" >;
+
+const {iconClasses} = Astro.props;
+---
+
+<Icon pack="mdi" name="github" iconClasses={iconClasses}/>

src/components/Icons/Icon.astro

@@ -0,0 +1,19 @@
+---
+import { Icon as AstroIcon } from "astro-icon";
+
+export type Props = {
+  pack: string;
+  name: string;
+  iconClasses?: string[];
+};
+
+const { pack, name, iconClasses } = Astro.props;
+
+const classes = ["w-10"]
+
+if (iconClasses !== undefined)
+  classes.push(...iconClasses)
+
+---
+
+<AstroIcon class={classes.join(" ")} pack={pack} name={name} />

src/components/Icons/Laravel.astro

@@ -0,0 +1,9 @@
+---
+import Icon, { type Props as IconProps } from "./Icon.astro";
+
+type Props = Pick<IconProps, "iconClasses">;
+
+const { iconClasses } = Astro.props;
+---
+
+<Icon pack="mdi" name="laravel" iconClasses={iconClasses} />```

src/components/Icons/index.astro

@@ -1,19 +1,21 @@
 ---
-import { Icon as AstroIcon } from "astro-icon";
+import Github from "./Github.astro";
+import Laravel from "./Laravel.astro";
+import type { Props as IconProps } from "./Icon.astro";
 
-export type Props = {
-  pack: string;
-  name: string;
-  iconClasses?: string[];
+const icons = {
+  github: Github,
+  laravel: Laravel,
 };
 
-const { pack, name, iconClasses } = Astro.props;
-
-const classes = ["w-10"]
+type Props = {
+  name: keyof typeof icons;
+  iconClasses: IconProps["iconClasses"];
+};
 
-if (iconClasses !== undefined)
-  classes.push(...iconClasses)
+const { name, iconClasses } = Astro.props;
 
+const Tag = icons[name];
 ---
 
-<AstroIcon class={classes.join(" ")} pack={pack} name={name} />
+<Tag iconClasses={iconClasses} />

src/components/Project/Card.astro

@@ -37,15 +37,14 @@ const { project: projectMetadata } = Astro.props;
 const project = projectMetadata.data;
 ---
 
-<article id=`project-card-${projectMetadata.slug}` class="project-card">
+<article id=`project-card-${projectMetadata.slug}` class="rounded bg-white">
   <a href=`/projects/${projectMetadata.slug}`>
     <img
-      class="preview-image"
       height="204.1px"
       src={project.previewImage}
       alt=`Preview image for ${project.name}`
     />
-    <section class="project-data">
+    <section class="">
       <header>
         <h2>{project.name}</h2>
         {project.shortDescription ? <p>{project.shortDescription}</p> : null}

src/pages/projects/index.astro

@@ -12,7 +12,7 @@ const projects = await getCollection("project");
   contentTitle="Projects"
   description="These are some of the projects I have developed so far:"
 >
-  <section class="">
+  <section class="grid grid-flow-dense grid-cols-3 gap-3 pt-5">
     {projects.map((entry) => <ProjectCard project={entry} />)}
   </section>
 </PageLayout>