Skip to content

Commit 7028114

Browse files
shadowctrlshadowctrl
committed
Dashboard UI
1 parent b3babff commit 7028114

File tree

3 files changed

+137
-18
lines changed

3 files changed

+137
-18
lines changed

‎src/app/globals.css

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,17 +128,19 @@ body {
128128
justify-content: space-between;
129129
align-items: flex-start;
130130
color: white;
131+
gap: 1vw;
131132
}
132133

133134
.hero-head-cards div {
134135
border: 1px solid rgba(255, 255, 255, 0.2);
135136
padding: 2vh 1vw;
136137
border-radius: 0.5vw;
137-
width: 20vw;
138+
width: 100%;
138139
height: 15vh;
139140
display: flex;
140141
flex-direction: column;
141142
gap: 1vh;
143+
border-left: 5px solid white;
142144
}
143145

144146
.hero-head-cards h2 {
@@ -161,7 +163,7 @@ body {
161163
.hero-chart {
162164
border: 1px solid rgb(255, 255, 255, 0.2);
163165
border-radius: 0.5vw;
164-
width: 50%;
166+
width: 65%;
165167
display: flex;
166168
flex-direction: column;
167169
justify-content: center;
@@ -173,3 +175,82 @@ body {
173175
padding-bottom: 2vh;
174176
font-weight: 600;
175177
}
178+
179+
.hero-section2 {
180+
display: flex;
181+
gap: 1vw;
182+
}
183+
184+
.hero-recents {
185+
border: 1px solid rgba(255, 255, 255, 0.2);
186+
width: 100%;
187+
height: 60vh;
188+
border-radius: 0.5vw;
189+
color: white;
190+
padding: 2vh 1vw;
191+
display: flex;
192+
flex-direction: column;
193+
gap: 2vh;
194+
overflow-x: hidden;
195+
overflow-y: auto;
196+
}
197+
198+
.hero-recents .recents-head {
199+
text-align: center;
200+
font-weight: 800;
201+
color: black;
202+
background-color: white;
203+
border-radius: 1vw;
204+
position: relative;
205+
width: 100%;
206+
}
207+
208+
.recents-components {
209+
display: flex;
210+
flex-direction: column;
211+
gap: 2vh;
212+
}
213+
.recents-container {
214+
display: flex;
215+
justify-content: space-between;
216+
width: 100%;
217+
padding: 0 1vw;
218+
}
219+
220+
.recents-container1 {
221+
width: 100%;
222+
padding-bottom: 1.5vh;
223+
padding: 0 0.5vw;
224+
display: flex;
225+
flex-direction: column;
226+
gap: 0vh;
227+
}
228+
229+
.recents-container1 div {
230+
position: relative;
231+
padding: 2vh 0;
232+
}
233+
.recents-container1 div::after {
234+
content: "";
235+
position: absolute;
236+
inset: 0;
237+
width: 100%;
238+
border-bottom: 1px double rgb(255, 255, 255, 0.2);
239+
}
240+
241+
.recents-components h2 {
242+
font-weight: 500;
243+
font-size: 17px;
244+
}
245+
.recent-item {
246+
display: flex;
247+
justify-content: space-between;
248+
color: rgba(255, 255, 255, 0.5);
249+
}
250+
251+
.success {
252+
color: rgb(0, 255, 0, 0.8);
253+
}
254+
.failure {
255+
color: rgb(255, 0, 0, 1);
256+
}

‎src/app/page.tsx

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,19 @@ const Timer = dynamic(() => import("@/lib/timer"), {
55
loading: () => <p>Loading...</p>,
66
});
77

8+
const data = [
9+
{
10+
content: "Hello",
11+
status: "success",
12+
},
13+
{ content: "hi", status: "success" },
14+
{ content: "hello", status: "success" },
15+
{ content: "hi", status: "failed" },
16+
{ content: "hello", status: "success" },
17+
{ content: "hi", status: "success" },
18+
];
19+
20+
const status = [{ content: "hello" }, { content: "hi" }];
821
export default function Home() {
922
return (
1023
<div className="App-main">
@@ -32,9 +45,34 @@ export default function Home() {
3245
<p>0</p>
3346
</div>
3447
</div>
35-
<div className="hero-chart">
36-
<h2> Overview</h2>
37-
<Charts />
48+
<div className="hero-section2">
49+
<div className="hero-chart">
50+
<h2> Overview</h2>
51+
<Charts />
52+
</div>
53+
<div className="hero-recents">
54+
<h2 className="recents-head">Recent Messages</h2>
55+
<div className="recents-components">
56+
<div className="recents-container">
57+
<h2>content</h2>
58+
<h2>status</h2>
59+
</div>
60+
<div className="recents-container1">
61+
{data.map((value, index) => (
62+
<div key={index} className="recent-item">
63+
<p>{value.content}</p>
64+
<p
65+
className={
66+
value.status == "success" ? "success" : "failure"
67+
}
68+
>
69+
{value.status}
70+
</p>
71+
</div>
72+
))}
73+
</div>
74+
</div>
75+
</div>
3876
</div>
3977
</div>
4078
);

‎src/components/charts.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@ import {
1111

1212
const Charts = () => {
1313
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 },
14+
{ month: "January", messages: 1186 },
15+
{ month: "February", messages: 1305 },
16+
{ month: "March", messages: 2137 },
17+
{ month: "April", messages: 173 },
18+
{ month: "May", messages: 2109 },
19+
{ month: "June", messages: 1214 },
20+
{ month: "July", messages: 2114 },
21+
{ month: "August", messages: 5100 },
22+
{ month: "September", messages: 1800 },
23+
{ month: "October", messages: 4130 },
24+
{ month: "November", messages: 1700 },
25+
{ month: "December", messages: 2145 },
2626
];
2727

2828
const chartConfig = {
@@ -33,7 +33,7 @@ const Charts = () => {
3333
} satisfies ChartConfig;
3434

3535
return (
36-
<ChartContainer config={chartConfig} className="w-[45vw] h-[50vh]">
36+
<ChartContainer config={chartConfig} className="w-[60vw] h-[50vh]">
3737
<BarChart accessibilityLayer data={chartData}>
3838
<XAxis
3939
dataKey="month"

0 commit comments

Comments
 (0)