Skip to content

Commit 47e3357

Browse files
samselikoffsamselikoff
committed
Extract a shared CodeViewer
1 parent 4a7327e commit 47e3357

6 files changed

Lines changed: 158 additions & 192 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎app/(main)/page.tsx‎

Lines changed: 2 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
"use client";
22

3+
import CodeViewer from "@/components/code-viewer";
34
import Footer from "@/components/Footer";
45
import Header from "@/components/Header";
56
import { useScrollTo } from "@/hooks/use-scroll-to";
67
import { domain } from "@/utils/domain";
7-
import * as shadcnComponents from "@/utils/shadcn";
8-
import { Sandpack } from "@codesandbox/sandpack-react";
9-
import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
108
import { CheckIcon } from "@heroicons/react/16/solid";
119
import { ArrowLongRightIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
1210
import { ArrowUpOnSquareIcon } from "@heroicons/react/24/outline";
@@ -417,120 +415,7 @@ export default function Home() {
417415
</div>
418416
<div className="relative mt-8 w-full overflow-hidden">
419417
<div className="isolate">
420-
<Sandpack
421-
theme={draculaTheme}
422-
options={{
423-
showNavigator: true,
424-
externalResources: [
425-
"https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
426-
],
427-
editorHeight: "80vh",
428-
showTabs: false,
429-
}}
430-
files={{
431-
"App.tsx": generatedCode,
432-
"/lib/utils.ts": shadcnComponents.utils,
433-
"/components/ui/accordion.tsx": shadcnComponents.accordian,
434-
"/components/ui/alert-dialog.tsx":
435-
shadcnComponents.alertDialog,
436-
"/components/ui/alert.tsx": shadcnComponents.alert,
437-
"/components/ui/avatar.tsx": shadcnComponents.avatar,
438-
"/components/ui/badge.tsx": shadcnComponents.badge,
439-
"/components/ui/breadcrumb.tsx":
440-
shadcnComponents.breadcrumb,
441-
"/components/ui/button.tsx": shadcnComponents.button,
442-
"/components/ui/calendar.tsx": shadcnComponents.calendar,
443-
"/components/ui/card.tsx": shadcnComponents.card,
444-
"/components/ui/carousel.tsx": shadcnComponents.carousel,
445-
"/components/ui/checkbox.tsx": shadcnComponents.checkbox,
446-
"/components/ui/collapsible.tsx":
447-
shadcnComponents.collapsible,
448-
"/components/ui/dialog.tsx": shadcnComponents.dialog,
449-
"/components/ui/drawer.tsx": shadcnComponents.drawer,
450-
"/components/ui/dropdown-menu.tsx":
451-
shadcnComponents.dropdownMenu,
452-
"/components/ui/input.tsx": shadcnComponents.input,
453-
"/components/ui/label.tsx": shadcnComponents.label,
454-
"/components/ui/menubar.tsx": shadcnComponents.menuBar,
455-
"/components/ui/navigation-menu.tsx":
456-
shadcnComponents.navigationMenu,
457-
"/components/ui/pagination.tsx":
458-
shadcnComponents.pagination,
459-
"/components/ui/popover.tsx": shadcnComponents.popover,
460-
"/components/ui/progress.tsx": shadcnComponents.progress,
461-
"/components/ui/radio-group.tsx":
462-
shadcnComponents.radioGroup,
463-
"/components/ui/select.tsx": shadcnComponents.select,
464-
"/components/ui/separator.tsx": shadcnComponents.separator,
465-
"/components/ui/skeleton.tsx": shadcnComponents.skeleton,
466-
"/components/ui/slider.tsx": shadcnComponents.slider,
467-
"/components/ui/switch.tsx":
468-
shadcnComponents.switchComponent,
469-
"/components/ui/table.tsx": shadcnComponents.table,
470-
"/components/ui/tabs.tsx": shadcnComponents.tabs,
471-
"/components/ui/textarea.tsx": shadcnComponents.textarea,
472-
"/components/ui/toast.tsx": shadcnComponents.toast,
473-
"/components/ui/toaster.tsx": shadcnComponents.toaster,
474-
"/components/ui/toggle-group.tsx":
475-
shadcnComponents.toggleGroup,
476-
"/components/ui/toggle.tsx": shadcnComponents.toggle,
477-
"/components/ui/tooltip.tsx": shadcnComponents.tooltip,
478-
"/components/ui/use-toast.tsx": shadcnComponents.useToast,
479-
"/public/index.html": `<!DOCTYPE html>
480-
<html lang="en">
481-
<head>
482-
<meta charset="UTF-8">
483-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
484-
<title>Document</title>
485-
<script src="https://cdn.tailwindcss.com"></script>
486-
</head>
487-
<body>
488-
<div id="root"></div>
489-
</body>
490-
</html>`,
491-
}}
492-
template="react-ts"
493-
customSetup={{
494-
dependencies: {
495-
"lucide-react": "latest",
496-
recharts: "2.9.0",
497-
"react-router-dom": "latest",
498-
"@radix-ui/react-accordion": "^1.2.0",
499-
"@radix-ui/react-alert-dialog": "^1.1.1",
500-
"@radix-ui/react-aspect-ratio": "^1.1.0",
501-
"@radix-ui/react-avatar": "^1.1.0",
502-
"@radix-ui/react-checkbox": "^1.1.1",
503-
"@radix-ui/react-collapsible": "^1.1.0",
504-
"@radix-ui/react-dialog": "^1.1.1",
505-
"@radix-ui/react-dropdown-menu": "^2.1.1",
506-
"@radix-ui/react-hover-card": "^1.1.1",
507-
"@radix-ui/react-label": "^2.1.0",
508-
"@radix-ui/react-menubar": "^1.1.1",
509-
"@radix-ui/react-navigation-menu": "^1.2.0",
510-
"@radix-ui/react-popover": "^1.1.1",
511-
"@radix-ui/react-progress": "^1.1.0",
512-
"@radix-ui/react-radio-group": "^1.2.0",
513-
"@radix-ui/react-select": "^2.1.1",
514-
"@radix-ui/react-separator": "^1.1.0",
515-
"@radix-ui/react-slider": "^1.2.0",
516-
"@radix-ui/react-slot": "^1.1.0",
517-
"@radix-ui/react-switch": "^1.1.0",
518-
"@radix-ui/react-tabs": "^1.1.0",
519-
"@radix-ui/react-toast": "^1.2.1",
520-
"@radix-ui/react-toggle": "^1.1.0",
521-
"@radix-ui/react-toggle-group": "^1.1.0",
522-
"@radix-ui/react-tooltip": "^1.1.2",
523-
"class-variance-authority": "^0.7.0",
524-
clsx: "^2.1.1",
525-
"date-fns": "^3.6.0",
526-
"embla-carousel-react": "^8.1.8",
527-
"react-day-picker": "^8.10.1",
528-
"tailwind-merge": "^2.4.0",
529-
"tailwindcss-animate": "^1.0.7",
530-
vaul: "^0.9.1",
531-
},
532-
}}
533-
/>
418+
<CodeViewer code={generatedCode} showEditor />
534419
</div>
535420

536421
<AnimatePresence>

‎app/share/[id]/code-viewer.tsx‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎app/share/[id]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { notFound } from "next/navigation";
2-
import CodeViewer from "./code-viewer";
2+
import CodeViewer from "@/components/code-viewer";
33
import client from "@/lib/prisma";
44
import type { Metadata } from "next";
55
import { cache } from "react";

‎components/code-viewer.tsx‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
"use client";
2+
3+
import * as shadcnComponents from "@/utils/shadcn";
4+
import { Sandpack } from "@codesandbox/sandpack-react";
5+
import {
6+
SandpackPreview,
7+
SandpackProvider,
8+
} from "@codesandbox/sandpack-react/unstyled";
9+
import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
10+
import dedent from "dedent";
11+
12+
export default function CodeViewer({
13+
code,
14+
showEditor = false,
15+
}: {
16+
code: string;
17+
showEditor?: boolean;
18+
}) {
19+
return showEditor ? (
20+
<Sandpack
21+
options={{
22+
showNavigator: true,
23+
editorHeight: "80vh",
24+
showTabs: false,
25+
...sharedOptions,
26+
}}
27+
files={{
28+
"App.tsx": code,
29+
...sharedFiles,
30+
}}
31+
{...sharedProps}
32+
/>
33+
) : (
34+
<SandpackProvider
35+
files={{
36+
"App.tsx": code,
37+
...sharedFiles,
38+
}}
39+
options={{ ...sharedOptions }}
40+
{...sharedProps}
41+
>
42+
<SandpackPreview
43+
showOpenInCodeSandbox={false}
44+
showRefreshButton={false}
45+
/>
46+
</SandpackProvider>
47+
);
48+
}
49+
50+
let sharedProps = {
51+
template: "react-ts",
52+
theme: draculaTheme,
53+
customSetup: {
54+
dependencies: {
55+
"lucide-react": "latest",
56+
recharts: "2.9.0",
57+
"react-router-dom": "latest",
58+
"@radix-ui/react-accordion": "^1.2.0",
59+
"@radix-ui/react-alert-dialog": "^1.1.1",
60+
"@radix-ui/react-aspect-ratio": "^1.1.0",
61+
"@radix-ui/react-avatar": "^1.1.0",
62+
"@radix-ui/react-checkbox": "^1.1.1",
63+
"@radix-ui/react-collapsible": "^1.1.0",
64+
"@radix-ui/react-dialog": "^1.1.1",
65+
"@radix-ui/react-dropdown-menu": "^2.1.1",
66+
"@radix-ui/react-hover-card": "^1.1.1",
67+
"@radix-ui/react-label": "^2.1.0",
68+
"@radix-ui/react-menubar": "^1.1.1",
69+
"@radix-ui/react-navigation-menu": "^1.2.0",
70+
"@radix-ui/react-popover": "^1.1.1",
71+
"@radix-ui/react-progress": "^1.1.0",
72+
"@radix-ui/react-radio-group": "^1.2.0",
73+
"@radix-ui/react-select": "^2.1.1",
74+
"@radix-ui/react-separator": "^1.1.0",
75+
"@radix-ui/react-slider": "^1.2.0",
76+
"@radix-ui/react-slot": "^1.1.0",
77+
"@radix-ui/react-switch": "^1.1.0",
78+
"@radix-ui/react-tabs": "^1.1.0",
79+
"@radix-ui/react-toast": "^1.2.1",
80+
"@radix-ui/react-toggle": "^1.1.0",
81+
"@radix-ui/react-toggle-group": "^1.1.0",
82+
"@radix-ui/react-tooltip": "^1.1.2",
83+
"class-variance-authority": "^0.7.0",
84+
clsx: "^2.1.1",
85+
"date-fns": "^3.6.0",
86+
"embla-carousel-react": "^8.1.8",
87+
"react-day-picker": "^8.10.1",
88+
"tailwind-merge": "^2.4.0",
89+
"tailwindcss-animate": "^1.0.7",
90+
vaul: "^0.9.1",
91+
},
92+
},
93+
} as const;
94+
95+
let sharedOptions = {
96+
externalResources: [
97+
"https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
98+
],
99+
};
100+
101+
let sharedFiles = {
102+
"/lib/utils.ts": shadcnComponents.utils,
103+
"/components/ui/accordion.tsx": shadcnComponents.accordian,
104+
"/components/ui/alert-dialog.tsx": shadcnComponents.alertDialog,
105+
"/components/ui/alert.tsx": shadcnComponents.alert,
106+
"/components/ui/avatar.tsx": shadcnComponents.avatar,
107+
"/components/ui/badge.tsx": shadcnComponents.badge,
108+
"/components/ui/breadcrumb.tsx": shadcnComponents.breadcrumb,
109+
"/components/ui/button.tsx": shadcnComponents.button,
110+
"/components/ui/calendar.tsx": shadcnComponents.calendar,
111+
"/components/ui/card.tsx": shadcnComponents.card,
112+
"/components/ui/carousel.tsx": shadcnComponents.carousel,
113+
"/components/ui/checkbox.tsx": shadcnComponents.checkbox,
114+
"/components/ui/collapsible.tsx": shadcnComponents.collapsible,
115+
"/components/ui/dialog.tsx": shadcnComponents.dialog,
116+
"/components/ui/drawer.tsx": shadcnComponents.drawer,
117+
"/components/ui/dropdown-menu.tsx": shadcnComponents.dropdownMenu,
118+
"/components/ui/input.tsx": shadcnComponents.input,
119+
"/components/ui/label.tsx": shadcnComponents.label,
120+
"/components/ui/menubar.tsx": shadcnComponents.menuBar,
121+
"/components/ui/navigation-menu.tsx": shadcnComponents.navigationMenu,
122+
"/components/ui/pagination.tsx": shadcnComponents.pagination,
123+
"/components/ui/popover.tsx": shadcnComponents.popover,
124+
"/components/ui/progress.tsx": shadcnComponents.progress,
125+
"/components/ui/radio-group.tsx": shadcnComponents.radioGroup,
126+
"/components/ui/select.tsx": shadcnComponents.select,
127+
"/components/ui/separator.tsx": shadcnComponents.separator,
128+
"/components/ui/skeleton.tsx": shadcnComponents.skeleton,
129+
"/components/ui/slider.tsx": shadcnComponents.slider,
130+
"/components/ui/switch.tsx": shadcnComponents.switchComponent,
131+
"/components/ui/table.tsx": shadcnComponents.table,
132+
"/components/ui/tabs.tsx": shadcnComponents.tabs,
133+
"/components/ui/textarea.tsx": shadcnComponents.textarea,
134+
"/components/ui/toast.tsx": shadcnComponents.toast,
135+
"/components/ui/toaster.tsx": shadcnComponents.toaster,
136+
"/components/ui/toggle-group.tsx": shadcnComponents.toggleGroup,
137+
"/components/ui/toggle.tsx": shadcnComponents.toggle,
138+
"/components/ui/tooltip.tsx": shadcnComponents.tooltip,
139+
"/components/ui/use-toast.tsx": shadcnComponents.useToast,
140+
"/public/index.html": dedent`
141+
<!DOCTYPE html>
142+
<html lang="en">
143+
<head>
144+
<meta charset="UTF-8">
145+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
146+
<title>Document</title>
147+
<script src="https://cdn.tailwindcss.com"></script>
148+
</head>
149+
<body>
150+
<div id="root"></div>
151+
</body>
152+
</html>
153+
`,
154+
};

‎components/custom-sandpack.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

0 commit comments

Comments
 (0)