Skip to content

Commit bef5d76

Browse files
IGN03IGN03
committed
commiting changes
1 parent bda6e63 commit bef5d76

6 files changed

Lines changed: 332 additions & 2 deletions

File tree

‎src/components/AppSidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import { NavLink } from "react-router-dom"
1515
import { LayoutDashboard, Calendar, Bell, User, Home } from "lucide-react"
1616

17-
// This replaces your manual links from Sidebar.tsx
17+
// replaces manual links from Sidebar.tsx
1818
const mainItems = [
1919
{ title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
2020
{ title: "Events", url: "/events", icon: Calendar },

‎src/components/ui/sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ function SidebarTrigger({
266266
data-slot="sidebar-trigger"
267267
variant="ghost"
268268
size="icon"
269-
className={cn("size-7 no-underline border-b-0", className)}
269+
className={cn("size-7", className)}
270270
onClick={(event) => {
271271
onClick?.(event)
272272
toggleSidebar()

‎src/css/global.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
:root {
2+
--radius: 0.625rem;
3+
--background: oklch(1 0 0);
4+
--foreground: oklch(0.145 0 0);
5+
--card: oklch(1 0 0);
6+
--card-foreground: oklch(0.145 0 0);
7+
--popover: oklch(1 0 0);
8+
--popover-foreground: oklch(0.145 0 0);
9+
--primary: oklch(0.205 0 0);
10+
--primary-foreground: oklch(0.985 0 0);
11+
--secondary: oklch(0.97 0 0);
12+
--secondary-foreground: oklch(0.205 0 0);
13+
--muted: oklch(0.97 0 0);
14+
--muted-foreground: oklch(0.556 0 0);
15+
--accent: oklch(0.97 0 0);
16+
--accent-foreground: oklch(0.205 0 0);
17+
--destructive: oklch(0.577 0.245 27.325);
18+
--destructive-foreground: oklch(0.985 0 0);
19+
--border: oklch(0.922 0 0);
20+
--input: oklch(0.922 0 0);
21+
--ring: oklch(0.708 0 0);
22+
--chart-1: oklch(0.646 0.222 41.116);
23+
--chart-2: oklch(0.6 0.118 184.704);
24+
--chart-3: oklch(0.398 0.07 227.392);
25+
--chart-4: oklch(0.828 0.189 84.429);
26+
--chart-5: oklch(0.769 0.188 70.08);
27+
--sidebar: oklch(0.985 0 0);
28+
--sidebar-foreground: oklch(0.145 0 0);
29+
--sidebar-primary: oklch(0.205 0 0);
30+
--sidebar-primary-foreground: oklch(0.985 0 0);
31+
--sidebar-accent: oklch(0.97 0 0);
32+
--sidebar-accent-foreground: oklch(0.205 0 0);
33+
--sidebar-border: oklch(0.922 0 0);
34+
--sidebar-ring: oklch(0.708 0 0);
35+
}
36+
37+
.dark {
38+
--background: oklch(0.145 0 0);
39+
--foreground: oklch(0.985 0 0);
40+
--card: oklch(0.205 0 0);
41+
--card-foreground: oklch(0.985 0 0);
42+
--popover: oklch(0.269 0 0);
43+
--popover-foreground: oklch(0.985 0 0);
44+
--primary: oklch(0.922 0 0);
45+
--primary-foreground: oklch(0.205 0 0);
46+
--secondary: oklch(0.269 0 0);
47+
--secondary-foreground: oklch(0.985 0 0);
48+
--muted: oklch(0.269 0 0);
49+
--muted-foreground: oklch(0.708 0 0);
50+
--accent: oklch(0.371 0 0);
51+
--accent-foreground: oklch(0.985 0 0);
52+
--destructive: oklch(0.704 0.191 22.216);
53+
--destructive-foreground: oklch(0.985 0 0);
54+
--border: oklch(1 0 0 / 10%);
55+
--input: oklch(1 0 0 / 15%);
56+
--ring: oklch(0.556 0 0);
57+
--chart-1: oklch(0.488 0.243 264.376);
58+
--chart-2: oklch(0.696 0.17 162.48);
59+
--chart-3: oklch(0.769 0.188 70.08);
60+
--chart-4: oklch(0.627 0.265 303.9);
61+
--chart-5: oklch(0.645 0.246 16.439);
62+
--sidebar: oklch(0.205 0 0);
63+
--sidebar-foreground: oklch(0.985 0 0);
64+
--sidebar-primary: oklch(0.488 0.243 264.376);
65+
--sidebar-primary-foreground: oklch(0.985 0 0);
66+
--sidebar-accent: oklch(0.269 0 0);
67+
--sidebar-accent-foreground: oklch(0.985 0 0);
68+
--sidebar-border: oklch(1 0 0 / 10%);
69+
--sidebar-ring: oklch(0.439 0 0);
70+
}

‎src/css/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
--color-sidebar-accent: var(--sidebar-active-link-bg);
1111
--color-sidebar-accent-foreground: #ffffff;
1212
--color-sidebar-border: #3f3f46;
13+
}
1314

1415
/* ================================================= */
1516
:root {

‎src/css/index.txt‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
@import "tailwindcss";
2+
@import "tw-animate-css";
3+
@import "shadcn/tailwind.css";
4+
5+
@custom-variant dark (&:is(.dark *));
6+
7+
/* ================================================= */
8+
9+
/* RANDOM AUTO-GENERATED STYLES */
10+
11+
/* ================================================= */
12+
:root {
13+
font-family: Helvetica, Arial, sans-serif;
14+
line-height: 1.5;
15+
font-weight: 400;
16+
color-scheme: light dark;
17+
color: rgb(255 255 255 / 87%);
18+
background-color: var(--site-bg);
19+
font-synthesis: none;
20+
text-rendering: optimizelegibility;
21+
-webkit-font-smoothing: antialiased;
22+
-moz-osx-font-smoothing: grayscale;
23+
--radius: 0.625rem;
24+
--background: oklch(1 0 0);
25+
--foreground: oklch(0.13 0.028 261.692);
26+
--card: oklch(1 0 0);
27+
--card-foreground: oklch(0.13 0.028 261.692);
28+
--popover: oklch(1 0 0);
29+
--popover-foreground: oklch(0.13 0.028 261.692);
30+
--primary: oklch(0.21 0.034 264.665);
31+
--primary-foreground: oklch(0.985 0.002 247.839);
32+
--secondary: oklch(0.967 0.003 264.542);
33+
--secondary-foreground: oklch(0.21 0.034 264.665);
34+
--muted: oklch(0.967 0.003 264.542);
35+
--muted-foreground: oklch(0.551 0.027 264.364);
36+
--accent: oklch(0.967 0.003 264.542);
37+
--accent-foreground: oklch(0.21 0.034 264.665);
38+
--destructive: oklch(0.577 0.245 27.325);
39+
--border: oklch(0.928 0.006 264.531);
40+
--input: oklch(0.928 0.006 264.531);
41+
--ring: oklch(0.707 0.022 261.325);
42+
--chart-1: oklch(0.646 0.222 41.116);
43+
--chart-2: oklch(0.6 0.118 184.704);
44+
--chart-3: oklch(0.398 0.07 227.392);
45+
--chart-4: oklch(0.828 0.189 84.429);
46+
--chart-5: oklch(0.769 0.188 70.08);
47+
--sidebar: oklch(0.985 0.002 247.839);
48+
--sidebar-foreground: oklch(0.13 0.028 261.692);
49+
--sidebar-primary: oklch(0.21 0.034 264.665);
50+
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
51+
--sidebar-accent: oklch(0.967 0.003 264.542);
52+
--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
53+
--sidebar-border: oklch(0.928 0.006 264.531);
54+
--sidebar-ring: oklch(0.707 0.022 261.325);
55+
}
56+
57+
body {
58+
margin: 0;
59+
display: flex;
60+
place-items: center;
61+
min-width: 320px;
62+
min-height: 100vh;
63+
}
64+
65+
*,
66+
*::before,
67+
*::after {
68+
box-sizing: border-box;
69+
}
70+
71+
/* ================================================= */
72+
73+
/* END OF RANDOM AUTO-GENERATED STYLES */
74+
75+
/* ================================================= */
76+
77+
@theme inline {
78+
--radius-sm: calc(var(--radius) - 4px);
79+
--radius-md: calc(var(--radius) - 2px);
80+
--radius-lg: var(--radius);
81+
--radius-xl: calc(var(--radius) + 4px);
82+
--radius-2xl: calc(var(--radius) + 8px);
83+
--radius-3xl: calc(var(--radius) + 12px);
84+
--radius-4xl: calc(var(--radius) + 16px);
85+
--color-background: var(--background);
86+
--color-foreground: var(--foreground);
87+
--color-card: var(--card);
88+
--color-card-foreground: var(--card-foreground);
89+
--color-popover: var(--popover);
90+
--color-popover-foreground: var(--popover-foreground);
91+
--color-primary: var(--primary);
92+
--color-primary-foreground: var(--primary-foreground);
93+
--color-secondary: var(--secondary);
94+
--color-secondary-foreground: var(--secondary-foreground);
95+
--color-muted: var(--muted);
96+
--color-muted-foreground: var(--muted-foreground);
97+
--color-accent: var(--accent);
98+
--color-accent-foreground: var(--accent-foreground);
99+
--color-destructive: var(--destructive);
100+
--color-border: var(--border);
101+
--color-input: var(--input);
102+
--color-ring: var(--ring);
103+
--color-chart-1: var(--chart-1);
104+
--color-chart-2: var(--chart-2);
105+
--color-chart-3: var(--chart-3);
106+
--color-chart-4: var(--chart-4);
107+
--color-chart-5: var(--chart-5);
108+
--color-sidebar: var(--sidebar);
109+
--color-sidebar-foreground: var(--sidebar-foreground);
110+
--color-sidebar-primary: var(--sidebar-primary);
111+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
112+
--color-sidebar-accent: var(--sidebar-accent);
113+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
114+
--color-sidebar-border: var(--sidebar-border);
115+
--color-sidebar-ring: var(--sidebar-ring);
116+
}
117+
118+
.dark {
119+
--background: oklch(0.13 0.028 261.692);
120+
--foreground: oklch(0.985 0.002 247.839);
121+
--card: oklch(0.21 0.034 264.665);
122+
--card-foreground: oklch(0.985 0.002 247.839);
123+
--popover: oklch(0.21 0.034 264.665);
124+
--popover-foreground: oklch(0.985 0.002 247.839);
125+
--primary: oklch(0.928 0.006 264.531);
126+
--primary-foreground: oklch(0.21 0.034 264.665);
127+
--secondary: oklch(0.278 0.033 256.848);
128+
--secondary-foreground: oklch(0.985 0.002 247.839);
129+
--muted: oklch(0.278 0.033 256.848);
130+
--muted-foreground: oklch(0.707 0.022 261.325);
131+
--accent: oklch(0.278 0.033 256.848);
132+
--accent-foreground: oklch(0.985 0.002 247.839);
133+
--destructive: oklch(0.704 0.191 22.216);
134+
--border: oklch(1 0 0 / 10%);
135+
--input: oklch(1 0 0 / 15%);
136+
--ring: oklch(0.551 0.027 264.364);
137+
--chart-1: oklch(0.488 0.243 264.376);
138+
--chart-2: oklch(0.696 0.17 162.48);
139+
--chart-3: oklch(0.769 0.188 70.08);
140+
--chart-4: oklch(0.627 0.265 303.9);
141+
--chart-5: oklch(0.645 0.246 16.439);
142+
--sidebar: oklch(0.21 0.034 264.665);
143+
--sidebar-foreground: oklch(0.985 0.002 247.839);
144+
--sidebar-primary: oklch(0.488 0.243 264.376);
145+
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
146+
--sidebar-accent: oklch(0.278 0.033 256.848);
147+
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
148+
--sidebar-border: oklch(1 0 0 / 10%);
149+
--sidebar-ring: oklch(0.551 0.027 264.364);
150+
}
151+
152+
@layer base {
153+
* {
154+
@apply border-border outline-ring/50;
155+
}
156+
body {
157+
@apply bg-background text-foreground;
158+
}
159+
}

‎src/pages/CreateEvent.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { useState } from "react";
2+
import { Button } from "@/components/ui/button";
3+
import { Input } from "@/components/ui/input";
4+
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
5+
import { useNavigate } from "react-router-dom";
6+
7+
export default function CreateEvent() {
8+
const navigate = useNavigate();
9+
const [formData, setFormData] = useState({
10+
name: "",
11+
date: "",
12+
location: "",
13+
description: ""
14+
});
15+
16+
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
17+
const { name, value } = e.target;
18+
setFormData(prev => ({ ...prev, [name]: value }));
19+
};
20+
21+
const handleSubmit = (e: React.FormEvent) => {
22+
e.preventDefault();
23+
console.log("Event Data:", formData);
24+
// save the event
25+
navigate("/events");
26+
};
27+
28+
return (
29+
<div className="flex flex-col gap-4 p-4 max-w-2xl mx-auto">
30+
<Card>
31+
<CardHeader>
32+
<CardTitle>Create New Event</CardTitle>
33+
<CardDescription>Fill out the details below to create your event.</CardDescription>
34+
</CardHeader>
35+
<form onSubmit={handleSubmit}>
36+
<CardContent className="grid gap-4">
37+
<div className="grid gap-2">
38+
<label htmlFor="name" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
39+
Event Name
40+
</label>
41+
<Input
42+
id="name"
43+
name="name"
44+
placeholder="Summer Music Festival"
45+
value={formData.name}
46+
onChange={handleChange}
47+
required
48+
/>
49+
</div>
50+
<div className="grid gap-2">
51+
<label htmlFor="date" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
52+
Date
53+
</label>
54+
<Input
55+
id="date"
56+
name="date"
57+
type="date"
58+
value={formData.date}
59+
onChange={handleChange}
60+
required
61+
/>
62+
</div>
63+
<div className="grid gap-2">
64+
<label htmlFor="location" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
65+
Location
66+
</label>
67+
<Input
68+
id="location"
69+
name="location"
70+
placeholder="Central Park, NY"
71+
value={formData.location}
72+
onChange={handleChange}
73+
required
74+
/>
75+
</div>
76+
<div className="grid gap-2">
77+
<label htmlFor="description" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
78+
Description
79+
</label>
80+
<textarea
81+
id="description"
82+
name="description"
83+
className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
84+
placeholder="A brief description of the event..."
85+
value={formData.description}
86+
onChange={handleChange}
87+
/>
88+
</div>
89+
</CardContent>
90+
<CardFooter className="flex justify-between">
91+
<Button variant="outline" type="button" onClick={() => navigate("/events")}>
92+
Cancel
93+
</Button>
94+
<Button type="submit">Create Event</Button>
95+
</CardFooter>
96+
</form>
97+
</Card>
98+
</div>
99+
);
100+
}

0 commit comments

Comments
 (0)