- Integrated lucide-react icons for QuickActions, replacing SVGs with Plus, LayoutGrid, Calendar, and Settings icons for improved UI consistency. - Updated package.json and package-lock.json to include lucide-react dependency. - Marked the Gravatar task as complete in TODO.md for better tracking of UI/UX improvements.
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { ActionCard } from '@/components/ui';
|
|
import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
|
|
import { CreateTaskData } from '@/clients/tasks-client';
|
|
import { Plus, LayoutGrid, Calendar, Settings } from 'lucide-react';
|
|
|
|
interface QuickActionsProps {
|
|
onCreateTask: (data: CreateTaskData) => Promise<void>;
|
|
}
|
|
|
|
export function QuickActions({ onCreateTask }: QuickActionsProps) {
|
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
|
|
|
const handleCreateTask = async (data: CreateTaskData) => {
|
|
await onCreateTask(data);
|
|
setIsCreateModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<ActionCard
|
|
title="Nouvelle Tâche"
|
|
description="Créer une nouvelle tâche"
|
|
icon={<Plus className="w-6 h-6" />}
|
|
onClick={() => setIsCreateModalOpen(true)}
|
|
variant="primary"
|
|
/>
|
|
|
|
<ActionCard
|
|
title="Kanban Board"
|
|
description="Gérer les tâches"
|
|
icon={<LayoutGrid className="w-6 h-6" />}
|
|
href="/kanban"
|
|
variant="secondary"
|
|
/>
|
|
|
|
<ActionCard
|
|
title="Daily"
|
|
description="Checkboxes quotidiennes"
|
|
icon={<Calendar className="w-6 h-6" />}
|
|
href="/daily"
|
|
variant="secondary"
|
|
/>
|
|
|
|
<ActionCard
|
|
title="Paramètres"
|
|
description="Configuration"
|
|
icon={<Settings className="w-6 h-6" />}
|
|
href="/settings"
|
|
variant="secondary"
|
|
/>
|
|
</div>
|
|
|
|
<CreateTaskForm
|
|
isOpen={isCreateModalOpen}
|
|
onClose={() => setIsCreateModalOpen(false)}
|
|
onSubmit={handleCreateTask}
|
|
loading={false}
|
|
/>
|
|
</>
|
|
);
|
|
}
|