DescriptionList

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  DescriptionList,
  DescriptionItem,
  Badge
} from "@pimolu/react";

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Workspace</CardTitle>
          <CardDescription>Settings that do not fit in a form.</CardDescription>
        </CardHeader>
        <CardContent>
          <DescriptionList variant="divided" layout="inline">
            <DescriptionItem term="Plan" details="Pro" />
            <DescriptionItem term="Seats" details="12 of 20" />
            <DescriptionItem term="Storage" details="42 GB of 100 GB" />
            <DescriptionItem term="Region" details="eu-west-3" />
            <DescriptionItem term="Renewal" details="19 Oct 2026" />
          </DescriptionList>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Deployment</CardTitle>
          <CardDescription>A bordered list for a compact summary.</CardDescription>
        </CardHeader>
        <CardContent>
          <DescriptionList variant="bordered">
            <DescriptionItem term="Environment" details="production" />
            <DescriptionItem term="Commit" details={<code>fde3d86</code>} />
            <DescriptionItem
              term="Status"
              details={<Badge variant="success">ready</Badge>}
            />
          </DescriptionList>
        </CardContent>
      </Card>
    </div>
  );
}