João Henrique
b541f502ba
- Adicionado estrutura completa do projeto - Configurado MCP server para Premiere Pro - Adicionado documentação e skills - Configurado Gitignore para o projeto
79 lines
3.4 KiB
TypeScript
Executable File
79 lines
3.4 KiB
TypeScript
Executable File
"use client"
|
|
|
|
import { Check, Copy, TriangleAlert } from "lucide-react"
|
|
import { useState } from "react"
|
|
import { trackOnboardingEvent } from "@/lib/onboarding-events"
|
|
import { projectIntakePreviewPrompt, safeFirstPrompt } from "@/lib/product"
|
|
|
|
type CopyState = "idle" | "copied" | "unavailable"
|
|
|
|
type PromptCardProps = {
|
|
description: string
|
|
label: string
|
|
prompt: string
|
|
promptKind: "safe_check" | "intake_preview"
|
|
title: string
|
|
}
|
|
|
|
function PromptCard({ description, label, prompt, promptKind, title }: PromptCardProps) {
|
|
const [copyState, setCopyState] = useState<CopyState>("idle")
|
|
|
|
async function copyPrompt() {
|
|
try {
|
|
if (!navigator.clipboard?.writeText) throw new Error("Clipboard API is unavailable")
|
|
await navigator.clipboard.writeText(prompt)
|
|
setCopyState("copied")
|
|
trackOnboardingEvent("onboarding_project_intake_prompt_copied", { prompt_kind: promptKind })
|
|
window.setTimeout(() => setCopyState("idle"), 2200)
|
|
} catch {
|
|
setCopyState("unavailable")
|
|
}
|
|
}
|
|
|
|
return (
|
|
<article className="rounded-xl border border-zinc-800 bg-[#08080a] p-5 sm:p-6">
|
|
<p className="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-purple-300">{label}</p>
|
|
<h3 className="mt-3 text-xl font-semibold tracking-tight text-white">{title}</h3>
|
|
<p className="mt-3 max-w-2xl leading-7 text-zinc-400">{description}</p>
|
|
<code className="mt-5 block overflow-x-auto rounded-lg border border-zinc-800 bg-black px-4 py-4 text-sm leading-7 text-zinc-200 whitespace-pre-wrap">{prompt}</code>
|
|
<div className="mt-4 flex flex-col items-start gap-3 sm:flex-row sm:items-center">
|
|
<button
|
|
type="button"
|
|
onClick={copyPrompt}
|
|
className="inline-flex min-h-11 items-center gap-2 rounded-md border border-purple-300 bg-purple-300 px-4 py-2 text-sm font-semibold text-black transition-colors hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-300 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08080a]"
|
|
>
|
|
{copyState === "copied" ? <Check className="h-4 w-4" aria-hidden="true" /> : <Copy className="h-4 w-4" aria-hidden="true" />}
|
|
<span>{copyState === "copied" ? "Copied" : "Copy prompt"}</span>
|
|
</button>
|
|
{copyState === "unavailable" ? (
|
|
<p className="inline-flex items-center gap-2 text-sm text-amber-200" role="status">
|
|
<TriangleAlert className="h-4 w-4 shrink-0" aria-hidden="true" />
|
|
Copy is unavailable here. Select the visible prompt and copy it manually.
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export function ProjectIntakePrompts() {
|
|
return (
|
|
<div className="grid gap-5" aria-label="Project Intake prompts">
|
|
<PromptCard
|
|
label="Step 1 · Read-only"
|
|
title="Confirm the local connection"
|
|
description="Open a copied or non-sensitive project and an active sequence in Premiere. This check does not change the project."
|
|
prompt={safeFirstPrompt}
|
|
promptKind="safe_check"
|
|
/>
|
|
<PromptCard
|
|
label="Existing policy · Preview only"
|
|
title="Request the intake review"
|
|
description="Use an approved intake template. The result is a path-redacted report and proposed organization actions—not permission to organize the project."
|
|
prompt={projectIntakePreviewPrompt}
|
|
promptKind="intake_preview"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|