49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import type { Award } from "@/payload-types";
|
|
import { Button } from "@/components/ui/button";
|
|
import { AwardPickerDialog } from "./AwardPickerDialog";
|
|
import { AwardIcon, PlusIcon } from "lucide-react";
|
|
|
|
interface ProfileGrantAwardButtonProps {
|
|
userId: number;
|
|
username: string;
|
|
awards: Award[];
|
|
}
|
|
|
|
/**
|
|
* Profile-page section that lets viewers grant an award to the profile owner.
|
|
* Eligibility is enforced server-side (getGrantStats / grantAward inside
|
|
* GrantAwardDialog) — this component only provides the entry point.
|
|
*/
|
|
export function ProfileGrantAwardButton({ userId, username, awards }: ProfileGrantAwardButtonProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<section className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<AwardIcon className="size-4 text-muted-foreground" />
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
|
Grant Award
|
|
</h2>
|
|
</div>
|
|
<Button size="sm" variant="outline" onClick={() => setOpen(true)}>
|
|
<PlusIcon data-icon="inline-start" />
|
|
Grant Award
|
|
</Button>
|
|
</div>
|
|
<AwardPickerDialog
|
|
awards={awards}
|
|
recipientUserId={userId}
|
|
recipientUsername={username}
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
onGranted={() => router.refresh()}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|