Files
Epicnabbo-Catalogus-Updated…/src/app/redeem/RedeemForm.tsx
T
Simo e8be0461d8 Add niche admin + public expansions + self-host Nunito font (batches 3-4)
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.
2026-06-28 13:44:23 +02:00

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>
);
}