frontend/src/components/dashboard/DashboardShell.tsx at fix/issues-empty-state · ghzhost/frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  GitPullRequest,
  Milestone,
  Trophy,
  Users,
  Wallet,
  Receipt,
  type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";

type Role = "contributor" | "maintainer" | "sponsor";

interface NavItem {
  label: string;
  href: string;
  icon: LucideIcon;
}

const navByRole: Record<Role, NavItem[]> = {
  contributor: [
    { label: "Overview", href: "/dashboard/contributor", icon: LayoutDashboard },
    { label: "Browse bounties", href: "/issues", icon: GitPullRequest },
    { label: "Reputation", href: "/reputation/priyaeth", icon: Trophy },
  ],
  maintainer: [
    { label: "Overview", href: "/dashboard/maintainer", icon: LayoutDashboard },
    { label: "Bounty pipeline", href: "/issues", icon: GitPullRequest },
    { label: "Milestones", href: "/milestones", icon: Milestone },
    { label: "Team", href: "/dashboard/maintainer", icon: Users },
  ],
  sponsor: [
    { label: "Overview", href: "/dashboard/sponsor", icon: LayoutDashboard },
    { label: "Bounties funded", href: "/issues", icon: Receipt },
    { label: "Milestones", href: "/milestones", icon: Milestone },
    { label: "Payments", href: "/dashboard/sponsor", icon: Wallet },
  ],
};

const roleSwitcher: { role: Role; label: string; href: string }[] = [
  { role: "contributor", label: "Contributor", href: "/dashboard/contributor" },
  { role: "maintainer", label: "Maintainer", href: "/dashboard/maintainer" },
  { role: "sponsor", label: "Sponsor", href: "/dashboard/sponsor" },
];

export function DashboardShell({
  role,
  title,
  subtitle,
  badge,
  action,
  children,
}: {
  role: Role;
  title: string;
  subtitle?: string;
  badge?: React.ReactNode;
  action?: React.ReactNode;
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const items = navByRole[role];

  return (
    <div className="mx-auto flex max-w-7xl gap-8 px-6 py-10">
      <aside className="hidden w-56 shrink-0 md:block">
        <div className="sticky top-24">
          <p className="px-3 text-xs font-medium uppercase tracking-widest text-slate-400 dark:text-slate-500">
            Dashboard
          </p>
          <nav className="mt-3 space-y-1">
            {items.map((item) => {
              const active = pathname === item.href;
              return (
                <Link
                  key={item.label}
                  href={item.href}
                  className={cn(
                    "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                    active
                      ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300"
                      : "text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800",
                  )}
                >
                  <item.icon className="h-4 w-4" />
                  {item.label}
                </Link>
              );
            })}
          </nav>

          <p className="mt-8 px-3 text-xs font-medium uppercase tracking-widest text-slate-400 dark:text-slate-500">
            Switch role
          </p>
          <nav className="mt-3 space-y-1">
            {roleSwitcher.map((r) => (
              <Link
                key={r.role}
                href={r.href}
                className={cn(
                  "block rounded-lg px-3 py-2 text-sm transition-colors",
                  r.role === role
                    ? "font-medium text-slate-900 dark:text-white"
                    : "text-slate-500 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-white",
                )}
              >
                {r.label}
              </Link>
            ))}
          </nav>
        </div>
      </aside>

      <div className="min-w-0 flex-1">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <div className="flex items-center gap-3">
              <h1 className="text-2xl font-semibold text-slate-900 dark:text-white sm:text-3xl">
                {title}
              </h1>
              {badge}
            </div>
            {subtitle && (
              <p className="mt-2 max-w-2xl text-slate-500 dark:text-slate-400">{subtitle}</p>
            )}
          </div>
          {action}
        </div>

        <div className="mt-8">{children}</div>
      </div>
    </div>
  );
}