53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
|
import React, { ReactNode } from "react";
|
||
|
|
|
||
|
|
interface CategoryCardProps {
|
||
|
|
label: string;
|
||
|
|
icon: ReactNode;
|
||
|
|
onClick?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* CategoryCard Component
|
||
|
|
* Componente reutilizável para exibir cards de categorias em destaque
|
||
|
|
*
|
||
|
|
* @param label - Texto do card
|
||
|
|
* @param icon - Ícone ou elemento visual do card
|
||
|
|
* @param onClick - Callback quando o card é clicado
|
||
|
|
*/
|
||
|
|
const CategoryCard: React.FC<CategoryCardProps> = ({
|
||
|
|
label,
|
||
|
|
icon,
|
||
|
|
onClick,
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={onClick}
|
||
|
|
className="group relative bg-white p-6 rounded-2xl border-2 border-orange-100 shadow-lg shadow-orange-500/[0.03] hover:shadow-orange-500/[0.08] hover:border-orange-400 hover:-translate-y-1 transition-all duration-300 cursor-pointer flex flex-col items-center justify-center text-center overflow-hidden min-h-[180px]"
|
||
|
|
>
|
||
|
|
{/* Fundo Decorativo */}
|
||
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-orange-50/50 rounded-bl-[100px] -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-500"></div>
|
||
|
|
|
||
|
|
<div className="mb-6 group-hover:scale-110 transition-transform flex items-center justify-center h-16 relative z-10">
|
||
|
|
{icon}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col items-center w-full relative z-10">
|
||
|
|
<span className="text-[9px] font-black text-orange-400/70 uppercase tracking-[0.3em] mb-1.5 group-hover:text-orange-500 transition-colors">
|
||
|
|
Produtos
|
||
|
|
</span>
|
||
|
|
<span className="text-lg font-black text-orange-600 uppercase tracking-tighter leading-none group-hover:scale-105 transition-transform">
|
||
|
|
{label}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Indicador de Hover */}
|
||
|
|
<div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-orange-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CategoryCard;
|
||
|
|
|
||
|
|
|
||
|
|
|