From 152ba6d4431236b6dc0ab735bdda90aeffa24b11 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 18 Nov 2024 15:24:11 +0600
Subject: [PATCH] web/components: add `BulletExplain` component

---
 web/src/components/misc/BulletExplain.svelte | 72 ++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 web/src/components/misc/BulletExplain.svelte

diff --git a/web/src/components/misc/BulletExplain.svelte b/web/src/components/misc/BulletExplain.svelte
new file mode 100644
index 00000000..747a3b90
--- /dev/null
+++ b/web/src/components/misc/BulletExplain.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    export let title: string;
+    export let description: string;
+    export let icon: ConstructorOfATypedSvelteComponent;
+</script>
+
+<div class="bullet-holder">
+    <div class="bullet-icon">
+        <svelte:component this={icon} />
+    </div>
+    <div class="bullet-content">
+        <div class="bullet-title">
+            {title}
+        </div>
+        <div class="subtext bullet-description">
+            {description}
+        </div>
+    </div>
+</div>
+
+<style>
+    .bullet-holder {
+        display: flex;
+        flex-direction: row;
+        text-align: left;
+        gap: var(--padding);
+    }
+
+    .bullet-content {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--padding) / 2);
+    }
+
+    .bullet-title {
+        color: var(--secondary);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-weight: 500;
+        gap: var(--padding);
+    }
+
+    .bullet-description {
+        padding: 0;
+        line-height: 1.5;
+    }
+
+    .bullet-icon {
+        display: flex;
+    }
+
+    .bullet-icon :global(svg) {
+        width: 21px;
+        height: 21px;
+    }
+
+    @media screen and (max-width: 535px) {
+        .bullet-content {
+            gap: calc(var(--padding) / 2.5);
+        }
+
+        .bullet-title {
+            font-size: 15px;
+        }
+
+        .bullet-icon :global(svg) {
+            width: 19px;
+            height: 19px;
+        }
+    }
+</style>