1 files changed, 38 insertions, 0 deletions
diff --git a/src/lib/components/SocialCard.svelte b/src/lib/components/SocialCard.svelte
new file mode 100644
index 0000000..f34eb75
--- /dev/null
+++ b/src/lib/components/SocialCard.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  const {
+    name,
+    icon,
+    href,
+    rel,
+  }: {
+    name: string;
+    icon: string;
+    href: string;
+    rel?: string | null | undefined;
+  } = $props();
+</script>
+
+<a
+  class="card shadow-md border border-neutral my-1 mx-1 socialhover p-2"
+  {rel}
+  {href}
+  target="_blank"
+  title={name}
+>
+  <span class="text-3xl md:text-6xl {icon}"></span>
+</a>
+
+<style>
+  .socialhover {
+    span {
+      color: var(--color-fg);
+    }
+  }
+  .socialhover:hover,
+  .socialhover:active {
+    background-color: var(--color-fg);
+    span {
+      color: var(--color-bg);
+    }
+  }
+</style>