{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-item-10","type":"registry:block","title":"Item with header and footer sections","description":"Item with header and footer sections","dependencies":[],"registryDependencies":["avatar","@reui/badge","button","item","progress"],"files":[{"path":"c-item-10.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemHeader,\n  ItemTitle,\n} from \"@/components/ui/item\"\nimport { Progress } from \"@/components/ui/progress\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-xs flex-col gap-3\">\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <div className=\"flex items-center gap-2\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"FolderIcon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n              className=\"text-muted-foreground size-3.5\"\n              aria-hidden=\"true\"\n            />\n            <span className=\"text-muted-foreground text-xs\">Project</span>\n          </div>\n          <Badge variant=\"info-light\" size=\"xs\">\n            In Progress\n          </Badge>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the marketing site with a focus on conversion\n            optimization and modern design patterns.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Open\n          </Button>\n        </ItemActions>\n        <ItemFooter>\n          <AvatarGroup>\n            <Avatar size=\"sm\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80\"\n                alt=\"SC\"\n              />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n            <Avatar size=\"sm\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\"\n                alt=\"AJ\"\n              />\n              <AvatarFallback>AJ</AvatarFallback>\n            </Avatar>\n            <Avatar size=\"sm\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96&h=96&dpr=2&q=80\"\n                alt=\"EP\"\n              />\n              <AvatarFallback>EP</AvatarFallback>\n            </Avatar>\n          </AvatarGroup>\n          <div className=\"flex items-center gap-2\">\n            <Progress value={65} className=\"w-20\" />\n            <span className=\"text-muted-foreground text-xs\">65%</span>\n          </div>\n        </ItemFooter>\n      </Item>\n    </div>\n  )\n}","target":"components/examples/c-item-10.tsx"}],"meta":{"order":10}}