'use client'; import { cn } from '@/lib/utils'; import { SandpackCodeEditor, SandpackConsole, SandpackFileExplorer, SandpackLayout, SandpackPreview, SandpackProvider, } from '@codesandbox/sandpack-react'; import type { CodeEditorProps, PreviewProps, SandpackLayoutProps, SandpackProviderProps, } from '@codesandbox/sandpack-react'; import type { ButtonHTMLAttributes, ComponentProps, HTMLAttributes, } from 'react'; import { createContext, useCallback, useContext, useEffect, useState, } from 'react'; export type SandboxProviderProps = SandpackProviderProps; export const SandboxProvider = ({ className, ...props }: SandpackProviderProps) => (

); export type SandboxLayoutProps = SandpackLayoutProps; export const SandboxLayout = ({ className, ...props }: SandpackLayoutProps) => ( ); export type SandboxTabsContextValue = { selectedTab: string | undefined; setSelectedTab: (value: string) => void; }; const SandboxTabsContext = createContext( undefined ); const useSandboxTabsContext = () => { const context = useContext(SandboxTabsContext); if (!context) { throw new Error( 'SandboxTabs components must be used within a SandboxTabsProvider' ); } return context; }; export type SandboxTabsProps = HTMLAttributes & { defaultValue?: string; value?: string; onValueChange?: (value: string) => void; }; export const SandboxTabs = ({ className, defaultValue, value, onValueChange, ...props }: SandboxTabsProps) => { const [selectedTab, setSelectedTabState] = useState(value || defaultValue); useEffect(() => { if (value !== undefined) { setSelectedTabState(value); } }, [value]); const setSelectedTab = useCallback( (newValue: string) => { if (value === undefined) { setSelectedTabState(newValue); } onValueChange?.(newValue); }, [value, onValueChange] ); return (

{props.children}

); }; export type SandboxTabsListProps = HTMLAttributes; export const SandboxTabsList = ({ className, ...props }: SandboxTabsListProps) => (

); export type SandboxTabsTriggerProps = Omit< ButtonHTMLAttributes, 'onClick' > & { value: string; }; export const SandboxTabsTrigger = ({ className, value, ...props }: SandboxTabsTriggerProps) => { const { selectedTab, setSelectedTab } = useSandboxTabsContext(); return ( // biome-ignore lint/nursery/useAriaPropsSupportedByRole: