src/shared/ui/Label/Label.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+
+interface Props {
+    text?: string;
+    align?: 'left' | 'right' | 'center';
+    size?: 'sm' | 'md' | 'lg';
+    onlyText?: boolean;
+    class?: string;
+}
+const {
+    text,
+    align = 'left',
+    size = 'md',
+    onlyText = false,
+    class: className,
+}: Props = $props();
+</script>
+
+<div
+    class={cn(
+        'grid grid-rows-1 gap-2 items-center w-auto',
+        align === 'left' && 'grid-cols-[max-content_1fr]',
+        align === 'center' && 'grid-cols-[1fr_max-content_1fr]',
+        align === 'right' && 'grig-cols-[1fr_max-content]',
+        className,
+    )}
+>
+    {#if align !== 'left'}
+        <div class={cn('h-px w-full bg-gray-400/50', onlyText && 'bg-transparent')}></div>
+    {/if}
+    <div
+        class={cn(
+            'text-gray-400 uppercase',
+            size === 'sm' && 'text-[0.5rem]',
+            size === 'md' && 'text-[0.625rem]',
+            size === 'lg' && 'text-[0.75rem]',
+        )}
+    >
+        {text}
+    </div>
+    {#if align !== 'right'}
+        <div class={cn('h-px w-full bg-gray-400/50', onlyText && 'bg-transparent')}></div>
+    {/if}
+</div>