49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { IVideo } from '@/typings/video.type';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
const VideoItem = ({ img, title, id, slides }: IVideo) => {
|
|
return (
|
|
<Link
|
|
href={`${slides ? '' : 'treasury/'}${id}`}
|
|
className="video-list-item flex flex-col gap-2 lg:w-[250px] md:w-[200px] sm:w-[200px] w-[300px] ">
|
|
{img ? (
|
|
<>
|
|
<div className="relative sm:h-[150px] h-[200px] w-full overflow-hidden rounded-five">
|
|
<Image
|
|
src={img}
|
|
alt={title}
|
|
unoptimized
|
|
unselectable="off"
|
|
className="top-0 left-0 w-full h-full object-cover z-0 absolute pointer-events-none"
|
|
width={280}
|
|
height={160}
|
|
/>
|
|
<Image
|
|
src={'/play.svg'}
|
|
alt={'play icon'}
|
|
unoptimized
|
|
unselectable="off"
|
|
className="top-[50%] left-[50%] w-[52px] h-[52px] object-cover z-10 -translate-x-[50%] -translate-y-[50%] absolute"
|
|
width={52}
|
|
height={52}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : null}
|
|
|
|
{/* {premium ? <Premium /> : null} */}
|
|
<div className="flex gap-3 justify-start items-center">
|
|
<div className="flex flex-col">
|
|
<h3 className="clamped font-mw_sans font-bold text-lg text-black transition-all dark:text-white overflow-hidden w-full">
|
|
{title}
|
|
</h3>
|
|
{/* <span className="font-roboto text-lg font-normal text-black transition-all dark:text-white">{`${views} Views`}</span> */}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default VideoItem;
|