71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
interface ShortcutCardProps {
|
|
id: string;
|
|
title: string;
|
|
icon: React.ReactNode;
|
|
route: string;
|
|
gradient: string;
|
|
visible?: boolean;
|
|
}
|
|
|
|
const ShortcutCard: React.FC<ShortcutCardProps> = ({
|
|
id,
|
|
title,
|
|
icon,
|
|
route,
|
|
gradient,
|
|
visible = true
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
|
|
if (!visible) return null;
|
|
|
|
const handleClick = () => {
|
|
navigate(route);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
id={id}
|
|
onClick={handleClick}
|
|
className={`
|
|
relative group cursor-pointer
|
|
w-full sm:w-[230px] h-[120px]
|
|
rounded-lg overflow-hidden
|
|
transform transition-all duration-300 ease-in-out
|
|
hover:-translate-y-2 hover:shadow-2xl
|
|
border border-gray-200 hover:border-gray-800
|
|
${gradient}
|
|
`}
|
|
>
|
|
{/* Background overlay for better text visibility */}
|
|
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-all duration-300" />
|
|
|
|
{/* Content */}
|
|
<div className="relative h-full flex flex-col items-center justify-end p-4">
|
|
{/* Icon */}
|
|
<div className="mb-2 transform transition-transform duration-300 group-hover:scale-110">
|
|
<div className="text-white text-4xl drop-shadow-lg">
|
|
{icon}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<p className="text-white text-center font-bold text-base sm:text-lg drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
|
|
{title}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Hover glow effect */}
|
|
<div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
|
|
<div className="absolute inset-0 bg-gradient-to-t from-white/10 to-transparent" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ShortcutCard;
|
|
|