62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { Upload, FileDown, Clock, Settings } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
const actions = [
|
||
|
|
{
|
||
|
|
label: "Upload Documents",
|
||
|
|
description: "PDF, JPG, PNG formats",
|
||
|
|
href: "/upload",
|
||
|
|
icon: Upload,
|
||
|
|
accent: "text-primary bg-primary/10",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "Export Results",
|
||
|
|
description: "TXT, DOCX, CSV formats",
|
||
|
|
href: "/#",
|
||
|
|
icon: FileDown,
|
||
|
|
accent: "text-emerald-600 bg-emerald-500/10 dark:text-emerald-400",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "Recent Files",
|
||
|
|
description: "View processing history",
|
||
|
|
href: "/",
|
||
|
|
icon: Clock,
|
||
|
|
accent: "text-amber-600 bg-amber-500/10 dark:text-amber-400",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "Settings",
|
||
|
|
description: "Customize your experience",
|
||
|
|
href: "/settings",
|
||
|
|
icon: Settings,
|
||
|
|
accent: "text-violet-600 bg-violet-500/10 dark:text-violet-400",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export function QuickActions() {
|
||
|
|
return (
|
||
|
|
<div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4">
|
||
|
|
{actions.map((action) => {
|
||
|
|
const Icon = action.icon;
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={action.label}
|
||
|
|
href={action.href}
|
||
|
|
className="glass-card group flex items-center gap-3 rounded-2xl p-4 transition-all hover:scale-[1.02] hover:shadow-lg sm:p-5"
|
||
|
|
>
|
||
|
|
<div className={cn("flex size-10 shrink-0 items-center justify-center rounded-xl transition-transform group-hover:scale-110", action.accent)}>
|
||
|
|
<Icon className="size-5" />
|
||
|
|
</div>
|
||
|
|
<div className="min-w-0">
|
||
|
|
<p className="text-sm font-semibold truncate">{action.label}</p>
|
||
|
|
<p className="text-xs text-muted-foreground hidden sm:block">{action.description}</p>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|