63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { gsap } from "gsap";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
const actions = [
|
|
{ label: "Receive", path: "/receive", icon: "↓", color: "from-green-500 to-emerald-600" },
|
|
{ label: "Send", path: "/send", icon: "↑", color: "from-blue-500 to-cyan-600" },
|
|
{
|
|
label: "Transfer",
|
|
path: "/transfer",
|
|
icon: "⇄",
|
|
color: "from-purple-500 to-pink-600",
|
|
},
|
|
{
|
|
label: "Approvals",
|
|
path: "/approvals",
|
|
icon: "✓",
|
|
color: "from-orange-500 to-red-600",
|
|
},
|
|
];
|
|
|
|
export function QuickActions() {
|
|
const router = useRouter();
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (containerRef.current) {
|
|
const cards = containerRef.current.children;
|
|
gsap.from(cards, {
|
|
opacity: 0,
|
|
y: 30,
|
|
duration: 0.6,
|
|
stagger: 0.1,
|
|
ease: "power3.out",
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="text-2xl font-semibold mb-4">Quick Actions</h2>
|
|
<div ref={containerRef} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{actions.map((action) => (
|
|
<button
|
|
key={action.path}
|
|
onClick={() => router.push(action.path)}
|
|
className={`relative bg-gradient-to-br ${action.color} rounded-xl p-6 hover:scale-105 transition-transform duration-200 overflow-hidden group`}
|
|
>
|
|
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
|
|
<div className="relative z-10">
|
|
<div className="text-4xl mb-2">{action.icon}</div>
|
|
<div className="text-xl font-semibold">{action.label}</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|