spb/fetcha

1"use client";2import * as React from "react";3import Link from "next/link";4import { Alert } from "@/components/ui/alert";5import { Button } from "@/components/ui/button";6import { CopyButton } from "@/components/ui/copy-button";7import { CodeBlock } from "@/components/ui/code-block";8import { curlSnippet } from "@/lib/account-snippets";910/**11 * One-time display of a freshly created / rotated key. The plaintext is only ever12 * available in memory here — it is never sent back by the server again.13 */14export function KeyReveal({ plaintext, name, onDone, doneLabel = "Done", compact }: { plaintext: string; name: string; onDone?: () => void; doneLabel?: string; compact?: boolean }) {15  const [ack, setAck] = React.useState(false);16  return (17    <div className="grid gap-4">18      <Alert variant="warning" title="Copy your key now — it will not be shown again.">19        We store only a hash of this key. If you lose it, rotate the key to get a new one.20      </Alert>21      <div className="grid gap-1.5">22        <div className="text-[12px] font-medium text-fg-subtle">{name}</div>23        <div className="flex items-center gap-2 rounded-md border border-border bg-bg-subtle px-3 py-2">24          <code className="min-w-0 flex-1 select-all break-all font-mono text-[13px] tabular">{plaintext}</code>25          <CopyButton value={plaintext} label="Copy" variant="outline" size="sm" />26        </div>27      </div>28      {!compact ? <CodeBlock code={curlSnippet(plaintext)} lang="bash" title="Try it — first request" maxHeight={180} /> : null}29      {onDone ? (30        <div className="flex flex-col gap-3 border-t border-border pt-4 sm:flex-row sm:items-center sm:justify-between">31          <label className="flex items-start gap-2 text-[13px] text-fg-muted">32            <input type="checkbox" checked={ack} onChange={(e) => setAck(e.target.checked)} className="mt-0.5 size-4 rounded border-border accent-[var(--accent)]" />33            I have stored this key somewhere safe.34          </label>35          <div className="flex items-center gap-2">36            <Button asChild variant="ghost" size="sm">37              <Link href="/dashboard/playground">Open Playground</Link>38            </Button>39            <Button size="sm" disabled={!ack} onClick={onDone}>40              {doneLabel}41            </Button>42          </div>43        </div>44      ) : null}45    </div>46  );47}48