An outlined item, a link and a list

// apps/docs/examples/ui/item.tsx'use client';
import {ChevronRightIcon, FileTextIcon, ShieldCheckIcon} from 'lucide-react';
import {Badge} from '@workspace/active-ui/components/primitives/badge';import {Button} from '@workspace/active-ui/components/primitives/button';import {  Item,  ItemActions,  ItemContent,  ItemDescription,  ItemGroup,  ItemMedia,  ItemSeparator,  ItemTitle,} from '@workspace/active-ui/components/primitives/item';
const DOCUMENTS = [  {title: 'Scheme rules 2026', meta: 'PDF · 1.2 MB'},  {title: 'Annual report 2025', meta: 'PDF · 3.4 MB'},];
/** * A row of content with a media slot, a title and description, and * actions: as a standalone outlined item, as a link, and as a list of * items with separators. In a group, which is a list, each item is a * `listitem`. Items lay out the content; the actions are yours. */export default function ItemExample() {  return (    <div className="flex w-full max-w-md flex-col gap-6">      <Item variant="outline">        <ItemMedia variant="icon">          <ShieldCheckIcon aria-hidden />        </ItemMedia>        <ItemContent>          <ItemTitle>            Two-step verification <Badge variant="secondary">On</Badge>          </ItemTitle>          <ItemDescription>            A code from your phone is asked at every sign-in.          </ItemDescription>        </ItemContent>        <ItemActions>          <Button variant="outline" size="sm">            Manage          </Button>        </ItemActions>      </Item>
      <Item variant="muted" size="sm" render={<a href="#item-statements" />}>        <ItemContent>          <ItemTitle>Statements</ItemTitle>          <ItemDescription>Three new since your last visit</ItemDescription>        </ItemContent>        <ItemActions>          <ChevronRightIcon aria-hidden className="size-4" />        </ItemActions>      </Item>
      <ItemGroup>        {DOCUMENTS.map((document, index) => (          <div key={document.title} className="contents">            {index > 0 ? <ItemSeparator /> : null}            <Item size="sm" role="listitem">              <ItemMedia variant="icon">                <FileTextIcon aria-hidden />              </ItemMedia>              <ItemContent>                <ItemTitle>{document.title}</ItemTitle>                <ItemDescription>{document.meta}</ItemDescription>              </ItemContent>              <ItemActions>                <Button variant="ghost" size="sm">                  Download                </Button>              </ItemActions>            </Item>          </div>        ))}      </ItemGroup>    </div>  );}