99 lines
5.2 KiB
TypeScript
99 lines
5.2 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import React from 'react';
|
|
|
|
interface RecurringTasksManagerProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
tasks: any[];
|
|
}
|
|
|
|
export default function RecurringTasksManager({ isOpen, onClose, tasks }: RecurringTasksManagerProps) {
|
|
if (!isOpen) return null;
|
|
|
|
// Filter tasks that are recurring
|
|
const recurringTasks = tasks.filter(t => t.isRecurring);
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" onClick={onClose}>
|
|
<div className="bg-white rounded-lg shadow-2xl w-[800px] max-w-full h-[600px] flex flex-col" onClick={e => e.stopPropagation()}>
|
|
<div className="p-6 flex items-center justify-between border-b border-gray-100">
|
|
<h2 className="text-xl font-bold text-gray-800">Recurring to-dos</h2>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 font-bold text-xl">
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-8">
|
|
{recurringTasks.length === 0 ? (
|
|
<div className="flex flex-col items-start max-w-lg">
|
|
<p className="text-gray-600 mb-6">
|
|
You don't have any recurring to-dos yet.
|
|
</p>
|
|
|
|
<button className="bg-[#333] text-white px-4 py-2 rounded text-sm font-medium flex items-center gap-2 hover:bg-black transition-colors mb-8">
|
|
<span>+</span> Recurring to-do
|
|
</button>
|
|
|
|
<p className="text-gray-800 font-medium mb-4">Or, type a frequency to the end of a to-do.</p>
|
|
|
|
<div className="bg-gray-100 p-8 rounded mb-8 w-full flex items-center justify-center">
|
|
<div className="bg-white p-6 shadow-sm rounded text-center w-64">
|
|
<div className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">OCT 5, 2023</div>
|
|
<div className="text-xl font-bold text-gray-900 uppercase tracking-wider mb-4">THURSDAY</div>
|
|
<div className="h-6 w-1 bg-black animate-pulse mx-auto"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-8 text-sm w-full">
|
|
<div>
|
|
<h4 className="italic text-gray-500 mb-2">Frequencies:</h4>
|
|
<ul className="text-gray-500 italic space-y-1">
|
|
<li>every day</li>
|
|
<li>every week</li>
|
|
<li>every other week</li>
|
|
<li>every month</li>
|
|
<li>every year</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="italic text-gray-500 mb-2">Examples:</h4>
|
|
<ul className="text-gray-500 italic space-y-1">
|
|
<li>Brush teeth every day</li>
|
|
<li>Management meeting every week</li>
|
|
<li>Piano lessons every other week</li>
|
|
<li>Pay rent every month</li>
|
|
<li>Garret's birthday every year</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{recurringTasks.map(task => (
|
|
<div key={task.id} className="flex items-center justify-between p-4 bg-gray-50 rounded border border-gray-100">
|
|
<div>
|
|
<div className="font-medium text-gray-900">{task.title}</div>
|
|
<div className="text-xs text-gray-500 mt-1">
|
|
Repeats every {task.recurrenceInterval} {task.recurrenceUnit}
|
|
</div>
|
|
</div>
|
|
<button className="text-red-500 text-sm hover:underline">Stop Details</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-gray-100 flex justify-end">
|
|
<button
|
|
onClick={onClose}
|
|
className="w-10 h-10 bg-[#333] rounded-full flex items-center justify-center text-white hover:bg-black transition-colors text-xl font-bold"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|