feat(Label): create shared Label component

This commit is contained in:
Ilia Mashkov
2026-02-18 16:56:26 +03:00
parent ce609728c3
commit ce1dcd92ab

View File

@@ -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>