fix ui style
This commit is contained in:
@@ -5,18 +5,33 @@ import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import { signOut } from "next-auth/react";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowUpRight,
|
||||
Banknote,
|
||||
Compass,
|
||||
IdCard,
|
||||
LayoutDashboard,
|
||||
Mail,
|
||||
Menu,
|
||||
ScrollText,
|
||||
Settings,
|
||||
Users,
|
||||
X,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
import { AdminSearchBar } from "@/features/admin/components/admin-search-bar";
|
||||
|
||||
const NAV_ITEMS: { href: string; label: string; icon: string }[] = [
|
||||
{ href: "/admin", label: "Dashboard", icon: "📊" },
|
||||
{ href: "/admin/trips", label: "Trips", icon: "🧭" },
|
||||
{ href: "/admin/users", label: "Users", icon: "👥" },
|
||||
{ href: "/admin/verifications", label: "Verifikasi", icon: "🪪" },
|
||||
{ href: "/admin/refunds", label: "Refund", icon: "↩️" },
|
||||
{ href: "/admin/payouts", label: "Payout", icon: "💸" },
|
||||
{ href: "/admin/emails", label: "Email", icon: "✉️" },
|
||||
{ href: "/admin/audit-log", label: "Audit Log", icon: "📜" },
|
||||
{ href: "/admin/system", label: "System", icon: "⚙️" },
|
||||
const NAV_ITEMS: { href: string; label: string; icon: LucideIcon }[] = [
|
||||
{ href: "/admin", label: "Dashboard", icon: LayoutDashboard },
|
||||
{ href: "/admin/trips", label: "Trips", icon: Compass },
|
||||
{ href: "/admin/users", label: "Users", icon: Users },
|
||||
{ href: "/admin/verifications", label: "Verifikasi", icon: IdCard },
|
||||
{ href: "/admin/refunds", label: "Refund", icon: ArrowLeft },
|
||||
{ href: "/admin/payouts", label: "Payout", icon: Banknote },
|
||||
{ href: "/admin/emails", label: "Email", icon: Mail },
|
||||
{ href: "/admin/audit-log", label: "Audit Log", icon: ScrollText },
|
||||
{ href: "/admin/system", label: "System", icon: Settings },
|
||||
];
|
||||
|
||||
interface AdminSidebarProps {
|
||||
@@ -51,13 +66,9 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
|
||||
aria-expanded={open}
|
||||
>
|
||||
{open ? (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
||||
<path d="M5 5l10 10M15 5L5 15" />
|
||||
</svg>
|
||||
<X size={20} strokeWidth={2} aria-hidden />
|
||||
) : (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
||||
<path d="M3 5h14M3 10h14M3 15h14" />
|
||||
</svg>
|
||||
<Menu size={20} strokeWidth={2} aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
</header>
|
||||
@@ -106,6 +117,7 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
|
||||
const isActive =
|
||||
pathname === item.href ||
|
||||
(item.href !== "/admin" && pathname?.startsWith(item.href));
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
@@ -117,9 +129,7 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
|
||||
: "text-neutral-700 hover:bg-neutral-100"
|
||||
}`}
|
||||
>
|
||||
<span aria-hidden className="text-base">
|
||||
{item.icon}
|
||||
</span>
|
||||
<Icon size={20} strokeWidth={1.75} aria-hidden />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -136,7 +146,7 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700"
|
||||
>
|
||||
<span aria-hidden>↩</span>
|
||||
<ArrowUpRight size={16} strokeWidth={1.75} aria-hidden />
|
||||
<span>Lihat situs publik</span>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
import { Menu, X } from "lucide-react";
|
||||
|
||||
export function Navbar() {
|
||||
const { data: session } = useSession();
|
||||
@@ -109,29 +110,9 @@ export function Navbar() {
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{menuOpen ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<path d="M5 5l10 10M15 5L5 15" />
|
||||
</svg>
|
||||
<X size={20} strokeWidth={1.75} aria-hidden />
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<path d="M3 5h14M3 10h14M3 15h14" />
|
||||
</svg>
|
||||
<Menu size={20} strokeWidth={1.75} aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,23 +1,20 @@
|
||||
import { BadgeCheck } from "lucide-react";
|
||||
|
||||
type Size = "sm" | "md";
|
||||
|
||||
export function VerifiedBadge({ size = "sm" }: { size?: Size }) {
|
||||
const cls =
|
||||
size === "md"
|
||||
? "px-2.5 py-1 text-xs"
|
||||
: "px-2 py-0.5 text-[10px]";
|
||||
size === "md" ? "px-2.5 py-1 text-xs" : "px-2 py-0.5 text-[10px]";
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 rounded-full bg-primary-50 font-semibold text-primary-700 ring-1 ring-primary-200 ${cls}`}
|
||||
title="Organizer terverifikasi SeTrip"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
className={size === "md" ? "h-3.5 w-3.5" : "h-3 w-3"}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M8 0l2.09 1.74L12.86 1.5l.64 2.78 2.5 1.5-1.5 2.5.5 2.86-2.78.64-1.5 2.5-2.72-.59L5.5 14.5 4 12 1.5 11.36 2 8.5.5 6 3 4.5l.64-2.78 2.77.24L8 0zm-1.07 9.4l4.6-4.6-1.06-1.06-3.54 3.54-1.41-1.42-1.06 1.06 2.47 2.48z" />
|
||||
</svg>
|
||||
<BadgeCheck
|
||||
size={size === "md" ? 14 : 12}
|
||||
strokeWidth={1.75}
|
||||
aria-hidden
|
||||
/>
|
||||
Verified
|
||||
</span>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user