Description List

import {
 DescriptionList,
 DescriptionListItem,
 DescriptionListTerm,
 DescriptionListDescription,
} from '@/components/ui/description-list'

export default function Example() {
 return (
 <>
 {/* Using items prop (simple) */}
 <DescriptionList
 layout="stacked"
 items={[
 { term: 'Name', description: 'John Doe' },
 { term: 'Email', description: 'john@example.com' },
 ]}
 />

 {/* With icons */}
 <DescriptionList
 layout="horizontal"
 items={[
 { term: 'Email', description: 'john@example.com', icon: <Mail /> },
 { term: 'Phone', description: '+1 555-1234', icon: <Phone /> },
 ]}
 />

 {/* Custom composition */}
 <DescriptionList layout="stacked">
 <DescriptionListItem>
 <DescriptionListTerm icon={<User />}>Name</DescriptionListTerm>
 <DescriptionListDescription>
 <span className="font-medium">John Doe</span>
 </DescriptionListDescription>
 </DescriptionListItem>
 </DescriptionList>

 {/* Different sizes */}
 <DescriptionList size="sm" items={items} />
 <DescriptionList size="md" items={items} />
 <DescriptionList size="lg" items={items} />
 </>
 )
}