Structured List

import { Bell, Shield, CreditCard, User } from 'lucide-react'
import { DataList, DataListItem } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="w-[420px]">
      <DataList>
        <DataListItem
          left={<User className="h-4 w-4" />}
          title="Profile"
          description="Name, email, avatar"
          right={<span className="text-xs">›</span>}
          interactive
        />
        <DataListItem
          left={<Bell className="h-4 w-4" />}
          title="Notifications"
          description="Email, push, digests"
          right={<span className="text-xs">›</span>}
          interactive
        />
        <DataListItem
          left={<Shield className="h-4 w-4" />}
          title="Security"
          description="Password, 2FA, sessions"
          right={<span className="text-xs">›</span>}
          interactive
        />
        <DataListItem
          left={<CreditCard className="h-4 w-4" />}
          title="Billing"
          description="Plan: Pro · Renews May 1"
          right={<span className="text-xs">›</span>}
          interactive
        />
      </DataList>
    </div>
  )
}