opengifame/components/widgets/GifContainer.tsx

import React from 'react'
import Image from 'next/image';
import { HandThumbUpIcon, HandThumbDownIcon } from '@heroicons/react/24/outline';
import { Gif } from 'models';

interface IGifContainerProps {
    gif: Gif;
}
const GifContainer: React.FC<IGifContainerProps> = ({ gif }) => {
    const _doot = async (id: string, isUp: boolean) => {
        const result = await fetch(`api/votes?gifId=${id}&isUp=${isUp ? 1 : 0}`, {
            method: 'POST'
        });
    }
    return (<>
        <div className="group relative h-[17.5rem] transform overflow-hidden rounded-4xl">
            <div className="absolute inset-0 bg-indigo-50" >
                <Image alt={gif.title}
                    layout="fill"
                    objectFit="cover"
                    className="absolute inset-0 transition duration-300 group-hover:scale-110"
                    src={`/samples/${gif.fileName}.gif`} />
            </div>
        </div>
        {/* <h3 className="mt-2 text-xl font-bold tracking-tight font-display text-slate-900">{gif.title}</h3> */}

        <div className="flex flex-row p-2">
            <p className="flex-1 text-base tracking-tight text-slate-500">
                <span className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
                    Frasier
                </span>
                <span className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
                    Roz
                </span>
                <span className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
                    Martin
                </span>
            </p>
            <div className="flex items-center justify-center space-x-1" >
                <div className="flex transition duration-75 ease-in-out delay-150 hover:text-orange-700 hover:cursor-pointer">
                    <span
                        onClick={() => _doot(gif.id, true)}>
                        <HandThumbUpIcon className="w-5" />
                    </span>
                    <span className="text-xs">{gif.upVotes?.toString()}</span>
                </div>
                <div className="flex transition duration-75 ease-in-out delay-150 hover:text-orange-700 hover:cursor-pointer">
                    <span
                        onClick={() => _doot(gif.id, false)}
                        className='pl-2 '>
                        <HandThumbDownIcon className="w-5" />
                    </span>
                    <span className="text-xs">{gif.downVotes?.toString()}</span>
                </div>
            </div>
        </div>
    </>
    )
}

export default GifContainer