init

lib/components/dashboard/elements/InputGroup.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  export let title: string;
+  export let subtitle: string | undefined = undefined;
+  export let link: { url: string; text: string; tabindex?: number } | undefined = undefined;
+  export let required: boolean = false;
+  export let style: 'default' | 'title' | 'white' = 'default';
+</script>
+
+<div class="flex flex-col gap-2" class:style-title={style === 'title'} class:style-white={style === 'white'}>
+  <div class="flex justify-between">
+    <p class="title text-xs text-text-teritary">
+      {title || ''}{#if required}<span class="text-accent">*</span>{/if}
+    </p>
+    {#if link}
+      <a href={link.url} tabindex={link.tabindex}>{link.text}</a>
+    {/if}
+  </div>
+  {#if subtitle}
+    <p class="subtitle text-xs text-text-teritary">{subtitle}</p>
+  {/if}
+  <slot />
+</div>
+
+<style lang="postcss">
+  .style-title {
+    @apply gap-4;
+  }
+
+  .style-title p.title {
+    @apply text-text-header font-semibold text-2xl leading-[.8] whitespace-nowrap;
+  }
+
+  .style-title p.subtitle {
+    @apply text-base text-text-primary;
+  }
+
+  .style-white p.title {
+    @apply font-semibold text-text-header;
+  }
+</style>