Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from "react";
import Image from "next/image";
import Link from "next/link";
interface CategoryItem {
id: number;
name: string;
imageUrl?: string | null;
}
const SingleItem = ({ item }: { item: CategoryItem }) => {
return (
<Link
href={`/shop?category=${item.id}`}
className="group flex flex-col items-center"
aria-label={`Shop ${item.name} category`}
>
<div className="relative max-w-[130px] w-full bg-[#F2F3F8] dark:bg-gray-800 h-32.5 rounded-full flex items-center justify-center mb-4">
<div className="relative w-[82px] h-[62px]">
<Image
src={item.imageUrl || "/images/categories/default.png"}
alt={`${item.name} category`}
fill
sizes="82px"
className="object-contain"
/>
</div>
</div>
<div className="flex justify-center">
<h3 className="inline-block font-medium text-center text-dark dark:text-gray-200 bg-gradient-to-r from-blue to-blue bg-[length:0px_1px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 hover:bg-[length:100%_3px] group-hover:bg-[length:100%_1px] group-hover:text-blue line-clamp-1">
{item.name}
</h3>
</div>
</Link>
);
};
export default SingleItem;
|