74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
// components/portal/ProjectsSwitcher.tsx
|
||
"use client";
|
||
|
||
import { useRouter, useSearchParams } from "next/navigation";
|
||
import dynamic from "next/dynamic";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
// Canonical viewer page; use dynamic in a client component
|
||
const ProjectsView = dynamic(() => import("@/app/projects/page"), { ssr: false });
|
||
|
||
const TABS = [
|
||
{ key: "list", label: "Projects" },
|
||
{ key: "add", label: "Add Project" },
|
||
];
|
||
|
||
function Panel({ tab }: { tab: string }) {
|
||
switch (tab) {
|
||
case "list":
|
||
return (
|
||
<div className="rounded-md border p-4">
|
||
<ProjectsView />
|
||
</div>
|
||
);
|
||
case "add":
|
||
return (
|
||
<div className="rounded-md border p-4 space-y-3">
|
||
<h3 className="font-semibold">Add Project</h3>
|
||
<div className="text-sm opacity-70">
|
||
Project submission form will be embedded here. We’ll wire to an authenticated endpoint (e.g. <code>POST /api/my/projects</code>) and auto-assign owner.
|
||
</div>
|
||
<ul className="text-sm list-disc pl-5 opacity-70">
|
||
<li>Fields: name (required), description, attachments, etc.</li>
|
||
<li>Server derives <code>owner</code> from bearer (<code>/users/me</code>)</li>
|
||
<li>On success: toast + navigate back to list</li>
|
||
</ul>
|
||
</div>
|
||
);
|
||
default:
|
||
return null;
|
||
}
|
||
}
|
||
|
||
export default function ProjectsSwitcher() {
|
||
const router = useRouter();
|
||
const sp = useSearchParams();
|
||
const active = sp.get("t") || "list";
|
||
|
||
function setTab(nextKey: string) {
|
||
const q = new URLSearchParams(sp.toString());
|
||
q.set("t", nextKey);
|
||
router.replace(`/portal/projects?${q.toString()}`, { scroll: false });
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||
{TABS.map(({ key, label }) => (
|
||
<button
|
||
key={key}
|
||
onClick={() => setTab(key)}
|
||
className={cn(
|
||
"rounded-md border px-3 py-1.5 text-sm transition",
|
||
active === key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
|
||
)}
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<Panel tab={active} />
|
||
</div>
|
||
);
|
||
}
|