List

import {
  List,
  ListItem,
  ListItemDescription,
  ListItemTitle,
} from "@gpuixui/components/list";

const files = [
  { value: "readme", title: "README.md", description: "The project's front door" },
  { value: "design", title: "Design notes", description: "docs/design-notes.md" },
];

export const FileList = ({ open }: { open: (value: string) => void }) => (
  <List defaultValue="readme" onActivate={open} selectionMode="single">
    {files.map((file) => (
      <ListItem key={file.value} textValue={file.title} value={file.value}>
        <ListItemTitle>{file.title}</ListItemTitle>
        <ListItemDescription>{file.description}</ListItemDescription>
      </ListItem>
    ))}
  </List>
);

List
└── ListItem
    ├── ListItemTitle
    ├── ListItemDescription
    ├── leading
    └── trailing