68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
interface FlipCardLink {
|
|
id: string;
|
|
label: string;
|
|
route: string;
|
|
visible?: boolean;
|
|
}
|
|
|
|
interface FlipCardProps {
|
|
title: string;
|
|
links: FlipCardLink[];
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
const FlipCard: React.FC<FlipCardProps> = ({ title, links, icon }) => {
|
|
const navigate = useNavigate();
|
|
|
|
const visibleLinks = links.filter(link => link.visible !== false);
|
|
|
|
return (
|
|
<div className="w-full sm:w-[230px] h-[120px] perspective-1000 m-2.5">
|
|
<div className="relative w-full h-full transition-transform duration-700 transform-style-3d group hover:rotate-y-180">
|
|
{/* Front Side */}
|
|
<div className="absolute w-full h-full backface-hidden rounded-lg overflow-hidden bg-gradient-to-br from-blue-600 to-blue-800 shadow-lg">
|
|
<div className="absolute inset-0 bg-black/20" />
|
|
<div className="relative h-full flex flex-col items-center justify-end p-4">
|
|
<div className="mb-2 text-white text-4xl drop-shadow-lg">
|
|
{icon}
|
|
</div>
|
|
<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>
|
|
</div>
|
|
|
|
{/* Back Side */}
|
|
<div className="absolute w-full h-full backface-hidden rotate-y-180 rounded-lg overflow-hidden bg-gradient-to-br from-blue-600/90 to-blue-800/90 backdrop-blur-sm shadow-2xl">
|
|
<div className="h-full flex flex-col items-center justify-center p-4 gap-2">
|
|
{visibleLinks.map((link) => (
|
|
<button
|
|
key={link.id}
|
|
id={link.id}
|
|
onClick={() => navigate(link.route)}
|
|
className="
|
|
w-full px-4 py-2
|
|
text-white font-semibold text-sm
|
|
bg-white/10 hover:bg-white/20
|
|
rounded-md
|
|
transition-all duration-200
|
|
hover:scale-105 hover:shadow-lg
|
|
border border-white/20 hover:border-white/40
|
|
"
|
|
>
|
|
{link.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FlipCard;
|
|
|