Skip to content

Commit c09039d

Browse files
akshay0611akshay0611
committed
Enhance ProtectedPage UI
1 parent 7539e7f commit c09039d

2 files changed

Lines changed: 111 additions & 21 deletions

File tree

‎app/protected/page.tsx‎

Lines changed: 106 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { redirect } from "next/navigation";
2-
32
import { createClient } from "@/lib/supabase/server";
4-
import { InfoIcon } from "lucide-react";
5-
3+
import { InfoIcon, Sparkles, Rocket, Shield, User } from "lucide-react";
64

75
export default async function ProtectedPage() {
86
const supabase = await createClient();
@@ -12,22 +10,114 @@ export default async function ProtectedPage() {
1210
redirect("/auth/login");
1311
}
1412

13+
const firstName = data.user.user_metadata?.first_name || "";
14+
const lastName = data.user.user_metadata?.last_name || "";
15+
const displayName = firstName || lastName ? `${firstName} ${lastName}`.trim() : "there";
16+
1517
return (
16-
<div className="flex-1 w-full flex flex-col gap-12">
17-
<div className="w-full">
18-
<div className="bg-accent text-sm p-3 px-5 rounded-md text-foreground flex gap-3 items-center">
19-
<InfoIcon size="16" strokeWidth={2} />
20-
This is a protected page that you can only see as an authenticated
21-
user
18+
<div className="flex-1 w-full flex flex-col gap-8 p-6 max-w-4xl mx-auto">
19+
20+
<div className="relative overflow-hidden">
21+
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-pink-600/10 rounded-2xl"></div>
22+
<div className="absolute inset-0 bg-gradient-to-br from-transparent via-white/5 to-transparent rounded-2xl"></div>
23+
24+
<div className="relative bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 p-6 rounded-2xl shadow-lg">
25+
<div className="flex items-center gap-3 mb-4">
26+
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
27+
<Shield className="h-5 w-5 text-green-600 dark:text-green-400" />
28+
</div>
29+
<div>
30+
<h3 className="font-semibold text-green-800 dark:text-green-200">Protected Area</h3>
31+
<p className="text-sm text-green-600 dark:text-green-400">Authentication verified</p>
32+
</div>
33+
</div>
34+
<div className="flex gap-3 items-start">
35+
<InfoIcon size="16" strokeWidth={2} className="text-green-600 dark:text-green-400 mt-0.5 flex-shrink-0" />
36+
<p className="text-sm text-green-700 dark:text-green-300">
37+
This is a protected page that you can only see as an authenticated user. Your session is secure and verified.
38+
</p>
39+
</div>
2240
</div>
2341
</div>
24-
<div className="flex flex-col gap-2 items-start">
25-
<h2 className="font-bold text-2xl mb-4">Your user details</h2>
26-
<pre className="text-xs font-mono p-3 rounded border max-h-32 overflow-auto">
27-
{JSON.stringify(data.user, null, 2)}
28-
</pre>
29-
</div>
42+
3043

44+
<div className="space-y-6">
45+
<div className="text-center space-y-4">
46+
<div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mb-4">
47+
<User className="h-8 w-8 text-white" />
48+
</div>
49+
50+
<div className="space-y-2">
51+
<h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 dark:from-white dark:via-blue-200 dark:to-purple-200 bg-clip-text text-transparent">
52+
Welcome back, {displayName}!
53+
</h1>
54+
<p className="text-xl text-gray-600 dark:text-gray-300 font-medium">
55+
Ready to explore Codeunia
56+
</p>
57+
</div>
58+
</div>
59+
60+
61+
<div className="relative group">
62+
<div className="absolute -inset-1 bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div>
63+
<div className="relative bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50 dark:from-yellow-900/20 dark:via-orange-900/20 dark:to-red-900/20 border border-yellow-200 dark:border-yellow-700/50 p-6 rounded-2xl">
64+
<div className="flex items-start gap-4">
65+
<div className="p-3 bg-yellow-100 dark:bg-yellow-900/40 rounded-xl">
66+
<Rocket className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
67+
</div>
68+
<div className="flex-1 space-y-2">
69+
<div className="flex items-center gap-2">
70+
<h3 className="text-lg font-bold text-yellow-800 dark:text-yellow-200">
71+
Something Big is Coming
72+
</h3>
73+
<Sparkles className="h-5 w-5 text-yellow-500 animate-pulse" />
74+
</div>
75+
<p className="text-yellow-700 dark:text-yellow-300 leading-relaxed">
76+
Our user panel is under active development. We&apos;re crafting an amazing experience just for you.
77+
<span className="font-semibold"> Stay tuned for exciting updates!</span>
78+
</p>
79+
<div className="flex items-center gap-2 pt-2">
80+
<div className="flex space-x-1">
81+
<div className="w-2 h-2 bg-yellow-500 rounded-full animate-bounce"></div>
82+
<div className="w-2 h-2 bg-yellow-500 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
83+
<div className="w-2 h-2 bg-yellow-500 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
84+
</div>
85+
<span className="text-sm text-yellow-600 dark:text-yellow-400 font-medium">
86+
Development in progress
87+
</span>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
94+
95+
<div className="grid md:grid-cols-3 gap-6 mt-12">
96+
<div className="group p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-300">
97+
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
98+
<Shield className="h-6 w-6 text-blue-600 dark:text-blue-400" />
99+
</div>
100+
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Secure Dashboard</h3>
101+
<p className="text-sm text-gray-600 dark:text-gray-400">Advanced security features and personalized dashboard coming soon.</p>
102+
</div>
103+
104+
<div className="group p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300">
105+
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
106+
<Sparkles className="h-6 w-6 text-purple-600 dark:text-purple-400" />
107+
</div>
108+
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Smart Features</h3>
109+
<p className="text-sm text-gray-600 dark:text-gray-400">AI-powered tools and intelligent recommendations tailored for you.</p>
110+
</div>
111+
112+
<div className="group p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-green-300 dark:hover:border-green-600 transition-all duration-300">
113+
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
114+
<Rocket className="h-6 w-6 text-green-600 dark:text-green-400" />
115+
</div>
116+
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Performance</h3>
117+
<p className="text-sm text-gray-600 dark:text-gray-400">Lightning-fast performance with real-time updates and analytics.</p>
118+
</div>
119+
</div>
120+
</div>
31121
</div>
32122
);
33-
}
123+
}

‎components/user-icon.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
DropdownMenuSeparator,
1212
DropdownMenuTrigger
1313
} from "@/components/ui/dropdown-menu"
14-
import { User, Settings, LogOut, Shield, UserCircle } from "lucide-react"
14+
import {LogOut, Shield, UserCircle } from "lucide-react"
1515
import { useAuth } from "@/lib/hooks/useAuth"
1616

1717
export function UserIcon() {
@@ -51,18 +51,18 @@ export function UserIcon() {
5151
</div>
5252
</DropdownMenuLabel>
5353
<DropdownMenuSeparator />
54-
<DropdownMenuItem onClick={() => router.push("/protected")}>
54+
{/* <DropdownMenuItem onClick={() => router.push("/protected")}>
5555
<User className="mr-2 h-4 w-4" />
5656
<span>Profile</span>
57-
</DropdownMenuItem>
57+
</DropdownMenuItem> */}
5858
<DropdownMenuItem onClick={() => router.push("/protected")}>
5959
<Shield className="mr-2 h-4 w-4" />
6060
<span>Dashboard</span>
6161
</DropdownMenuItem>
62-
<DropdownMenuItem onClick={() => router.push("/protected")}>
62+
{/* <DropdownMenuItem onClick={() => router.push("/protected")}>
6363
<Settings className="mr-2 h-4 w-4" />
6464
<span>Settings</span>
65-
</DropdownMenuItem>
65+
</DropdownMenuItem> */}
6666
<DropdownMenuSeparator />
6767
<DropdownMenuItem onClick={handleLogout} className="text-red-600 focus:text-red-600">
6868
<LogOut className="mr-2 h-4 w-4" />

0 commit comments

Comments
 (0)