46 lines
1.1 KiB
Svelte
46 lines
1.1 KiB
Svelte
|
<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>
|