Meme Grid Component

MemeGrid.tsx

'use client';

import toast from 'react-hot-toast';

const memes = [
  '/memes/meme-1.png',
].sort();

const copyImageToClipboard = async (imageUrl: string) => {
  try {
    if (imageUrl.includes('giphy')) {
      await navigator.clipboard.writeText(imageUrl);
      toast.success('Copied to clipboard');
      return;
    }

    const response = await fetch(imageUrl);
    const blob = await response.blob();
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    toast.success('Copied to clipboard');
  } catch (error) {
    console.error('Failed to copy image: ', error);
  }
};

const MemeGrid = () => {
  return (
    <div>
      <div className='grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 mt-8'>
        {memes.map((meme) => (
          <Meme meme={meme} key={meme} />
        ))}
      </div>
    </div>
  );
};

const Meme = ({ meme }: { meme: string }) => {
  return (
    <div className='relative aspect-square relative'>
      <img src={meme} alt='meme' className='w-full h-full object-cover rounded-lg absolute inset-0' />
      <div className='absolute bottom-2 right-2 flex items-center justify-center gap-2'>
        <a
          href={meme}
          download={meme.split('/').pop()}
          className='rounded-full w-10 h-10 bg-neutral-950 flex items-center justify-center shadow-lg hover:bg-neutral-700 transition-colors duration-200'
        >
          <div className='w-4 h-4 text-white -mt-0.5'>
            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
              <path
                d='M280 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 270.1-95-95c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 369c9.4 9.4 24.6 9.4 33.9 0L409 233c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95L280 24zM128.8 304L64 304c-35.3 0-64 28.7-64 64l0 80c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-80c0-35.3-28.7-64-64-64l-64.8 0-48 48L448 352c8.8 0 16 7.2 16 16l0 80c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-80c0-8.8 7.2-16 16-16l112.8 0-48-48zM432 408a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z'
                fill='currentColor'
              />
            </svg>
          </div>
          <p className='sr-only'>Download</p>
        </a>

        {!meme.includes('gif') && (
          <button
            onClick={() => copyImageToClipboard(meme)}
            className='hidden lg:flex rounded-full w-10 h-10 bg-neutral-950 items-center justify-center shadow-lg hover:bg-neutral-700 transition-colors duration-200'
          >
            <div className='w-4 h-4 text-white'>
              <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'>
                <path
                  d='M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z'
                  fill='currentColor'
                />
              </svg>
            </div>
            <p className='sr-only'>Copy to clipboard</p>
          </button>
        )}
      </div>
    </div>
  );
};

export default MemeGrid;