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

tasks

Browse Source
This commit is contained in:
IluaAir
2025-10-15 10:07:28 +03:00
parent c647f837e8
commit b816906c5c
2 changed files with 126 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
taskncoffee-app/src/pages/Dashboard.jsx
View File

@@ -12,6 +12,25 @@ const menuItems = [
];
export default function Dashboard() {
const daysOfWeek = [
{
name: 'Monday',
tasks: [
{ id: 1, title: 'Task 1 super task enable', completed: false },
{ id: 2, title: 'Task 2', completed: false },
{ id: 3, title: 'Task 3', completed: true }
]
},
{ name: 'Tuesday', tasks: [] },
{ name: 'Wednesday', tasks: [] },
{ name: 'Thursday', tasks: [] },
{ name: 'Friday', tasks: [] },
{ name: 'Saturday', tasks: [] },
{ name: 'Sunday', tasks: [] }
];
const today = new Date().getDay();
return (
<div className="dashboard-container">
{/* Navigation Rail - Material Design 3 */}
@@ -43,8 +62,7 @@ export default function Dashboard() {
</h1>
{/* Material Design 3 Cards Grid */}
<div className="dashboard-cards-grid">
{/* Filled Card */}
{/* <div className="dashboard-cards-grid">
<div className="dashboard-card-filled">
<h3 className="dashboard-card-title">Filled Card</h3>
<p className="dashboard-card-text">
@@ -52,7 +70,6 @@ export default function Dashboard() {
</p>
</div>
{/* Elevated Card */}
<div className="dashboard-card-elevated">
<h3 className="dashboard-card-title">Elevated Card</h3>
<p className="dashboard-card-text">
@@ -60,24 +77,42 @@ export default function Dashboard() {
</p>
</div>
{/* Outlined Card */}
<div className="dashboard-card-outlined">
<h3 className="dashboard-card-title">Outlined Card</h3>
<p className="dashboard-card-text">
Outlined container with subtle border emphasis.
</p>
</div>
</div>
</div> */}
{/* Surface Container - takes 3/4 of remaining height */}
{/* Surface Container - Weekly View */}
<div className="dashboard-surface-container">
<h2 className="dashboard-surface-title">Surface Container</h2>
<p className="dashboard-surface-text">
Material Design 3 emphasizes larger border radius (rounded-3xl) and layered surfaces.
</p>
<div className="dashboard-week-grid border-1">
{daysOfWeek.map((day, index) => (
<div
key={day.name}
className={`dashboard-day-column ${index === today ? 'today' : ''} dashboard-card-filled`}
>
<h3 className="dashboard-day-title">{day.name}</h3>
<div className="dashboard-tasks-container">
{day.tasks.length > 0 ? (
day.tasks.map((task) => (
<div
key={task.id}
className={`dashboard-task-card ${task.completed ? 'completed' : ''}`}
>
<p className="dashboard-task-title">{task.title}</p>
</div>
))
) : (
<p className="dashboard-no-tasks">No tasks</p>
)}
</div>
</div>
))}
</div>
</div>
{/* Spacer - takes 1/4 of remaining height */}
<div className="dashboard-spacer"></div>
</div>
</main>