From a57fed98de28ecaf2281c3360daa4e707b8d14b5 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Tue, 10 Dec 2024 00:52:46 -0500
Subject: [PATCH] Add Banner component

---
 index.ts         |  3 ++-
 src/Banner.astro | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/Banner.astro

diff --git a/index.ts b/index.ts
index bc549c4..6dc73af 100644
--- a/index.ts
+++ b/index.ts
@@ -3,7 +3,8 @@ import CallToAction from "./src/blocks/CallToAction.astro";
 import Hero from "./src/blocks/Hero.astro"
 
 // Components
+import Banner from "./src/Banner.astro"
 import Image from "./src/Image.astro";
 
 // Export
-export {CallToAction, Image, Hero}
\ No newline at end of file
+export {Banner, CallToAction, Image, Hero}
\ No newline at end of file
diff --git a/src/Banner.astro b/src/Banner.astro
new file mode 100644
index 0000000..f6a2be9
--- /dev/null
+++ b/src/Banner.astro
@@ -0,0 +1,48 @@
+---
+const {
+    Title,
+    Message,
+    Type,
+    Link
+} = Astro.props
+---
+
+<a href={Link} class={"pd-banner pd-banner-type-" + Type}>
+    <p class="pd-banner-title"><slot name="icon"/> {Title}</p>
+    <p class="pd-banner-message">{Message}</p>
+</a>
+
+<style>
+.pd-banner {
+    background: gray;
+    color: white;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    margin-bottom: 24px;
+    @media screen and (max-width: 800px) {
+        flex-direction: column;
+        .pd-banner-message {padding: 24px}
+    }
+    p {
+        margin: 0px;
+    }
+    .pd-banner-title {
+        @media screen and (max-width: 800px) {
+            border-radius: 6px 6px 0px 0px !important;
+            width: 100%;
+            padding: 12px 0px 12px 50px !important;
+        }
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        background: #00000038;
+        padding: 12px 16px;
+        border-radius: 6px 0px 0px 6px;
+        margin-right: 12px;
+    }
+}
+.pd-banner-type-Dangerous {background: #a42626;    color: white}
+.pd-banner-type-Update {background: #3a66b9;    color: white}
+.pd-banner-type-Warning {background: #e6e680;    color: black}
+</style>
\ No newline at end of file