| 1 | import { Plus, Receipt, FileText, HelpCircle } from "lucide-react"; |
| 2 | import { Button } from "@/components/ui/button"; |
| 3 | |
| 4 | const actions = [ |
| 5 | { label: "Submit Expense", icon: Plus, primary: true }, |
| 6 | { label: "Upload Receipt", icon: Receipt, primary: false }, |
| 7 | { label: "View Reports", icon: FileText, primary: false }, |
| 8 | { label: "Get Help", icon: HelpCircle, primary: false }, |
| 9 | ]; |
| 10 | |
| 11 | const QuickActions = () => { |
| 12 | return ( |
| 13 | <section className="py-12 bg-background"> |
| 14 | <div className="container"> |
| 15 | <div className="max-w-4xl mx-auto"> |
| 16 | <h2 className="text-xl md:text-2xl font-bold text-foreground mb-6 animate-fade-up"> |
| 17 | Quick actions |
| 18 | </h2> |
| 19 | |
| 20 | <div className="grid grid-cols-2 md:grid-cols-4 gap-4 animate-fade-up animation-delay-100"> |
| 21 | {actions.map((action) => { |
| 22 | const Icon = action.icon; |
| 23 | |
| 24 | return ( |
| 25 | <Button |
| 26 | key={action.label} |
| 27 | variant={action.primary ? "default" : "outline"} |
| 28 | className={`h-auto py-6 flex flex-col gap-3 ${ |
| 29 | action.primary |
| 30 | ? 'bg-primary text-primary-foreground hover:bg-primary/90' |
| 31 | : 'hover:border-primary/50 hover:bg-primary/5' |
| 32 | }`} |
| 33 | > |
| 34 | <Icon className="w-6 h-6" /> |
| 35 | <span className="text-sm font-medium">{action.label}</span> |
| 36 | </Button> |
| 37 | ); |
| 38 | })} |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | </section> |
| 43 | ); |
| 44 | }; |
| 45 | |
| 46 | export default QuickActions; |