61 lines
2.9 KiB
TypeScript
61 lines
2.9 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
// Organisasjonens spillerpool -- egen side (2026-08-18), lenket fra
|
||
|
|
// Medlemmer-siden (org-members.tsx). Se org-player-roster-panel.tsx for
|
||
|
|
// selve redigeringslogikken; denne filen er kun sideskallet (samme mønster
|
||
|
|
// som org-members.tsx: sticky header med tilbake-lenke + tittel).
|
||
|
|
|
||
|
|
import { useState } from "react"
|
||
|
|
import Link from "next/link"
|
||
|
|
import { ArrowLeft, Pencil } from "lucide-react"
|
||
|
|
import { OrgPlayerRosterPanel } from "@/components/org-player-roster-panel"
|
||
|
|
|
||
|
|
export function OrgPlayers({ organizationId, orgName }: { organizationId: string; orgName: string }) {
|
||
|
|
const [editing, setEditing] = useState(false)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex min-h-[100dvh] flex-col bg-background">
|
||
|
|
<header className="sticky top-0 z-10 border-b border-border bg-background/80 backdrop-blur">
|
||
|
|
<div className="mx-auto flex w-full max-w-2xl items-center gap-3 px-5 py-4">
|
||
|
|
<Link
|
||
|
|
href={`/organizations/${organizationId}/members?name=${encodeURIComponent(orgName)}`}
|
||
|
|
aria-label="Tilbake til medlemmer"
|
||
|
|
className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-border bg-card text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
|
||
|
|
>
|
||
|
|
<ArrowLeft aria-hidden="true" className="size-5" />
|
||
|
|
</Link>
|
||
|
|
<div className="flex min-w-0 flex-col">
|
||
|
|
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||
|
|
Spillerpool
|
||
|
|
</span>
|
||
|
|
<h1 className="truncate text-xl font-extrabold tracking-tight text-foreground">{orgName}</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main className="mx-auto w-full max-w-2xl flex-1 px-5 py-6 sm:py-8">
|
||
|
|
<p className="text-sm leading-relaxed text-muted-foreground text-pretty">
|
||
|
|
Alle spillere organisasjonen har registrert, på tvers av turneringer. Rediger navn, HCP,
|
||
|
|
kontaktinfo og andre felt direkte i tabellen.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setEditing(true)}
|
||
|
|
className="mt-6 flex min-h-11 w-full items-center gap-3 rounded-2xl border border-border bg-card p-4 text-left shadow-md shadow-black/8 transition-colors hover:border-primary/50 hover:bg-accent/40"
|
||
|
|
>
|
||
|
|
<div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted">
|
||
|
|
<Pencil aria-hidden="true" className="size-5 text-muted-foreground" />
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="text-sm font-bold text-foreground">Rediger spillere</span>
|
||
|
|
<span className="text-xs text-muted-foreground">Åpne tabellen -- samme visning som ved spillerimport</span>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
{editing && <OrgPlayerRosterPanel organizationId={organizationId} onClose={() => setEditing(false)} />}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|