dashboard css
This commit is contained in:
IluaAir
@@ -1,6 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
|
||||
@@ -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>
|
||||
|
||||
139
taskncoffee-app/src/pages/dashboard.css
Normal file
139
taskncoffee-app/src/pages/dashboard.css
Normal file
@@ -0,0 +1,139 @@
|
||||
/* Dashboard Layout */
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
/* Navigation Rail - Material Design 3 */
|
||||
.dashboard-sidebar {
|
||||
width: 80px;
|
||||
background: color-mix(in srgb, var(--color-card) 50%, transparent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-avatar-container {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dashboard-avatar {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-avatar-fallback {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Main Content Area */
|
||||
.dashboard-main {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
background: var(--color-background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
max-width: 80rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.dashboard-header {
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Material Design 3 Cards Grid */
|
||||
.dashboard-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.dashboard-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.dashboard-cards-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* M3 Card Variants */
|
||||
.dashboard-card-filled {
|
||||
background: var(--color-card);
|
||||
padding: 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
}
|
||||
|
||||
.dashboard-card-elevated {
|
||||
background: var(--color-card);
|
||||
padding: 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.dashboard-card-elevated:hover {
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.dashboard-card-outlined {
|
||||
background: var(--color-background);
|
||||
border: 2px solid var(--color-border);
|
||||
padding: 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
.dashboard-card-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dashboard-card-text {
|
||||
color: var(--color-muted-foreground);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Surface Container */
|
||||
.dashboard-surface-container {
|
||||
background: color-mix(in srgb, var(--color-card) 30%, transparent);
|
||||
padding: 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.dashboard-surface-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-surface-text {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
/* Spacer */
|
||||
.dashboard-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user