sandbox

1"use client";
2 
3import type {
4  CodeEditorProps,
5  PreviewProps,
6  SandpackLayoutProps,
7  SandpackProviderProps,
8} from "@codesandbox/sandpack-react";
9import {
10  SandpackCodeEditor,
11  SandpackConsole,
12  SandpackFileExplorer,
13  SandpackLayout,
14  SandpackPreview,
15  SandpackProvider,
16} from "@codesandbox/sandpack-react";
17import type {
18  ButtonHTMLAttributes,
19  ComponentProps,
20  HTMLAttributes,
21  ReactNode,
22} from "react";
23import {
24  createContext,
25  useCallback,
26  useContext,
27  useEffect,
28  useState,
29} from "react";
30import { cn } from "@/lib/utils";
31 
32export type SandboxProviderProps = SandpackProviderProps;
33 
34export const SandboxProvider = ({
35  className,
36  ...props
37}: SandpackProviderProps): ReactNode => (
38  <div className={cn("size-full", className)}>
39    <SandpackProvider className="!size-full !max-h-none" {...props} />
40  </div>
41);
42 
43export type SandboxLayoutProps = SandpackLayoutProps;
44 
45export const SandboxLayout = ({
46  className,
47  ...props
48}: SandpackLayoutProps): ReactNode => (
49  <SandpackLayout
50    className={cn(
51      "!rounded-none !border-none !bg-transparent !h-full",
52      className
53    )}
54    {...props}
55  />
56);
57 
58export type SandboxTabsContextValue = {
59  selectedTab: string | undefined;
60  setSelectedTab: (value: string) => void;
61};
62 
63const SandboxTabsContext = createContext<SandboxTabsContextValue | undefined>(
64  undefined
65);
66 
67const useSandboxTabsContext = () => {
68  const context = useContext(SandboxTabsContext);
69 
70  if (!context) {
71    throw new Error(
72      "SandboxTabs components must be used within a SandboxTabsProvider"
73    );
74  }
75 
76  return context;
77};
78 
79export type SandboxTabsProps = HTMLAttributes<HTMLDivElement> & {
80  defaultValue?: string;
81  value?: string;
82  onValueChange?: (value: string) => void;
83};
84 
85export const SandboxTabs = ({
86  className,
87  defaultValue,
88  value,
89  onValueChange,
90  ...props
91}: SandboxTabsProps): ReactNode => {
92  const [selectedTab, setSelectedTabState] = useState(value || defaultValue);
93 
94  useEffect(() => {
95    if (value !== undefined) {
96      setSelectedTabState(value);
97    }
98  }, [value]);
99 
100  const setSelectedTab = useCallback(
101    (newValue: string) => {
102      if (value === undefined) {
103        setSelectedTabState(newValue);
104      }
105      onValueChange?.(newValue);
106    },
107    [value, onValueChange]
108  );
109 
110  return (
111    <SandboxTabsContext.Provider value={{ selectedTab, setSelectedTab }}>
112      <div
113        className={cn(
114          "group relative flex size-full flex-col overflow-hidden rounded-lg border text-sm",
115// … truncated