'use client'
import { PlusIcon, PlayIcon, CogIcon, DocumentTextIcon } from '@heroicons/react/24/outline'
export default function QuickActions() {
const actions = [
{
name: 'Create Workflow',
description: 'Start a new automation workflow',
icon: PlusIcon,
color: 'bg-blue-500 hover:bg-blue-600',
action: () => console.log('Create workflow'),
},
{
name: 'Run Task',
description: 'Execute a quick automation task',
icon: PlayIcon,
color: 'bg-green-500 hover:bg-green-600',
action: () => console.log('Run task'),
},
{
name: 'View Logs',
description: 'Check recent activity logs',
icon: DocumentTextIcon,
color: 'bg-yellow-500 hover:bg-yellow-600',
action: () => console.log('View logs'),
},
{
name: 'Settings',
description: 'Configure system settings',
icon: CogIcon,
color: 'bg-gray-500 hover:bg-gray-600',
action: () => console.log('Open settings'),
},
]
return (
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
{actions.map((action) => (
<button
key={action.name}
onClick={action.action}
className={`${action.color} text-white rounded-lg p-4 text-left transition-colors duration-200`}
>
<action.icon className="h-6 w-6 mb-2" />
<h3 className="font-medium text-sm">{action.name}</h3>
<p className="text-xs opacity-90 mt-1">{action.description}</p>
</button>
))}
</div>
)
}
