gitark/taskncoffee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance documentation and styling system with Mirage Palette, Material Design 3, and Neon accents. Add comprehensive style guide, color palette, and cheatsheet for improved developer experience.

Browse Source
This commit is contained in:
IluaAir
2025-10-27 23:11:11 +03:00
parent cad5cfa780
commit 9820437556
11 changed files with 1415 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
taskncoffee-app/src/components/Calendar.jsx
View File

@@ -1,6 +1,9 @@
import { useState, useEffect } from 'react';
import { getUserTasks } from '@/api/users.service';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import styles from '@/lib/styles';
import { Plus } from 'lucide-react';
export default function Calendar() {
const [tasksFromBackend, setTasksFromBackend] = useState([]);
@@ -77,53 +80,108 @@ export default function Calendar() {
if (loading) {
return (
<div className="dashboard-surface-container">
<div className={cn(styles.card.elevated, "flex-[3]")}>
<div className="flex items-center justify-center p-8">
<p className="text-lg">Loading tasks...</p>
<p className={styles.text.body}>Loading tasks...</p>
</div>
</div>
);
}
return (
<div className="dashboard-surface-container">
<div className="dashboard-week-grid">
{daysOfWeek.map((day, index) => {
<div className={cn(
"bg-card/30 backdrop-blur-md p-6 rounded-2xl flex-[3]",
styles.utility.transitionSlow
)}>
<div className="flex gap-4 h-full overflow-x-auto px-2">
{daysOfWeek.map((day) => {
const isToday = day.fullDate.toDateString() === today.toDateString();
return (
<div
key={day.name}
className={`dashboard-day-column ${isToday ? 'today' : ''} dashboard-card-filled`}
className={cn(
"flex-1 min-w-[180px] flex flex-col rounded-lg p-4 transition-all duration-300",
isToday
? "bg-primary/10 border-2 border-primary neon-glow-soft"
: "bg-background border border-border"
)}
>
<div className="dashboard-day-header">
<h3 className="dashboard-day-title">{day.name}</h3>
<p className="dashboard-day-date">{day.month} {day.date}</p>
{/* Header */}
<div className="text-center pb-3 border-b border-border mb-3">
<h3 className={cn(
styles.text.small,
"font-semibold mb-1",
isToday && "text-primary font-bold"
)}>
{day.name}
</h3>
<p className={cn(
styles.text.smallMuted,
isToday && "text-primary font-semibold"
)}>
{day.month} {day.date}
</p>
</div>
<div className="dashboard-tasks-container">
{
day.tasks.map((task) => (
<div
key={task.id}
className={`dashboard-task-card ${task.completed ? 'completed' : ''} priority-${task.priority}`}
>
<div className="dashboard-task-header">
<span className={`dashboard-task-priority ${task.priority}`}></span>
<p className="dashboard-task-title">{task.title}</p>
</div>
{/* Tasks */}
<div className="flex-1 flex flex-col gap-2 overflow-y-auto pt-1">
{day.tasks.map((task) => (
<div
key={task.id}
className={cn(
styles.card.task,
"neon-glow-soft",
task.completed && "opacity-60 line-through"
)}
>
<div className="flex items-center gap-2">
{/* Priority indicator */}
<span
className={cn(
"w-1 h-1 rounded-full flex-shrink-0",
task.priority === 'low' && "bg-green-500",
task.priority === 'medium' && "bg-yellow-500",
task.priority === 'high' && "bg-orange-500",
task.priority === 'critical' && "bg-red-500"
)}
/>
<p className={cn(styles.text.small, "flex-1")}>
{task.title}
</p>
</div>
))
}
<Button variant="elevated" onClick={() => {
console.log('Add task clicked');
}}>
+
</Button>
</div>
))}
{/* Empty state */}
{day.tasks.length === 0 && (
<p className={cn(
styles.text.smallMuted,
"text-center py-8 italic"
)}>
No tasks
</p>
)}
{/* Add button */}
<button
className={cn(
styles.button.icon,
"mt-2 w-full flex items-center justify-center gap-2",
styles.utility.glowSoft
)}
onClick={() => {
console.log('Add task clicked for', day.name);
}}
>
<Plus className="w-4 h-4" />
<span className="text-sm">Add Task</span>
</button>
</div>
</div>
);
})}
</div>
</div>
)
);
}