Built via two more parallel agent workflows (read schema -> return files), integrated + verified. Admin: /admin/emulator (emulator_settings + emulator_texts key/value editor), /admin/badges (give-badge via RCON), /admin/rare-values (CRUD), /admin/housekeeping (CRUD), /admin/email-templates (CRUD), /admin/photos (moderation). Public: /rares (+[category]), /leaderboard (credits/diamonds/duckets), /guilds (+[id] members), /redeem (voucher -> sendCurrency). Expanded: /u/[username] now shows badges + photos + guestbook (post form); /news/[slug] now shows reactions + comments (comment form). Reactions tallied in JS (Prisma groupBy typing avoided). Self-hosted Nunito via next/font/google wired to --font-nunito (the atom theme font, no runtime external fetch). Header + admin nav extended. Verified: tsc exit 0, vitest 48/48, next build exit 0.
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useActionState } from "react";
|
|
import { redeem, type RedeemState } from "@/actions/voucher";
|
|
|
|
const initialState: RedeemState = null;
|
|
|
|
/**
|
|
* Client form for /redeem. Uses useActionState so the redeem() server action's
|
|
* feedback ({ ok, message }) can be rendered inline without a redirect.
|
|
*/
|
|
export default function RedeemForm() {
|
|
const [state, formAction, pending] = useActionState(redeem, initialState);
|
|
|
|
return (
|
|
<form
|
|
action={formAction}
|
|
style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}
|
|
>
|
|
<input
|
|
name="code"
|
|
maxLength={255}
|
|
placeholder="Enter your voucher code"
|
|
aria-label="Voucher code"
|
|
autoComplete="off"
|
|
required
|
|
/>
|
|
<div>
|
|
<button type="submit" className="btn btn-primary" disabled={pending}>
|
|
{pending ? "Redeeming…" : "Redeem voucher"}
|
|
</button>
|
|
</div>
|
|
|
|
{state ? (
|
|
<p
|
|
role="status"
|
|
aria-live="polite"
|
|
style={{
|
|
margin: "0.25rem 0 0",
|
|
fontWeight: 700,
|
|
color: state.ok ? "var(--color-secondary-hover)" : "var(--color-danger)",
|
|
}}
|
|
>
|
|
{state.message}
|
|
</p>
|
|
) : null}
|
|
</form>
|
|
);
|
|
}
|