From 348dfcca7e69922369322336d6934f652da2d448 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 6 Sep 2024 23:46:03 -0400
Subject: [PATCH] Add category

---
 src/Category.astro | 56 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/Category.astro

diff --git a/src/Category.astro b/src/Category.astro
new file mode 100644
index 0000000..73c279a
--- /dev/null
+++ b/src/Category.astro
@@ -0,0 +1,56 @@
+---
+// Properties
+const {
+    Name,
+    Link,
+    Thumbnail,
+    Platform
+} = Astro.props
+---
+
+<a href={Link} class="category-card">
+    {Platform ? 
+        <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
+        :
+        <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/></svg></span>
+    }
+    <img onload="this.style.opacity = '1'" src={Thumbnail}/>
+    <p>{Name}</p>
+</a>
+
+<style lang="scss">
+.category-card {
+    position: relative;
+    color: white;
+    text-decoration: none;
+    &::before {
+        content: "";
+        position: absolute;
+        backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        border-radius: 6px;
+    }
+    img {
+        border-radius: 6px;
+        height: 100%;
+        width: 100%;
+        opacity: 0;
+    }
+    p {
+        font-size: 32px;
+        font-weight: bold;
+        margin: 24px;
+        position: absolute;
+        bottom: 0px;
+    }
+    span {
+        fill: white;
+        width: 32px;
+        position: absolute;
+        margin: 24px;
+    }
+}
+</style>
\ No newline at end of file