1"use client";
2
3
11import { useState } from "react";
12import { Check, Copy } from "lucide-react";
13import { API_BASE } from "@/lib/constants";
14
15const KEY = "$FACTORY_API_KEY";
16
17function CurlCard({ title, code }: { title: string; code: string }) {
18 const [copied, setCopied] = useState(false);
19 const doCopy = async () => {
20 let ok = false;
21 try {
22 await navigator.clipboard.writeText(code);
23 ok = true;
24 } catch {
25 try {
26 const ta = document.createElement("textarea");
27 ta.value = code;
28 ta.setAttribute("readonly", "");
29 ta.style.position = "fixed";
30 ta.style.opacity = "0";
31 document.body.appendChild(ta);
32 ta.select();
33 ok = document.execCommand("copy");
34 document.body.removeChild(ta);
35 } catch {
36 ok = false;
37 }
38 }
39 setCopied(ok);
40 setTimeout(() => setCopied(false), 2000);
41 };
42 return (
43 <div className="rounded-md border border-border">
44 <div className="flex items-center justify-between border-b border-border px-2.5 py-1.5">
45 <p className="text-xs font-medium text-muted-foreground">{title}</p>
46 <button
47 type="button"
48 onClick={doCopy}
49 aria-label={`Copy ${title} example`}
50 className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] hover:bg-accent"
51 >
52 {copied ? (
53 <Check className="size-3 text-emerald-600" aria-hidden />
54 ) : (
55 <Copy className="size-3" aria-hidden />
56 )}
57 {copied ? "Copied" : "Copy"}
58 </button>
59 </div>
60 <span role="status" className="sr-only">
61 {copied ? `${title} example copied` : ""}
62 </span>
63 <pre className="overflow-x-auto p-2.5 font-mono text-[11px] leading-relaxed">{code}</pre>
64 </div>
65 );
66}
67
68export function CurlExamples({ workspaceSlug }: { workspaceSlug: string }) {
69 const W = `${API_BASE}/workspaces/${workspaceSlug}`;
70
71 const pages = `# List pages
72curl -s ${W}/pages -H "Authorization: Bearer ${KEY}"
73
74# Create a page
75curl -s -X POST ${W}/pages -H "Authorization: Bearer ${KEY}" \\
76 -H 'Content-Type: application/json' -d '{"title":"Q2 Launch Checklist"}'
77
78# Update (rename)
79curl -s -X PATCH ${W}/pages/<pageId> -H "Authorization: Bearer ${KEY}" \\
80 -H 'Content-Type: application/json' -d '{"title":"Risks"}'`;
81
82 const databases = `# List databases
83curl -s ${W}/databases -H "Authorization: Bearer ${KEY}"
84
85# Create a database (page of type "database")
86curl -s -X POST ${W}/pages -H "Authorization: Bearer ${KEY}" \\
87 -H 'Content-Type: application/json' -d '{"title":"Tasks","type":"database"}'
88
89# Add a record
90curl -s -X POST ${W}/databases/<dbId>/records -H "Authorization: Bearer ${KEY}" \\
91 -H 'Content-Type: application/json' -d '{"title":"Ship the release"}'`;
92
93 const records = `# List records
94curl -s ${W}/databases/<dbId>/records -H "Authorization: Bearer ${KEY}"
95
96# Update a record
97curl -s -X PATCH ${W}/records/<recordId> -H "Authorization: Bearer ${KEY}" \\
98 -H 'Content-Type: application/json' -d '{"title":"Shipped"}'`;
99
100 const comments = `# List comments on a page
101curl -s ${W}/pages/<pageId>/comments -H "Authorization: Bearer ${KEY}"
102
103# Add a comment
104curl -s -X POST ${API_BASE}/comments -H "Authorization: Bearer ${KEY}" \\
105 -H 'Content-Type: application/json' \\
106 -d '{"targetType":"page","targetId":"<pageId>","body":"Looks good"}'`;
107
108 const files = `# Upload a file (multipart)
109curl -s -X POST ${W}/files -H "Authorization: Bearer ${KEY}" \\
110 -F "file=@./diagram.png"
111
112# Download
113curl -s ${W}/files/<fileId> -H "Authorization: Bearer ${KEY}" -o diagram.png`;
114
115 const webhooks = `# List webhooks
116curl -s ${W}/webhooks -H "Authorization: Bearer ${KEY}"
117
118# Create a webhook (returns the secret ONCE)
119curl -s -X POST ${W}/webhooks -H "Authorization: Bearer ${KEY}" \\
120 -H 'Content-Type: application/json' -d '{"url":"https://example.com/hook","events":["page.*"]}'
121
122# Send a test delivery
123curl -s -X POST ${W}/webhooks/<webhookId>/test -H "Authorization: Bearer ${KEY}"`;
124
125 return (
126 <div className="space-y-3">
127 <p className="text-xs text-muted-foreground">
128 Replace <code className="font-mono"><…></code> placeholders with real ids and set{" "}
129 <code className="font-mono">FACTORY_API_KEY</code> to a key created in the{" "}
130 <span className="font-medium text-foreground">API keys</span> tab.
131 </p>
132 <CurlCard title="Pages" code={pages} />
133 <CurlCard title="Databases" code={databases} />
134 <CurlCard title="Records" code={records} />
135 <CurlCard title="Comments" code={comments} />
136 <CurlCard title="Files" code={files} />
137 <CurlCard title="Webhooks" code={webhooks} />
138 </div>
139 );
140}
141
