feat: redesign admin panel with Lucide icons and modern styling
- Add lucide-react for SVG icons throughout the admin - Redesign sidebar with gradient background, icons per nav item, and sticky layout - Redesign topbar with cleaner user info display - Redesign dashboard with icon-backed stat cards, gradient progress bars, activity feed - Update AdminNavLink with icon support and new active state styling - Improve table styling in admin-page CSS (rounded corners, hover, spacing) - Clean up unused admin CSS
This commit is contained in:
1 parent
bd299be55d
commit
cf287dbc8b
9 files changed
+278
-261
No files matched your search
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import type { ReactNode } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
/**
|
||||
@@ -8,7 +9,7 @@ import { usePathname } from "next/navigation";
|
||||
* exactly; every other entry also matches its sub-routes (e.g. /admin/radio is
|
||||
* active on /admin/radio/history) so the current section stays lit.
|
||||
*/
|
||||
export function AdminNavLink({ href, label }: { href: string; label: string }) {
|
||||
export function AdminNavLink({ href, icon, children }: { href: string; icon?: ReactNode; children: ReactNode }) {
|
||||
const pathname = usePathname() ?? "";
|
||||
const active =
|
||||
href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(`${href}/`);
|
||||
@@ -16,11 +17,18 @@ export function AdminNavLink({ href, label }: { href: string; label: string }) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-[#c8cbe0] text-sm font-semibold no-underline transition-[background,color] duration-150 hover:bg-white/7 hover:text-white hover:no-underline ${
|
||||
active ? "bg-[var(--color-primary)] text-[#1a1a2e] shadow-[0_2px_8px_rgba(238,180,37,0.35)]" : ""
|
||||
className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
|
||||
active
|
||||
? "bg-gradient-to-r from-[var(--color-primary)]/20 to-transparent text-white shadow-sm border-l-2 border-[var(--color-primary)]"
|
||||
: "text-[#8b8fa8] hover:text-white hover:bg-white/[0.04] hover:no-underline"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{icon ? (
|
||||
<span className={`flex-none ${active ? "text-[var(--color-primary)]" : "text-[#5c5f7a]"}`}>
|
||||
{icon}
|
||||
</span>
|
||||
) : null}
|
||||
<span>{children}</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user