ScrollArea Pro

import { ScrollAreaPro } from '@/components/ui/scroll-areapro';

<ScrollAreaPro
  className='w-96 rounded-md border whitespace-nowrap'
  crossDirectionalScroll
  showProgress='horizontal'
>
  <div className='flex w-max space-x-4 p-4'>
    {works.map((artwork) => (
      <figure key={artwork.artist} className='shrink-0'>
        <div className='overflow-hidden rounded-md'>
          <Image
            src={artwork.art}
            alt={`Photo by ${artwork.artist}`}
            className='aspect-3/4 object-cover grayscale'
            width={300}
            height={400}
          />
        </div>
        <figcaption className='pt-2 text-xs text-muted-foreground'>
          Photo by{' '}
          <span className='font-semibold text-foreground'>
            {artwork.artist}
          </span>
        </figcaption>
      </figure>
    ))}
  </div>
</ScrollAreaPro>