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>

81
taskncoffee-app/src/pages/dashboard.css
View File

@@ -134,6 +134,85 @@
/* Spacer */
.dashboard-spacer {
flex: 1;
flex: 0.5;
}
/* Weekly View */
.dashboard-week-grid {
display: flex;
gap: 1rem;
height: 100%;
overflow-x: auto;
padding: 0.6rem;
}
.dashboard-day-column {
flex: 1;
min-width: 180px;
display: flex;
flex-direction: column;
background: var(--color-background);
border-radius: 1rem;
padding: 1rem;
transition: all 0.3s ease;
}
.dashboard-day-column.today {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border: 2px solid var(--color-primary);
}
.dashboard-day-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.75rem;
text-align: center;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
}
.dashboard-day-column.today .dashboard-day-title {
color: var(--color-primary);
}
.dashboard-tasks-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
overflow-y: auto;
}
.dashboard-task-card {
background: var(--color-card);
padding: 0.75rem;
border-radius: 0.5rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
font-size: 0.875rem;
transition: transform 0.2s;
}
.dashboard-task-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.dashboard-task-card.completed {
opacity: 0.6;
text-decoration: line-through;
}
.dashboard-task-title {
margin: 0;
font-size: 0.875rem;
color: var(--color-foreground);
}
.dashboard-no-tasks {
color: var(--color-muted-foreground);
font-size: 0.875rem;
text-align: center;
padding: 2rem 0;
font-style: italic;
}