Skip to content

Commit 6108b17

Browse files
typescript-anytypescript-any
committed
feat: add theme toggle component and integrate theme provider
style: update CSS variables for enhanced theming support fix: update route constants to include leading slashes for consistency refactor: enhance admin page layout and styling refactor: restructure create post page layout and remove unused code refactor: simplify forbidden page layout style: revamp home page with animated background and improved UI elements fix: enhance login form with better error handling and styling chore: remove unused blog routes and clean up routing structure refactor: consolidate main routes into a single layout component
1 parent c308cd4 commit 6108b17

File tree

19 files changed

+970
-329
lines changed

19 files changed

+970
-329
lines changed

‎src/components/layout/auth-layout.tsx

Lines changed: 126 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,133 @@
11
import { Outlet } from "react-router";
22

3-
// This layout is used for authentication-related pages like login and register
43
const AuthLayout = () => {
54
return (
6-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
7-
<section className="flex flex-col items-center justify-center ">
8-
<h1>Auth Layout</h1>
9-
<p>
10-
Modify this layout to include your authentication-related components
11-
You can also add a logo or any other branding elements here.
12-
</p>
13-
</section>
14-
<Outlet />
5+
<div className="min-h-screen flex theme-transition">
6+
{/* Left side - Branding */}
7+
<div className="flex-1 bg-gradient-to-br from-background via-card to-background dark:from-background dark:via-muted dark:to-card flex items-center justify-center p-8 relative overflow-hidden">
8+
{/* Background decoration */}
9+
<div className="absolute inset-0 opacity-10 dark:opacity-20">
10+
<div className="absolute top-20 left-20 w-32 h-32 bg-primary rounded-full blur-3xl"></div>
11+
<div className="absolute bottom-20 right-20 w-40 h-40 bg-accent rounded-full blur-3xl"></div>
12+
<div className="absolute top-1/2 left-1/3 w-24 h-24 bg-info rounded-full blur-2xl"></div>
13+
</div>
14+
15+
<div className="text-center text-foreground relative z-10 max-w-lg">
16+
<div className="mb-12">
17+
{/* Logo section */}
18+
<div className="mb-8 relative">
19+
<div className="text-7xl mb-6 animate-pulse">⚛️</div>
20+
<div className="space-y-2">
21+
<h1 className="text-5xl font-bold bg-gradient-to-r from-foreground to-primary bg-clip-text text-transparent">
22+
React RBAC
23+
</h1>
24+
<h2 className="text-2xl font-semibold text-primary tracking-wide">
25+
TypeScript Template
26+
</h2>
27+
</div>
28+
</div>
29+
<p className="text-lg text-muted-foreground leading-relaxed">
30+
Scalable boilerplate with Role-Based Access Control for modern web
31+
applications
32+
</p>
33+
</div>
34+
35+
{/* Features grid */}
36+
<div className="grid grid-cols-2 gap-4 mb-8">
37+
<div className="group p-4 rounded-lg bg-card/50 backdrop-blur-sm border border-border hover:bg-card/70 theme-transition">
38+
<div className="text-2xl mb-2 group-hover:scale-110 transition-transform duration-300">
39+
🔐
40+
</div>
41+
<span className="text-sm font-medium text-foreground">
42+
RBAC + Auth
43+
</span>
44+
</div>
45+
<div className="group p-4 rounded-lg bg-card/50 backdrop-blur-sm border border-border hover:bg-card/70 theme-transition">
46+
<div className="text-2xl mb-2 group-hover:scale-110 transition-transform duration-300">
47+
⚡
48+
</div>
49+
<span className="text-sm font-medium text-foreground">
50+
Vite + HMR
51+
</span>
52+
</div>
53+
<div className="group p-4 rounded-lg bg-card/50 backdrop-blur-sm border border-border hover:bg-card/70 theme-transition">
54+
<div className="text-2xl mb-2 group-hover:scale-110 transition-transform duration-300">
55+
🎯
56+
</div>
57+
<span className="text-sm font-medium text-foreground">
58+
Type Safety
59+
</span>
60+
</div>
61+
<div className="group p-4 rounded-lg bg-card/50 backdrop-blur-sm border border-border hover:bg-card/70 theme-transition">
62+
<div className="text-2xl mb-2 group-hover:scale-110 transition-transform duration-300">
63+
🚀
64+
</div>
65+
<span className="text-sm font-medium text-foreground">
66+
Production Ready
67+
</span>
68+
</div>
69+
</div>
70+
71+
{/* Tech stack */}
72+
<div className="p-4 rounded-xl bg-card/50 backdrop-blur-sm border border-border">
73+
<p className="text-xs text-muted-foreground uppercase tracking-wider mb-3">
74+
Built with Modern Stack
75+
</p>
76+
<div className="grid grid-cols-2 gap-2 text-xs mb-3">
77+
<span className="px-2 py-1 bg-primary/20 text-primary-foreground rounded-md border border-primary/30 text-center">
78+
React 19
79+
</span>
80+
<span className="px-2 py-1 bg-info/20 text-info-foreground rounded-md border border-info/30 text-center">
81+
TypeScript
82+
</span>
83+
<span className="px-2 py-1 bg-accent/20 text-accent-foreground rounded-md border border-accent/30 text-center">
84+
Vite 6
85+
</span>
86+
<span className="px-2 py-1 bg-success/20 text-success-foreground rounded-md border border-success/30 text-center">
87+
Tailwind 4
88+
</span>
89+
</div>
90+
<div className="flex flex-wrap justify-center gap-1 text-xs">
91+
<span className="px-2 py-1 bg-chart-1/20 text-primary-foreground rounded-md border border-chart-1/30">
92+
TanStack Query
93+
</span>
94+
<span className="px-2 py-1 bg-warning/20 text-warning-foreground rounded-md border border-warning/30">
95+
React Hook Form
96+
</span>
97+
<span className="px-2 py-1 bg-chart-2/20 text-primary-foreground rounded-md border border-chart-2/30">
98+
Zod
99+
</span>
100+
<span className="px-2 py-1 bg-chart-3/20 text-primary-foreground rounded-md border border-chart-3/30">
101+
Zustand
102+
</span>
103+
<span className="px-2 py-1 bg-chart-4/20 text-primary-foreground rounded-md border border-chart-4/30">
104+
Shadcn/ui
105+
</span>
106+
<span className="px-2 py-1 bg-chart-5/20 text-primary-foreground rounded-md border border-chart-5/30">
107+
Lucide Icons
108+
</span>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
114+
{/* Right side - Form/Outlet */}
115+
<div className="flex-1 flex items-center justify-center p-8 bg-gradient-to-br from-background to-muted relative">
116+
{/* Subtle background pattern */}
117+
<div className="absolute inset-0 opacity-[0.02] dark:opacity-[0.05]">
118+
<div
119+
className="absolute inset-0"
120+
style={{
121+
backgroundImage: `radial-gradient(circle at 1px 1px, oklch(var(--foreground)) 1px, transparent 0)`,
122+
backgroundSize: "24px 24px",
123+
}}
124+
></div>
125+
</div>
126+
127+
<div className="w-full max-w-md relative z-10">
128+
<Outlet />
129+
</div>
130+
</div>
15131
</div>
16132
);
17133
};

‎src/components/layout/footer.tsx

Lines changed: 73 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,86 +2,135 @@ const Footer = () => {
22
const currentYear = new Date().getFullYear();
33

44
return (
5-
<footer className="bg-gray-50 border-t">
6-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
5+
<footer className="bg-gradient-to-r from-background via-card to-background border-t border-border relative theme-transition">
6+
{/* Background decoration */}
7+
<div className="absolute inset-0 opacity-5 dark:opacity-10">
8+
<div className="absolute bottom-0 left-1/4 w-48 h-48 bg-primary rounded-full blur-3xl"></div>
9+
<div className="absolute bottom-0 right-1/4 w-48 h-48 bg-accent rounded-full blur-3xl"></div>
10+
</div>
11+
12+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
713
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
814
<div className="col-span-1 md:col-span-2">
9-
<h3 className="text-lg font-semibold text-gray-900 mb-4">
10-
App Name
11-
</h3>
12-
<p className="text-gray-600 text-sm">
13-
A modern React application built with TypeScript, React Router,
14-
and Tailwind CSS.
15+
<div className="flex items-center gap-3 mb-4">
16+
<div className="text-3xl animate-pulse">⚛️</div>
17+
<h3 className="text-2xl font-bold bg-gradient-to-r from-foreground to-primary bg-clip-text text-transparent">
18+
React RBAC Template
19+
</h3>
20+
</div>
21+
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
22+
A production-ready React starter template with role-based
23+
authentication, modern development tools, and everything you need
24+
to build scalable applications.
1525
</p>
26+
<div className="flex gap-2">
27+
<span className="px-3 py-1 bg-primary/20 text-primary-foreground rounded-full text-xs font-medium border border-primary/30">
28+
TypeScript
29+
</span>
30+
<span className="px-3 py-1 bg-accent/20 text-accent-foreground rounded-full text-xs font-medium border border-accent/30">
31+
Vite
32+
</span>
33+
<span className="px-3 py-1 bg-info/20 text-info-foreground rounded-full text-xs font-medium border border-info/30">
34+
Tailwind
35+
</span>
36+
</div>
1637
</div>
1738

1839
<div>
19-
<h4 className="text-md font-medium text-gray-900 mb-3">
40+
<h4 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
41+
<span className="text-primary">🔗</span>
2042
Quick Links
2143
</h4>
22-
<ul className="space-y-2">
44+
<ul className="space-y-3">
2345
<li>
2446
<a
2547
href="/"
26-
className="text-gray-600 hover:text-gray-900 text-sm"
48+
className="text-muted-foreground hover:text-primary text-sm theme-transition flex items-center gap-2 group"
2749
>
50+
<span className="group-hover:translate-x-1 transition-transform">
51+
→
52+
</span>
2853
Home
2954
</a>
3055
</li>
3156
<li>
3257
<a
3358
href="/create-post"
34-
className="text-gray-600 hover:text-gray-900 text-sm"
59+
className="text-muted-foreground hover:text-primary text-sm theme-transition flex items-center gap-2 group"
3560
>
61+
<span className="group-hover:translate-x-1 transition-transform">
62+
→
63+
</span>
3664
Create Post
3765
</a>
3866
</li>
3967
<li>
4068
<a
4169
href="/admin"
42-
className="text-gray-600 hover:text-gray-900 text-sm"
70+
className="text-muted-foreground hover:text-primary text-sm theme-transition flex items-center gap-2 group"
4371
>
72+
<span className="group-hover:translate-x-1 transition-transform">
73+
→
74+
</span>
4475
Admin
4576
</a>
4677
</li>
4778
</ul>
4879
</div>
4980

5081
<div>
51-
<h4 className="text-md font-medium text-gray-900 mb-3">Support</h4>
52-
<ul className="space-y-2">
82+
<h4 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
83+
<span className="text-accent">📚</span>
84+
Resources
85+
</h4>
86+
<ul className="space-y-3">
5387
<li>
5488
<a
5589
href="#"
56-
className="text-gray-600 hover:text-gray-900 text-sm"
90+
className="text-muted-foreground hover:text-accent text-sm theme-transition flex items-center gap-2 group"
5791
>
92+
<span className="group-hover:translate-x-1 transition-transform">
93+
→
94+
</span>
5895
Documentation
5996
</a>
6097
</li>
6198
<li>
6299
<a
63100
href="#"
64-
className="text-gray-600 hover:text-gray-900 text-sm"
101+
className="text-muted-foreground hover:text-accent text-sm theme-transition flex items-center gap-2 group"
65102
>
66-
Contact Us
103+
<span className="group-hover:translate-x-1 transition-transform">
104+
→
105+
</span>
106+
GitHub Repository
67107
</a>
68108
</li>
69109
<li>
70110
<a
71111
href="#"
72-
className="text-gray-600 hover:text-gray-900 text-sm"
112+
className="text-muted-foreground hover:text-accent text-sm theme-transition flex items-center gap-2 group"
73113
>
74-
Privacy Policy
114+
<span className="group-hover:translate-x-1 transition-transform">
115+
→
116+
</span>
117+
Contributing Guide
75118
</a>
76119
</li>
77120
</ul>
78121
</div>
79122
</div>
80123

81-
<div className="mt-8 pt-8 border-t border-gray-200">
82-
<p className="text-center text-gray-500 text-sm">
83-
© {currentYear} App Name. All rights reserved.
84-
</p>
124+
<div className="mt-12 pt-8 border-t border-border">
125+
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
126+
<p className="text-center text-muted-foreground text-sm flex items-center gap-2">
127+
<span className="text-destructive">♥</span>
128+
Made with love using modern React stack
129+
</p>
130+
<p className="text-center text-muted-foreground text-sm">
131+
© {currentYear} React RBAC Template. Open source starter kit.
132+
</p>
133+
</div>
85134
</div>
86135
</div>
87136
</footer>

‎src/components/layout/header.tsx

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,81 @@
11
import { Link, useNavigate } from "react-router";
22
import { Button } from "../ui/button";
33
import { useAuth } from "@/hooks";
4+
import ThemeToggle from "../theme-toggle";
45

56
const Header = () => {
67
const { isAuthenticated, user, logout } = useAuth();
78
const navigate = useNavigate();
89
return (
9-
<header className="bg-white shadow-sm border-b">
10-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
10+
<header className="bg-gradient-to-r from-background via-card to-background border-b border-border backdrop-blur-lg relative theme-transition">
11+
{/* Subtle background decoration */}
12+
<div className="absolute inset-0 opacity-5 dark:opacity-10">
13+
<div className="absolute top-0 left-1/4 w-32 h-32 bg-primary rounded-full blur-3xl"></div>
14+
<div className="absolute top-0 right-1/4 w-32 h-32 bg-accent rounded-full blur-3xl"></div>
15+
</div>
16+
17+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
1118
<div className="flex justify-between items-center h-16">
1219
<div className="flex items-center">
13-
<Link to="/" className="text-xl font-bold text-gray-900">
14-
App Name
20+
<Link to="/" className="flex items-center gap-3 group">
21+
<div className="text-2xl group-hover:animate-spin transition-transform">
22+
⚛️
23+
</div>
24+
<span className="text-xl font-bold bg-gradient-to-r from-foreground to-primary bg-clip-text text-transparent">
25+
React RBAC
26+
</span>
1527
</Link>
1628
</div>
1729

18-
<nav className="hidden md:flex space-x-8">
30+
<nav className="hidden md:flex space-x-1">
1931
<Link
2032
to="/"
21-
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
33+
className="text-muted-foreground hover:text-foreground hover:bg-muted/50 px-4 py-2 rounded-lg text-sm font-medium theme-transition backdrop-blur-sm"
2234
>
2335
Home
2436
</Link>
37+
<Link
38+
to="/theme-demo"
39+
className="text-muted-foreground hover:text-foreground hover:bg-muted/50 px-4 py-2 rounded-lg text-sm font-medium theme-transition backdrop-blur-sm"
40+
>
41+
Theme Demo
42+
</Link>
2543
<Link
2644
to="/create-post"
27-
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
45+
className="text-muted-foreground hover:text-foreground hover:bg-muted/50 px-4 py-2 rounded-lg text-sm font-medium theme-transition backdrop-blur-sm"
2846
>
2947
Create Post
3048
</Link>
3149
<Link
3250
to="/admin"
33-
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
51+
className="text-muted-foreground hover:text-foreground hover:bg-muted/50 px-4 py-2 rounded-lg text-sm font-medium theme-transition backdrop-blur-sm"
3452
>
3553
Admin
3654
</Link>
3755
</nav>
3856

39-
<div className="flex items-center space-x-4">
57+
<div className="flex items-center space-x-3">
58+
<ThemeToggle />
4059
{isAuthenticated ? (
4160
<>
42-
<span className="text-sm text-gray-700">
43-
Hello, {user?.name}
44-
</span>
61+
<div className="hidden sm:flex items-center gap-2 px-3 py-1 bg-gradient-to-r from-success/20 to-success/30 rounded-full border border-success/30">
62+
<div className="w-2 h-2 bg-success rounded-full animate-pulse"></div>
63+
<span className="text-sm text-success-foreground font-medium">
64+
{user?.name}
65+
</span>
66+
</div>
4567
<Button
4668
variant="outline"
4769
onClick={() => logout(navigate)}
48-
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
70+
className="bg-gradient-to-r from-destructive/20 to-destructive/30 border-destructive/30 text-destructive hover:bg-destructive/40 hover:text-destructive-foreground theme-transition"
4971
>
5072
Logout
5173
</Button>
5274
</>
5375
) : (
5476
<Link
5577
to="/login"
56-
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
78+
className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-primary-foreground px-6 py-2 rounded-lg text-sm font-medium theme-transition shadow-lg hover:shadow-primary/25"
5779
>
5880
Login
5981
</Link>

0 commit comments

Comments
 (0)