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

dashboard css

Browse Source
This commit is contained in:
IluaAir
2025-10-13 23:24:51 +03:00
parent 80b40ce1c0
commit c647f837e8
3 changed files with 166 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
'use client';
import '../neon.css';
import './dashboard.css';
import { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
import { Home, Settings, Bell } from 'lucide-react';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
@@ -12,14 +13,14 @@ const menuItems = [
export default function Dashboard() {
return (
<div className="flex min-h-screen bg-background">
<div className="dashboard-container">
{/* Navigation Rail - Material Design 3 */}
<aside className="w-20 bg-card/50 flex flex-col items-center py-4 gap-4">
<aside className="dashboard-sidebar">
{/* Avatar with large M3 container */}
<div className="mb-2">
<Avatar className="size-14 rounded-2xl">
<div className="dashboard-avatar-container">
<Avatar className="dashboard-avatar">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback className="rounded-2xl">CN</AvatarFallback>
<AvatarFallback className="dashboard-avatar-fallback">CN</AvatarFallback>
</Avatar>
</div>
@@ -34,47 +35,50 @@ export default function Dashboard() {
</aside>
{/* Main Content Area */}
<main className="flex-1 p-6 bg-background">
<div className="max-w-7xl mx-auto space-y-6">
<h1 className="text-3xl font-bold">
<main className="dashboard-main">
<div className="dashboard-content">
<h1 className="dashboard-header">
<span className="sign-pink-inline">Task&</span>
<span className="sign-inline">Coffee</span>
</h1>
{/* Material Design 3 Cards Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="dashboard-cards-grid">
{/* Filled Card */}
<div className="bg-card p-6 rounded-3xl shadow-sm">
<h3 className="text-lg font-semibold mb-2">Filled Card</h3>
<p className="text-muted-foreground text-sm">
<div className="dashboard-card-filled">
<h3 className="dashboard-card-title">Filled Card</h3>
<p className="dashboard-card-text">
Material Design 3 filled container with large rounded corners.
</p>
</div>
{/* Elevated Card */}
<div className="bg-card p-6 rounded-3xl shadow-lg hover:shadow-xl transition-shadow">
<h3 className="text-lg font-semibold mb-2">Elevated Card</h3>
<p className="text-muted-foreground text-sm">
<div className="dashboard-card-elevated">
<h3 className="dashboard-card-title">Elevated Card</h3>
<p className="dashboard-card-text">
Elevated surface with prominent shadow for hierarchy.
</p>
</div>
{/* Outlined Card */}
<div className="bg-background border-2 border-border p-6 rounded-3xl">
<h3 className="text-lg font-semibold mb-2">Outlined Card</h3>
<p className="text-muted-foreground text-sm">
<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>
{/* Example Section with M3 styling */}
<div className="bg-card/30 p-6 rounded-3xl">
<h2 className="text-xl font-semibold mb-4">Surface Container</h2>
<p className="text-muted-foreground">
{/* Surface Container - takes 3/4 of remaining height */}
<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>
{/* Spacer - takes 1/4 of remaining height */}
<div className="dashboard-spacer"></div>
</div>
</main>
</div>