Components
Loading preview...
Here is The Item components
@felipemenezes098
npx shadcn@latest add https://21st.dev/r/felipemenezes098/the-item-one'use client'
import { Button } from '@/components/ui/the-item-one'
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemGroup,
ItemMedia,
ItemTitle,
} from '@/components/ui/item'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover'
import { DownloadIcon, FilesIcon } from 'lucide-react'
const files = [
{
name: 'hero-cover.png',
meta: 'Image · 1.4 MB',
thumb:
'https://images.unsplash.com/photo-1589705436822-720a68b246fb?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
{
name: 'brand-kit.zip',
meta: 'Archive · 8.2 MB',
thumb:
'https://images.unsplash.com/photo-1602174286405-c0b06500baac?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
{
name: 'prototype-v3.fig',
meta: 'Figma · 24 MB',
thumb:
'https://images.unsplash.com/photo-1651843609159-cd272ccaea43?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
]
export default function Item21() {
return (
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" className="gap-2">
<FilesIcon className="size-4 shrink-0" />
Files
</Button>
</PopoverTrigger>
<PopoverContent
align="start"
sideOffset={8}
className="w-72 rounded-xl p-2"
>
<ItemGroup className="flex flex-col gap-1">
{files.map((file) => (
<Item
key={file.name}
size="xs"
className="
flex items-center gap-3
rounded-lg
px-2 py-2
transition-colors
hover:bg-muted/60
"
>
<ItemMedia className="size-10 shrink-0 overflow-hidden rounded-md">
<img
src={file.thumb}
alt={file.name}
className="block size-full object-cover"
/>
</ItemMedia>
<ItemContent className="min-w-0 flex-1 space-y-0.5">
<ItemTitle className="truncate text-sm leading-5">
{file.name}
</ItemTitle>
<ItemDescription className="truncate text-xs leading-4">
{file.meta}
</ItemDescription>
</ItemContent>
<ItemActions className="ml-1 shrink-0">
<Button
variant="ghost"
size="icon-sm"
aria-label={`Download ${file.name}`}
className="size-8"
>
<DownloadIcon className="size-4 shrink-0" />
</Button>
</ItemActions>
</Item>
))}
</ItemGroup>
</PopoverContent>
</Popover>
)
}