Skip to content

Commit 3918860

Browse files
xhulia028xhulia028
committed
ui chnages
1 parent 1bd12ec commit 3918860

File tree

6 files changed

+119
-11
lines changed

6 files changed

+119
-11
lines changed

‎client/package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
"dependencies": {
1414
"@openapitools/openapi-generator-cli": "^2.20.2",
1515
"@radix-ui/react-alert-dialog": "^1.1.14",
16+
"@radix-ui/react-avatar": "^1.1.10",
1617
"@radix-ui/react-dialog": "^1.1.14",
18+
"@radix-ui/react-dropdown-menu": "^2.1.15",
1719
"@radix-ui/react-popover": "^1.1.14",
1820
"@radix-ui/react-select": "^2.2.5",
1921
"@radix-ui/react-separator": "^1.1.7",

‎client/src/app/dashboard/page.tsx‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client";
2-
import React from "react";
2+
import React, { useState } from "react";
33
import ProjectCard from "@/components/project-card/ProjectCard";
44
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
55
import {
@@ -8,6 +8,9 @@ import {
88
} from "@/app/dashboard/whiteboardApi";
99
import CreateProjectCard from "@/components/project-card/CreateProjectCard";
1010
import { useRouter } from "next/navigation";
11+
import DashboardSidebar from "@/components/dashboard-sidebar/DashboardSidebar";
12+
import Header from "@/components/header/Header";
13+
import FilterBar from "@/components/filters/Filterbar";
1114

1215
const Dashboard = () => {
1316
const router = useRouter();
@@ -32,17 +35,30 @@ const Dashboard = () => {
3235
};
3336

3437
return (
35-
<div className="min-h-screen text-white">
36-
<div className="p-6">
37-
<div className="mb-8">
38-
<h1 className="text-xl font-medium">My boards</h1>
39-
</div>
38+
<div className="min-h-screen bg-white flex">
39+
<DashboardSidebar />
40+
41+
<div className="flex flex-col flex-1 ml-64 h-screen">
42+
<Header />
43+
44+
<div className="flex flex-col flex-1 p-6 overflow-hidden">
45+
<div className="mb-6">
46+
<h2 className="text-xl font-medium text-gray-900 mb-4">
47+
Your Boards
48+
</h2>
49+
<FilterBar />
50+
</div>
4051

41-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
42-
<CreateProjectCard createProject={handleCreateProject} />
43-
{projects.map((project) => (
44-
<ProjectCard key={project.id} project={project} />
45-
))}
52+
<div className="flex-1 mx-8 overflow-y-auto">
53+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
54+
<CreateProjectCard createProject={handleCreateProject} />
55+
{[...projects]
56+
.sort((a, b) => new Date(b.lastEditedTime).getTime() - new Date(a.lastEditedTime).getTime())
57+
.map((project) => (
58+
<ProjectCard key={project.id} project={project} />
59+
))}
60+
</div>
61+
</div>
4662
</div>
4763
</div>
4864
</div>

‎client/src/components/dashboard-sidebar/DashboardSidebar.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import UserDropdown from "@/components/UserDropdown/UserDropdown";
2+
import { Clock, Home, Star } from "lucide-react";
3+
import React from "react";
4+
5+
export default function DashboardSidebar() {
6+
return (
7+
<div className="fixed left-0 top-0 h-full w-64 bg-gray-50 border-r border-gray-200 z-10">
8+
<div className="p-4">
9+
<div className="flex items-center gap-2 mb-6">
10+
<UserDropdown />
11+
</div>
12+
13+
<nav className="space-y-1">
14+
<div className="flex items-center gap-3 px-3 py-2 text-gray-900 bg-blue-50 rounded-md">
15+
<Home className="w-4 h-4" />
16+
<span className="text-sm font-medium">Home</span>
17+
</div>
18+
<div className="flex items-center gap-3 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md cursor-pointer">
19+
<Clock className="w-4 h-4" />
20+
<span className="text-sm">Recent</span>
21+
</div>
22+
<div className="flex items-center gap-3 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md cursor-pointer">
23+
<Star className="w-4 h-4" />
24+
<span className="text-sm">Starred</span>
25+
</div>
26+
</nav>
27+
</div>
28+
</div>
29+
);
30+
}

‎client/src/components/filters/Filterbar.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
Select,
3+
SelectContent,
4+
SelectItem,
5+
SelectTrigger,
6+
SelectValue,
7+
} from "@/components/ui/select";
8+
import React from "react";
9+
10+
export default function FilterBar() {
11+
return (
12+
<div className="flex items-center gap-4 mb-6">
13+
<div className="flex items-center gap-2">
14+
<span className="text-sm text-gray-600">Filter by</span>
15+
<Select defaultValue="all-boards">
16+
<SelectTrigger className="w-36">
17+
<SelectValue />
18+
</SelectTrigger>
19+
<SelectContent>
20+
<SelectItem value="all-boards">All boards</SelectItem>
21+
<SelectItem value="my-boards">My boards</SelectItem>
22+
<SelectItem value="shared">Shared with me</SelectItem>
23+
</SelectContent>
24+
</Select>
25+
</div>
26+
27+
<div className="flex items-center gap-2">
28+
<span className="text-sm text-gray-600">Sort by</span>
29+
<Select defaultValue="last-opened">
30+
<SelectTrigger className="w-36">
31+
<SelectValue />
32+
</SelectTrigger>
33+
<SelectContent>
34+
<SelectItem value="last-opened">Last edited</SelectItem>
35+
<SelectItem value="name">Name</SelectItem>
36+
<SelectItem value="created">Created</SelectItem>
37+
</SelectContent>
38+
</Select>
39+
</div>
40+
</div>
41+
);
42+
}

‎client/src/components/header/Header.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
3+
export default function Header() {
4+
return (
5+
<div className="w-full border-b border-gray-200 bg-white px-6 py-4">
6+
<div className="flex items-center justify-between">
7+
<h1 className="text-3xl font-medium text-gray-900">
8+
AI-Powered Whiteboard
9+
</h1>
10+
</div>
11+
</div>
12+
);
13+
}

0 commit comments

Comments
 (0)