Key Value

import { KeyValue, KeyValueGroup } from '@/components/ui/key-value'

export default function Example() {
 return (
 <>
 {/* Basic key-value */}
 <KeyValue label="Name" value="John Doe" />

 {/* With copy button */}
 <KeyValue
 label="API Key"
 value="sk-1234-5678"
 copyable
 />

 {/* Monospace value */}
 <KeyValue label="ID" value="#ORD-001" mono />

 {/* Different layouts */}
 <KeyValue layout="horizontal" label="Key" value="Value" />
 <KeyValue layout="vertical" label="Key" value="Value" />
 <KeyValue layout="inline" label="Key" value="Value" />

 {/* Different sizes */}
 <KeyValue size="sm" label="Small" value="Value" />
 <KeyValue size="md" label="Medium" value="Value" />
 <KeyValue size="lg" label="Large" value="Value" />

 {/* Key Value Group */}
 <KeyValueGroup
 items={[
 { label: 'Name', value: 'John' },
 { label: 'Email', value: 'john@example.com', copyable: true },
 ]}
 />

 {/* Divided group */}
 <KeyValueGroup
 divided
 spacing="md"
 items={items}
 />

 {/* Copy different value than displayed */}
 <KeyValue
 label="Secret"
 value="••••••••"
 copyable
 copyValue="actual-secret-value"
 />
 </>
 )
}