wip

Nutlope · Nutlope · commit a186837135c1 · 2024-08-08T09:28:26.000-07:00
diff --git a/app/share/[id]/code-viewer.tsx b/app/share/[id]/code-viewer.tsx
@@ -6,19 +6,39 @@ import {
 } from "@codesandbox/sandpack-react/unstyled";
 import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
 
+// TODO: Add shadcn components + library (recharts, lucide-react)
 export default function CodeViewer({ code }: { code: string }) {
   return (
     <SandpackProvider
       template="react-ts"
       theme={draculaTheme}
       files={{
         "App.tsx": code,
+        "/public/index.html": `
+        <!DOCTYPE html>
+          <html lang="en">
+            <head>
+              <meta charset="UTF-8">
+              <meta name="viewport" content="width=device-width, initial-scale=1.0">
+              <title>Document</title>
+              <script src="https://cdn.tailwindcss.com"></script>
+            </head>
+            <body>
+              <div id="root"></div>
+            </body>
+          </html>`,
       }}
       options={{
         externalResources: [
           "https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
         ],
       }}
+      customSetup={{
+        dependencies: {
+          "lucide-react": "latest",
+          recharts: "2.9.0",
+        },
+      }}
     >
       <SandpackPreview
         showOpenInCodeSandbox={false}
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
@@ -11,7 +11,7 @@ async function getCode(id: string) {
   Database schemahttp://localhost:3000/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fhalo.c1bc0835.png&w=3840&q=75
 
   id (@uuid) | model (TEXT) |  prompt (TEXT)  | code (TEXT) | createdAt (auto datetime)
-  ------------------------------------------------------------------------------------- 
+  -------------------------------------------------------------------------------------
   abkens     | llama-405b   | Build me a.... | function.... | now()
   islkns     | llama-405b   | Build me a.... | function.... | now()
 
