AI overlords we love you
This commit is contained in:
Anushlinux
@@ -6,37 +6,40 @@ import { useState, useEffect } from 'react';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { Badge } from '@workspace/ui/components/badge';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Home,
|
||||
Briefcase,
|
||||
User,
|
||||
FileText,
|
||||
Bell,
|
||||
Search,
|
||||
Menu,
|
||||
X,
|
||||
LogOut,
|
||||
Settings,
|
||||
Bell,
|
||||
Search,
|
||||
ChevronDown
|
||||
Settings,
|
||||
GraduationCap,
|
||||
TrendingUp,
|
||||
BookOpen
|
||||
} from 'lucide-react';
|
||||
import { signOutAction } from './actions';
|
||||
|
||||
const navLinks = [
|
||||
{
|
||||
href: '/',
|
||||
label: 'Dashboard',
|
||||
icon: LayoutDashboard,
|
||||
description: 'Overview and analytics'
|
||||
label: 'Home',
|
||||
icon: Home,
|
||||
description: 'Discover opportunities'
|
||||
},
|
||||
{
|
||||
href: '/students',
|
||||
label: 'Students',
|
||||
icon: Users,
|
||||
description: 'Manage student profiles'
|
||||
href: '/applications',
|
||||
label: 'My Applications',
|
||||
icon: FileText,
|
||||
description: 'Track your applications'
|
||||
},
|
||||
{
|
||||
href: '/jobs',
|
||||
label: 'Jobs',
|
||||
icon: Briefcase,
|
||||
description: 'Job listings and applications'
|
||||
href: '/profile',
|
||||
label: 'Profile',
|
||||
icon: User,
|
||||
description: 'Manage your profile'
|
||||
},
|
||||
];
|
||||
|
||||
@@ -61,11 +64,11 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background font-sans">
|
||||
{/* Enhanced Sticky Navbar */}
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 font-sans">
|
||||
{/* Modern Student Navbar */}
|
||||
<header className={`sticky top-0 z-50 w-full transition-all duration-300 ${
|
||||
isScrolled
|
||||
? 'bg-white/95 backdrop-blur-md shadow-lg border-b border-gray-200/50'
|
||||
? 'bg-white/95 backdrop-blur-md shadow-lg border-b border-blue-200/50'
|
||||
: 'bg-white/80 backdrop-blur-sm'
|
||||
}`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
@@ -73,23 +76,20 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
{/* Logo Section */}
|
||||
<div className="flex items-center gap-3 group">
|
||||
<div className="relative">
|
||||
<img
|
||||
src="/favicon.ico"
|
||||
alt="Logo"
|
||||
className="w-10 h-10 rounded-xl shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-red-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-xl shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110 flex items-center justify-center">
|
||||
<GraduationCap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-extrabold text-2xl tracking-tight text-gray-800 group-hover:text-gray-900 transition-colors duration-200">
|
||||
<span className="font-extrabold text-2xl tracking-tight bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent group-hover:from-blue-700 group-hover:to-indigo-700 transition-all duration-200">
|
||||
NextPlacement
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 font-medium -mt-1">Admin Portal</span>
|
||||
<span className="text-xs text-blue-600 font-medium -mt-1">Student Portal</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-6">
|
||||
<nav className="hidden md:flex items-center gap-4">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
const Icon = link.icon;
|
||||
@@ -98,23 +98,23 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`relative group px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
|
||||
className={`relative group px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
|
||||
isActive
|
||||
? 'text-red-600 bg-red-50 border border-red-200'
|
||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'
|
||||
? 'text-blue-600 bg-blue-50 border border-blue-200'
|
||||
: 'text-gray-700 hover:text-blue-600 hover:bg-blue-50'
|
||||
}`}
|
||||
prefetch={false}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon className={`w-5 h-5 transition-transform duration-200 group-hover:scale-110 ${
|
||||
isActive ? 'text-red-600' : 'text-gray-500 group-hover:text-gray-700'
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={`w-4 h-4 transition-transform duration-200 group-hover:scale-110 ${
|
||||
isActive ? 'text-blue-600' : 'text-gray-500 group-hover:text-blue-600'
|
||||
}`} />
|
||||
<span className="text-base">{link.label}</span>
|
||||
<span className="text-sm">{link.label}</span>
|
||||
</div>
|
||||
|
||||
{/* Active indicator */}
|
||||
{isActive && (
|
||||
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-red-500 rounded-full animate-pulse" />
|
||||
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-blue-500 rounded-full animate-pulse" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
@@ -127,21 +127,21 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="hidden sm:flex items-center gap-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200"
|
||||
className="hidden sm:flex items-center gap-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200"
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
<span className="hidden lg:inline text-sm">Search</span>
|
||||
<span className="hidden lg:inline text-sm">Search Jobs</span>
|
||||
</Button>
|
||||
|
||||
{/* Notifications */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="relative text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200"
|
||||
className="relative text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200"
|
||||
>
|
||||
<Bell className="w-4 h-4" />
|
||||
<Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-xs text-white flex items-center justify-center animate-pulse">
|
||||
3
|
||||
<Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-orange-500 text-xs text-white flex items-center justify-center animate-pulse">
|
||||
2
|
||||
</Badge>
|
||||
</Button>
|
||||
|
||||
@@ -151,29 +151,26 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsProfileDropdownOpen(!isProfileDropdownOpen)}
|
||||
className="flex items-center gap-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200"
|
||||
className="flex items-center gap-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200"
|
||||
>
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-red-500 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold text-sm">
|
||||
A
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
|
||||
S
|
||||
</div>
|
||||
<span className="hidden lg:inline text-sm font-medium">Admin</span>
|
||||
<ChevronDown className={`w-4 h-4 transition-transform duration-200 ${
|
||||
isProfileDropdownOpen ? 'rotate-180' : ''
|
||||
}`} />
|
||||
<span className="hidden lg:inline text-sm font-medium">Student</span>
|
||||
</Button>
|
||||
|
||||
{/* Profile Dropdown Menu */}
|
||||
{isProfileDropdownOpen && (
|
||||
<div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50 animate-in slide-in-from-top-2 duration-200">
|
||||
<div className="px-4 py-3 border-b border-gray-100">
|
||||
<p className="text-sm font-medium text-gray-900">Admin User</p>
|
||||
<p className="text-xs text-gray-500">admin@nextplacement.com</p>
|
||||
<p className="text-sm font-medium text-gray-900">Student Name</p>
|
||||
<p className="text-xs text-gray-500">student@college.edu</p>
|
||||
</div>
|
||||
<div className="py-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
className="w-full justify-start text-gray-700 hover:text-blue-600 hover:bg-blue-50"
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
@@ -197,7 +194,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="md:hidden text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200"
|
||||
className="md:hidden text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="w-5 h-5" />
|
||||
@@ -220,19 +217,19 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all duration-200 ${
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
|
||||
isActive
|
||||
? 'text-red-600 bg-red-50 border border-red-200'
|
||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'
|
||||
? 'text-blue-600 bg-blue-50 border border-blue-200'
|
||||
: 'text-gray-700 hover:text-blue-600 hover:bg-blue-50'
|
||||
}`}
|
||||
prefetch={false}
|
||||
>
|
||||
<Icon className={`w-5 h-5 ${
|
||||
isActive ? 'text-red-600' : 'text-gray-500'
|
||||
isActive ? 'text-blue-600' : 'text-gray-500'
|
||||
}`} />
|
||||
<span>{link.label}</span>
|
||||
{isActive && (
|
||||
<div className="ml-auto w-2 h-2 bg-red-500 rounded-full animate-pulse" />
|
||||
<div className="ml-auto w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
@@ -241,19 +238,19 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
{/* Mobile Profile Section */}
|
||||
<div className="pt-4 border-t border-gray-200 mt-4">
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-red-500 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold">
|
||||
A
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-semibold">
|
||||
S
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">Admin User</p>
|
||||
<p className="text-xs text-gray-500">admin@nextplacement.com</p>
|
||||
<p className="text-sm font-medium text-gray-900">Student Name</p>
|
||||
<p className="text-xs text-gray-500">student@college.edu</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-2 space-y-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
className="w-full justify-start text-gray-700 hover:text-blue-600 hover:bg-blue-50"
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
@@ -261,6 +258,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={signOutAction}
|
||||
className="w-full justify-start text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" />
|
||||
@@ -275,7 +273,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="bg-background min-h-screen">
|
||||
<main className="min-h-screen">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user