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>