cherry-pick: pub components from feat/laporan-tindakan-185
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '~/lib/utils';
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
label: string
|
||||
@@ -9,15 +9,17 @@ const props = defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn(`flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3`, props.class)">
|
||||
<div :class="cn(`flex flex-col gap-0.5 lg:grid lg:grid-cols-[180px_auto_minmax(0,1fr)] lg:gap-x-3 lg:gap-y-1`, props.class)">
|
||||
<!-- Label -->
|
||||
<span :class="cn(`text-md font-normal text-muted-foreground`, props.labelClass)">
|
||||
{{ label }}
|
||||
</span>
|
||||
|
||||
<!-- Colon (hidden on mobile) -->
|
||||
<span class="hidden text-md tracking-wide text-muted-foreground lg:block">:</span>
|
||||
|
||||
<!-- Value -->
|
||||
<span class="truncate lg:whitespace-normal">
|
||||
<span class="me-3 hidden lg:inline-block">:</span>
|
||||
<span class="text-md font-sans tracking-wide">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user