feat(TechText): component for technical text
This commit is contained in:
39
src/shared/ui/TechText/TechText.svelte
Normal file
39
src/shared/ui/TechText/TechText.svelte
Normal file
@@ -0,0 +1,39 @@
|
||||
<!--
|
||||
Component: TechnicalText
|
||||
Monospace <code> element for technical values, measurements, identifiers.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||
import {
|
||||
type LabelSize,
|
||||
type LabelVariant,
|
||||
labelSizeConfig,
|
||||
labelVariantConfig,
|
||||
} from '$shared/ui/Label/config';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
variant?: LabelVariant;
|
||||
size?: LabelSize;
|
||||
children?: Snippet;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
variant = 'muted',
|
||||
size = 'sm',
|
||||
children,
|
||||
class: className,
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<code
|
||||
class={cn(
|
||||
"font-['Space_Mono'] tracking-tight tabular-nums",
|
||||
labelSizeConfig[size],
|
||||
labelVariantConfig[variant],
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{#if children}{@render children()}{/if}
|
||||
</code>
|
||||
Reference in New Issue
Block a user