35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { CodeBlock } from '@/components/code-block';
|
||
|
|
import { ChevronDown, ChevronRight } from 'lucide-react';
|
||
|
|
import { useState } from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Client island: the "audit the generated code before you fork" toggle. Kept
|
||
|
|
* out of the server-rendered page so the page itself stays static + indexable.
|
||
|
|
*/
|
||
|
|
export function CollapsibleCode({ code }: { code: string }) {
|
||
|
|
const [show, setShow] = useState(false);
|
||
|
|
return (
|
||
|
|
<section className="mt-10">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setShow((s) => !s)}
|
||
|
|
className="inline-flex items-center gap-1 text-[14px] font-semibold tracking-tight text-[--color-fg] transition-colors hover:text-[--color-fg-muted]"
|
||
|
|
>
|
||
|
|
{show ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
||
|
|
Generated code ({code.length} chars)
|
||
|
|
</button>
|
||
|
|
<p className="mt-1 text-[12px] text-[--color-fg-muted]">
|
||
|
|
Audit before you fork. We re-scan every published template for banned patterns (eval,
|
||
|
|
child_process, prompt-injection markers).
|
||
|
|
</p>
|
||
|
|
{show && (
|
||
|
|
<div className="mt-3">
|
||
|
|
<CodeBlock label="src/server.ts" code={code} />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|