Skip to content

Commit 390dd57

Browse files
shadowctrlshadowctrl
committed
Dashboard shadcn/ui
1 parent 5447938 commit 390dd57

File tree

8 files changed

+856
-36
lines changed

8 files changed

+856
-36
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@
1717
"async-mutex": "^0.5.0",
1818
"class-variance-authority": "^0.7.0",
1919
"clsx": "^2.1.1",
20-
"lucide-react": "^0.407.0",
20+
"lucide-react": "^0.408.0",
2121
"next": "14.2.5",
2222
"react": "^18",
2323
"react-dom": "^18",
2424
"react-redux": "^9.1.2",
25+
"recharts": "^2.12.7",
2526
"shadcn-ui": "^0.8.0",
2627
"tailwind-merge": "^2.4.0",
2728
"tailwindcss-animate": "^1.0.7"

‎src/app/globals.css

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,27 @@
44
body {
55
background: black;
66
}
7+
8+
/* shadcn ui charts */
9+
@layer base {
10+
:root {
11+
--chart-1: 12 76% 61%;
12+
--chart-2: 173 58% 39%;
13+
--chart-3: 197 37% 24%;
14+
--chart-4: 43 74% 66%;
15+
--chart-5: 27 87% 67%;
16+
}
17+
18+
.dark {
19+
--chart-1: 220 70% 50%;
20+
--chart-2: 160 60% 45%;
21+
--chart-3: 30 80% 55%;
22+
--chart-4: 280 65% 60%;
23+
--chart-5: 340 75% 55%;
24+
}
25+
}
26+
27+
/* default shadcn ui */
728
@layer base {
829
:root {
930
--background: 0 0% 100%;
@@ -70,11 +91,18 @@ body {
7091
}
7192
}
7293

94+
.App-main {
95+
height: 90vh;
96+
display: flex;
97+
flex-direction: column;
98+
justify-content: space-between;
99+
margin: 0vh 3vw;
100+
margin-top: 3vh;
101+
}
73102
.hero-head {
74103
display: flex;
75104
justify-content: space-between;
76105
align-items: center;
77-
padding: 5vh 3vw;
78106
}
79107
.hero-title {
80108
font-size: 3vw;
@@ -94,3 +122,57 @@ body {
94122
.hero-switch {
95123
color: aliceblue;
96124
}
125+
126+
.hero-head-cards {
127+
display: flex;
128+
justify-content: space-between;
129+
align-items: flex-start;
130+
color: white;
131+
}
132+
133+
.hero-head-cards div {
134+
border: 1px solid rgba(255, 255, 255, 0.2);
135+
padding: 2vh 1vw;
136+
border-radius: 0.5vw;
137+
width: 20vw;
138+
height: 15vh;
139+
display: flex;
140+
flex-direction: column;
141+
gap: 1vh;
142+
}
143+
144+
.hero-head-cards h2 {
145+
font-size: small;
146+
color: whitesmoke;
147+
font-weight: 500;
148+
}
149+
.hero-head-cards p {
150+
font-size: 1.5vw;
151+
font-weight: 900;
152+
}
153+
154+
.chart-tooltip {
155+
background-color: rgb(0, 0, 0, 0.8);
156+
backdrop-filter: blur(0.5vw);
157+
color: white;
158+
width: 10vw;
159+
}
160+
161+
.hero-chart {
162+
border: 1px solid rgb(255, 255, 255, 0.2);
163+
border-radius: 0.5vw;
164+
width: 50%;
165+
display: flex;
166+
flex-direction: column;
167+
justify-content: center;
168+
padding-top: 2vh;
169+
}
170+
.hero-chart h2 {
171+
color: white;
172+
padding: 0vh 1.5vw;
173+
padding-bottom: 2vh;
174+
font-weight: 600;
175+
}
176+
.chart-tooltip span {
177+
color: salmon;
178+
}

‎src/app/page.tsx

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,40 @@
11
import dynamic from "next/dynamic";
2-
import ToggleSwitch from "@/components/switch";
3-
2+
import Charts from "@/components/charts";
43
const Timer = dynamic(() => import("@/lib/timer"), {
54
ssr: false,
65
loading: () => <p>Loading...</p>,
76
});
87

98
export default function Home() {
109
return (
11-
<main>
10+
<main className="App-main">
1211
<div className="hero-head">
1312
<h1 className="hero-title">Dashboard</h1>
13+
<h1 className="hero-time">
14+
<Timer />
15+
</h1>
16+
</div>
17+
<div className="hero-head-cards">
1418
<div>
15-
<h1 className="hero-time">
16-
<Timer />
17-
</h1>
18-
<ToggleSwitch />
19+
<h2 className="hero-card-title">Total Messages</h2>
20+
<p>10000</p>
1921
</div>
22+
<div>
23+
<h2 className="hero-card-title">Error Rates</h2>
24+
<p>0</p>
25+
</div>
26+
<div>
27+
<h2 className="hero-card-title">Last Message ID</h2>
28+
<p>0</p>
29+
</div>
30+
<div>
31+
<h2 className="hero-card-title">Logs</h2>
32+
<p>0</p>
33+
</div>
34+
</div>
35+
<div className="hero-chart">
36+
<h2> Overview</h2>
37+
<Charts />
2038
</div>
2139
</main>
2240
);

‎src/components/charts.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
"use client";
2+
import { Bar, BarChart, XAxis, YAxis } from "recharts";
3+
import {
4+
ChartConfig,
5+
ChartContainer,
6+
ChartLegend,
7+
ChartLegendContent,
8+
ChartTooltip,
9+
ChartTooltipContent,
10+
} from "./ui/chart";
11+
12+
const Charts = () => {
13+
const chartData = [
14+
{ month: "January", messages: 186 },
15+
{ month: "February", messages: 305 },
16+
{ month: "March", messages: 237 },
17+
{ month: "April", messages: 73 },
18+
{ month: "May", messages: 209 },
19+
{ month: "June", messages: 214 },
20+
{ month: "July", messages: 214 },
21+
{ month: "August", messages: 500 },
22+
{ month: "September", messages: 800 },
23+
{ month: "October", messages: 430 },
24+
{ month: "November", messages: 700 },
25+
{ month: "December", messages: 245 },
26+
];
27+
28+
const chartConfig = {
29+
messages: {
30+
label: "Total Messages",
31+
color: "#ffffff",
32+
},
33+
} satisfies ChartConfig;
34+
35+
return (
36+
<ChartContainer config={chartConfig} className="w-[45vw] h-[50vh]">
37+
<BarChart accessibilityLayer data={chartData}>
38+
<XAxis
39+
dataKey="month"
40+
tickLine={false}
41+
tickMargin={10}
42+
axisLine={false}
43+
tickFormatter={(value) => value.slice(0, 3)}
44+
/>
45+
<YAxis
46+
dataKey="messages"
47+
tickLine={false}
48+
tickMargin={10}
49+
axisLine={false}
50+
/>
51+
<ChartTooltip
52+
content={
53+
<ChartTooltipContent
54+
className="chart-tooltip"
55+
color="white"
56+
indicator="line"
57+
/>
58+
}
59+
/>
60+
<ChartLegend content={<ChartLegendContent className="text-white" />} />
61+
<Bar dataKey={"messages"} radius={4} fill="white" />
62+
</BarChart>
63+
</ChartContainer>
64+
);
65+
};
66+
67+
export default Charts;

‎src/components/switch.tsx

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components/ui/card.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
const Card = React.forwardRef<
6+
HTMLDivElement,
7+
React.HTMLAttributes<HTMLDivElement>
8+
>(({ className, ...props }, ref) => (
9+
<div
10+
ref={ref}
11+
className={cn(
12+
"rounded-lg border bg-card text-card-foreground shadow-sm",
13+
className
14+
)}
15+
{...props}
16+
/>
17+
))
18+
Card.displayName = "Card"
19+
20+
const CardHeader = React.forwardRef<
21+
HTMLDivElement,
22+
React.HTMLAttributes<HTMLDivElement>
23+
>(({ className, ...props }, ref) => (
24+
<div
25+
ref={ref}
26+
className={cn("flex flex-col space-y-1.5 p-6", className)}
27+
{...props}
28+
/>
29+
))
30+
CardHeader.displayName = "CardHeader"
31+
32+
const CardTitle = React.forwardRef<
33+
HTMLParagraphElement,
34+
React.HTMLAttributes<HTMLHeadingElement>
35+
>(({ className, ...props }, ref) => (
36+
<h3
37+
ref={ref}
38+
className={cn(
39+
"text-2xl font-semibold leading-none tracking-tight",
40+
className
41+
)}
42+
{...props}
43+
/>
44+
))
45+
CardTitle.displayName = "CardTitle"
46+
47+
const CardDescription = React.forwardRef<
48+
HTMLParagraphElement,
49+
React.HTMLAttributes<HTMLParagraphElement>
50+
>(({ className, ...props }, ref) => (
51+
<p
52+
ref={ref}
53+
className={cn("text-sm text-muted-foreground", className)}
54+
{...props}
55+
/>
56+
))
57+
CardDescription.displayName = "CardDescription"
58+
59+
const CardContent = React.forwardRef<
60+
HTMLDivElement,
61+
React.HTMLAttributes<HTMLDivElement>
62+
>(({ className, ...props }, ref) => (
63+
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64+
))
65+
CardContent.displayName = "CardContent"
66+
67+
const CardFooter = React.forwardRef<
68+
HTMLDivElement,
69+
React.HTMLAttributes<HTMLDivElement>
70+
>(({ className, ...props }, ref) => (
71+
<div
72+
ref={ref}
73+
className={cn("flex items-center p-6 pt-0", className)}
74+
{...props}
75+
/>
76+
))
77+
CardFooter.displayName = "CardFooter"
78+
79+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

0 commit comments

Comments
 (0)