89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import { useMediaQueries } from "@/hooks/useMediaQueries";
|
|
import clsx from "clsx";
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
|
|
export interface IProduct {
|
|
id: number;
|
|
title: string;
|
|
text: string;
|
|
image: string;
|
|
}
|
|
|
|
export function ProductItem({
|
|
image,
|
|
title,
|
|
text,
|
|
className,
|
|
href,
|
|
}: IProduct & { className?: string; href: string }) {
|
|
const { isLg, isMd } = useMediaQueries();
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={clsx(
|
|
`md:p-5 p-2 flex flex-col overflow-hidden justify-between box-border relative max-md:items-start bg-[#37393B99] hover:border-white/8 border-transparent border transition-colors bg-[radial-gradient(farthest-corner_at_top_left,transparent,transparent)] lg:hover:bg-[radial-gradient(farthest-corner_at_top_left,transparent,#7A7A7A50)] lg:rounded-[1.111vw] rounded-2xl`,
|
|
className
|
|
)}
|
|
>
|
|
<div className="max-md:hidden space-y-2">
|
|
{/* <div className="heading1 flex items-start font-medium">
|
|
{(isLg || isMd) && title === "Stream" && (
|
|
<div className="rounded-full bg-[#B5F54E] bg-opacity-30 p-0.5">
|
|
<div className="rounded-full bg-[#B5F54E] w-[5px] h-[5px]" />
|
|
</div>
|
|
)}
|
|
{title}
|
|
</div> */}
|
|
<div className="heading2 font-medium opacity-60 lg:max-w-[50%]">
|
|
{text}
|
|
</div>
|
|
</div>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="md:hidden min-w-16 min-h-16 relative content-center"
|
|
>
|
|
<img
|
|
src={image}
|
|
alt={text}
|
|
className="rounded-lg !relative"
|
|
width={64}
|
|
height={64}
|
|
/>
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="max-md:hidden lg:hidden absolute right-0 bottom-0"
|
|
>
|
|
<div className="relative">
|
|
<img
|
|
src={image}
|
|
className="rounded-lg !relative max-w-[29.167vw]"
|
|
sizes="29.167vw"
|
|
alt={text}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="max-lg:hidden absolute bottom-0 -right-10"
|
|
>
|
|
<div className="relative">
|
|
<img
|
|
src={image}
|
|
alt={text}
|
|
className="rounded-lg !relative max-w-[21.667vw]"
|
|
sizes="21.667vw"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
<div className="btns md:hidden font-medium opacity-60">{text}</div>
|
|
</Link>
|
|
);
|
|
}
|