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>
  )
}