[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","69027c6c052c8191aa2dc91c54d5f9a8","versionInt","title","Divisio Capital — In‑browser Sign‑up (react Demo)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n// In‑browser demo only — data is stored in localStorage on THIS device.\n// For a production, multi‑user solution, use the Node/SQLite server I provided earlier.\n\nconst STORAGE_KEY = \"divisioCapital_signups_v1\";\n\nfunction useLocalStorage(key, initial) {\n const [value, setValue] = useState(() => {\n try {\n const raw = localStorage.getItem(key);\n return raw ? JSON.parse(raw) : initial;\n } catch (e) {\n return initial;\n }\n });\n useEffect(() => {\n try {\n localStorage.setItem(key, JSON.stringify(value));\n } catch (e) {}\n }, [key, value]);\n return [value, setValue];\n}\n\nfunction emailIsValid(email) {\n return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(String(email || \"\").toLowerCase());\n}\n\nfunction classNames(...xs) {\n return xs.filter(Boolean).join(\" \");\n}\n\nexport default function App() {\n const [tab, setTab] = useState(\"signup\");\n const [signups, setSignups] = useLocalStorage(STORAGE_KEY, []);\n const [query, setQuery] = useState(\"\");\n\n const total = signups.length;\n\n const filtered = useMemo(() => {\n const q = query.trim().toLowerCase();\n if (!q) return [...signups].sort((a, b) => b.ts - a.ts);\n return [...signups]\n .filter((r) =>\n [r.name, r.email, r.company].some((v) => (v || \"\").toLowerCase().includes(q))\n )\n .sort((a, b) => b.ts - a.ts);\n }, [signups, query]);\n\n return (\n

\n {tab === \"signup\" ? (\n setTab(\"admin\")} />\n ) : (\n \n )}\n\n

\n );\n}\n\nfunction Header({ tab, setTab, total }) {\n return (\n

\n dC\n

Welcome to

divisioCapital

\n \n Live\n {total.toLocaleString()}\n total sign‑ups\n \n

\n setTab(\"signup\")}\n className={classNames(\n \"px-3 py-1.5 rounded-lg text-sm\",\n tab === \"signup\" ? \"bg-white/10\" : \"hover:bg-white/5\"\n )}\n >\n Sign up\n \n setTab(\"admin\")}\n className={classNames(\n \"px-3 py-1.5 rounded-lg text-sm\",\n tab === \"admin\" ? \"bg-white/10\" : \"hover:bg-white/5\"\n )}\n >\n Admin\n \n

\n );\n}\n\nfunction SignupCard({ signups, setSignups, switchToAdmin }) {\n const [name, setName] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [company, setCompany] = useState(\"\");\n const [website, setWebsite] = useState(\"\"); // honeypot\n const [status, setStatus] = useState(null); // success | error | info\n const [message, setMessage] = useState(\"\");\n\n function submit(e) {\n e.preventDefault();\n setStatus(null);\n setMessage(\"\");\n\n if (website) {\n setStatus(\"success\");\n setMessage(\"Thanks for joining!\");\n return;\n }\n\n const cleanName = name.trim().slice(0, 100);\n const cleanEmail = email.trim().toLowerCase().slice(0, 150);\n const cleanCompany = company.trim().slice(0, 120);\n\n const errs = [];\n if (!cleanName) errs.push(\"Name is required.\");\n if (!emailIsValid(cleanEmail)) errs.push(\"Please enter a valid email.\");\n\n if (errs.length) {\n setStatus(\"error\");\n setMessage(errs.join(\" \"));\n return;\n }\n\n const exists = signups.some((s) => s.email.toLowerCase() === cleanEmail);\n if (exists) {\n setStatus(\"info\");\n setMessage(\"You're already on the list — welcome back!\");\n return;\n }\n\n const rec = {\n id: Math.random().toString(36).slice(2, 10),\n name: cleanName,\n email: cleanEmail,\n company: cleanCompany || \"\",\n ts: Date.now(),\n ip: \"local-demo\",\n };\n\n setSignups((xs) => [...xs, rec]);\n setStatus(\"success\");\n setMessage(`🎉 Thanks, ${cleanName}! We'll be in touch at ${cleanEmail}.`);\n setName(\"\");\n setEmail(\"\");\n setCompany(\"\");\n }\n\n return (\n

Join our early access list

Be the first to know when new features drop.

\n Live\n \n {/* Count updates automatically from local state */}\n {signups.length.toLocaleString()}\n \n total sign‑ups\n

\n Track interest in real‑time. Use the Admin tab to see who signed up.\n

\n \n Open Admin\n \n

\n );\n}\n\nfunction Field({ label, children }) {\n return (\n \n {label}\n {children}\n \n );\n}\n\nfunction AdminCard({ signups, setSignups, raw, query, setQuery }) {\n const emailsRef = useRef(null);\n\n function clearAll() {\n if (confirm(\"Clear ALL demo sign‑ups on this device?\")) setSignups([]);\n }\n\n function exportCSV() {\n const headers = [\"id\", \"name\", \"email\", \"company\", \"created_at\", \"source_ip\"];\n const rows = raw\n .slice()\n .sort((a, b) => b.ts - a.ts)\n .map((r) => [r.id, r.name, r.email, r.company || \"\", new Date(r.ts).toISOString(), r.ip || \"local-demo\"]);\n\n const csv = [headers.join(\",\"), ...rows.map((r) => r.map((v) => `\"${String(v).replace(/\"/g, '\"\"')}\"`).join(\",\"))].join(\"\\n\");\n\n const blob = new Blob([csv], { type: \"text/csv;charset=utf-8;\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `divisiocapital-signups-${new Date().toISOString().slice(0, 10)}.csv`;\n document.body.appendChild(a);\n a.click();\n a.remove();\n URL.revokeObjectURL(url);\n }\n\n function copyEmails() {\n const text = raw.map((r) => r.email).join(\", \");\n navigator.clipboard.writeText(text).then(() => {\n alert(\"Emails copied to clipboard.\");\n });\n }\n\n return (\n

\n \n Search (name, email, company)\n setQuery(e.target.value)}\n />\n \n

\n \n \n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {signups.length === 0 ? (\n \n \n \n ) : (\n signups.map((r) => (\n \n \n \n \n \n \n \n \n ))\n )}\n \n

ID	Name	Email	Company	Signed up	IP
\n No sign‑ups yet.\n
{r.id}	{r.name}	{r.email}	{r.company \|\| \"\"}	{new Date(r.ts).toLocaleString()}	{r.ip \|\| \"local-demo\"}

\n\n

\n Demo only — data is stored in your browser's localStorage so you can “view it on here”. For real sign‑ups from\n multiple users, deploy the server version.\n

\n );\n}\n\nfunction Footer() {\n return (\n \n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","14499300994466526060","traceTime",1776532334833]