Skip to content

Commit

Permalink
Extract a shared CodeViewer
Browse files Browse the repository at this point in the history
  • Loading branch information
samselikoff committed Aug 10, 2024
1 parent 4a7327e commit 47e3357
Show file tree
Hide file tree
Showing 6 changed files with 158 additions and 192 deletions.
1 change: 1 addition & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
119 changes: 2 additions & 117 deletions app/(main)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
"use client";

import CodeViewer from "@/components/code-viewer";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import { useScrollTo } from "@/hooks/use-scroll-to";
import { domain } from "@/utils/domain";
import * as shadcnComponents from "@/utils/shadcn";
import { Sandpack } from "@codesandbox/sandpack-react";
import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
import { CheckIcon } from "@heroicons/react/16/solid";
import { ArrowLongRightIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
import { ArrowUpOnSquareIcon } from "@heroicons/react/24/outline";
Expand Down Expand Up @@ -417,120 +415,7 @@ export default function Home() {
</div>
<div className="relative mt-8 w-full overflow-hidden">
<div className="isolate">
<Sandpack
theme={draculaTheme}
options={{
showNavigator: true,
externalResources: [
"https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
],
editorHeight: "80vh",
showTabs: false,
}}
files={{
"App.tsx": generatedCode,
"/lib/utils.ts": shadcnComponents.utils,
"/components/ui/accordion.tsx": shadcnComponents.accordian,
"/components/ui/alert-dialog.tsx":
shadcnComponents.alertDialog,
"/components/ui/alert.tsx": shadcnComponents.alert,
"/components/ui/avatar.tsx": shadcnComponents.avatar,
"/components/ui/badge.tsx": shadcnComponents.badge,
"/components/ui/breadcrumb.tsx":
shadcnComponents.breadcrumb,
"/components/ui/button.tsx": shadcnComponents.button,
"/components/ui/calendar.tsx": shadcnComponents.calendar,
"/components/ui/card.tsx": shadcnComponents.card,
"/components/ui/carousel.tsx": shadcnComponents.carousel,
"/components/ui/checkbox.tsx": shadcnComponents.checkbox,
"/components/ui/collapsible.tsx":
shadcnComponents.collapsible,
"/components/ui/dialog.tsx": shadcnComponents.dialog,
"/components/ui/drawer.tsx": shadcnComponents.drawer,
"/components/ui/dropdown-menu.tsx":
shadcnComponents.dropdownMenu,
"/components/ui/input.tsx": shadcnComponents.input,
"/components/ui/label.tsx": shadcnComponents.label,
"/components/ui/menubar.tsx": shadcnComponents.menuBar,
"/components/ui/navigation-menu.tsx":
shadcnComponents.navigationMenu,
"/components/ui/pagination.tsx":
shadcnComponents.pagination,
"/components/ui/popover.tsx": shadcnComponents.popover,
"/components/ui/progress.tsx": shadcnComponents.progress,
"/components/ui/radio-group.tsx":
shadcnComponents.radioGroup,
"/components/ui/select.tsx": shadcnComponents.select,
"/components/ui/separator.tsx": shadcnComponents.separator,
"/components/ui/skeleton.tsx": shadcnComponents.skeleton,
"/components/ui/slider.tsx": shadcnComponents.slider,
"/components/ui/switch.tsx":
shadcnComponents.switchComponent,
"/components/ui/table.tsx": shadcnComponents.table,
"/components/ui/tabs.tsx": shadcnComponents.tabs,
"/components/ui/textarea.tsx": shadcnComponents.textarea,
"/components/ui/toast.tsx": shadcnComponents.toast,
"/components/ui/toaster.tsx": shadcnComponents.toaster,
"/components/ui/toggle-group.tsx":
shadcnComponents.toggleGroup,
"/components/ui/toggle.tsx": shadcnComponents.toggle,
"/components/ui/tooltip.tsx": shadcnComponents.tooltip,
"/components/ui/use-toast.tsx": shadcnComponents.useToast,
"/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>`,
}}
template="react-ts"
customSetup={{
dependencies: {
"lucide-react": "latest",
recharts: "2.9.0",
"react-router-dom": "latest",
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-aspect-ratio": "^1.1.0",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-hover-card": "^1.1.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-menubar": "^1.1.1",
"@radix-ui/react-navigation-menu": "^1.2.0",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-radio-group": "^1.2.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slider": "^1.2.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"class-variance-authority": "^0.7.0",
clsx: "^2.1.1",
"date-fns": "^3.6.0",
"embla-carousel-react": "^8.1.8",
"react-day-picker": "^8.10.1",
"tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7",
vaul: "^0.9.1",
},
}}
/>
<CodeViewer code={generatedCode} showEditor />
</div>

<AnimatePresence>
Expand Down
50 changes: 0 additions & 50 deletions app/share/[id]/code-viewer.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion app/share/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { notFound } from "next/navigation";
import CodeViewer from "./code-viewer";
import CodeViewer from "@/components/code-viewer";
import client from "@/lib/prisma";
import type { Metadata } from "next";
import { cache } from "react";
Expand Down
154 changes: 154 additions & 0 deletions components/code-viewer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
"use client";

import * as shadcnComponents from "@/utils/shadcn";
import { Sandpack } from "@codesandbox/sandpack-react";
import {
SandpackPreview,
SandpackProvider,
} from "@codesandbox/sandpack-react/unstyled";
import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
import dedent from "dedent";

export default function CodeViewer({
code,
showEditor = false,
}: {
code: string;
showEditor?: boolean;
}) {
return showEditor ? (
<Sandpack
options={{
showNavigator: true,
editorHeight: "80vh",
showTabs: false,
...sharedOptions,
}}
files={{
"App.tsx": code,
...sharedFiles,
}}
{...sharedProps}
/>
) : (
<SandpackProvider
files={{
"App.tsx": code,
...sharedFiles,
}}
options={{ ...sharedOptions }}
{...sharedProps}
>
<SandpackPreview
showOpenInCodeSandbox={false}
showRefreshButton={false}
/>
</SandpackProvider>
);
}

let sharedProps = {
template: "react-ts",
theme: draculaTheme,
customSetup: {
dependencies: {
"lucide-react": "latest",
recharts: "2.9.0",
"react-router-dom": "latest",
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-aspect-ratio": "^1.1.0",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-hover-card": "^1.1.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-menubar": "^1.1.1",
"@radix-ui/react-navigation-menu": "^1.2.0",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-radio-group": "^1.2.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slider": "^1.2.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"class-variance-authority": "^0.7.0",
clsx: "^2.1.1",
"date-fns": "^3.6.0",
"embla-carousel-react": "^8.1.8",
"react-day-picker": "^8.10.1",
"tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7",
vaul: "^0.9.1",
},
},
} as const;

let sharedOptions = {
externalResources: [
"https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
],
};

let sharedFiles = {
"/lib/utils.ts": shadcnComponents.utils,
"/components/ui/accordion.tsx": shadcnComponents.accordian,
"/components/ui/alert-dialog.tsx": shadcnComponents.alertDialog,
"/components/ui/alert.tsx": shadcnComponents.alert,
"/components/ui/avatar.tsx": shadcnComponents.avatar,
"/components/ui/badge.tsx": shadcnComponents.badge,
"/components/ui/breadcrumb.tsx": shadcnComponents.breadcrumb,
"/components/ui/button.tsx": shadcnComponents.button,
"/components/ui/calendar.tsx": shadcnComponents.calendar,
"/components/ui/card.tsx": shadcnComponents.card,
"/components/ui/carousel.tsx": shadcnComponents.carousel,
"/components/ui/checkbox.tsx": shadcnComponents.checkbox,
"/components/ui/collapsible.tsx": shadcnComponents.collapsible,
"/components/ui/dialog.tsx": shadcnComponents.dialog,
"/components/ui/drawer.tsx": shadcnComponents.drawer,
"/components/ui/dropdown-menu.tsx": shadcnComponents.dropdownMenu,
"/components/ui/input.tsx": shadcnComponents.input,
"/components/ui/label.tsx": shadcnComponents.label,
"/components/ui/menubar.tsx": shadcnComponents.menuBar,
"/components/ui/navigation-menu.tsx": shadcnComponents.navigationMenu,
"/components/ui/pagination.tsx": shadcnComponents.pagination,
"/components/ui/popover.tsx": shadcnComponents.popover,
"/components/ui/progress.tsx": shadcnComponents.progress,
"/components/ui/radio-group.tsx": shadcnComponents.radioGroup,
"/components/ui/select.tsx": shadcnComponents.select,
"/components/ui/separator.tsx": shadcnComponents.separator,
"/components/ui/skeleton.tsx": shadcnComponents.skeleton,
"/components/ui/slider.tsx": shadcnComponents.slider,
"/components/ui/switch.tsx": shadcnComponents.switchComponent,
"/components/ui/table.tsx": shadcnComponents.table,
"/components/ui/tabs.tsx": shadcnComponents.tabs,
"/components/ui/textarea.tsx": shadcnComponents.textarea,
"/components/ui/toast.tsx": shadcnComponents.toast,
"/components/ui/toaster.tsx": shadcnComponents.toaster,
"/components/ui/toggle-group.tsx": shadcnComponents.toggleGroup,
"/components/ui/toggle.tsx": shadcnComponents.toggle,
"/components/ui/tooltip.tsx": shadcnComponents.tooltip,
"/components/ui/use-toast.tsx": shadcnComponents.useToast,
"/public/index.html": dedent`
<!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>
`,
};
24 changes: 0 additions & 24 deletions components/custom-sandpack.tsx

This file was deleted.

0 comments on commit 47e3357

Please sign in to comment.