Item

// owner: Sona
"use client";

import { ArrowUpRight } from "lucide-react";

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemGroup,
  ItemHeader,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const items = [
  {
    title: "Docs website",
    description: "Next.js, MDX, Tailwind CSS",
    status: "Published",
  },
  {
    title: "Command palette",
    description: "React, Radix UI",
    status: "Draft",
  },
];

export default function ItemExample() {
  return (
    <ItemGroup>
      {items.map((item) => (
        <Item key={item.title} variant="outline">
          <ItemMedia variant="icon" className="text-muted-foreground">
            <ArrowUpRight className="size-4" />
          </ItemMedia>
          <ItemContent>
            <ItemHeader>
              <ItemTitle>{item.title}</ItemTitle>
              <Badge
                variant={item.status === "Published" ? "default" : "secondary"}
              >
                {item.status}
              </Badge>
            </ItemHeader>
            <ItemDescription>{item.description}</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button variant="ghost" size="sm">
              Open
            </Button>
          </ItemActions>
        </Item>
      ))}
      <ItemSeparator />
      <Item variant="muted">
        <ItemContent>
          <ItemFooter>
            <span className="text-sm text-muted-foreground">
              Need another list item?
            </span>
            <Button size="sm">Add item</Button>
          </ItemFooter>
        </ItemContent>
      </Item>
    </ItemGroup>
  );
}