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

); export type SandboxLayoutProps = SandpackLayoutProps; export const SandboxLayout = ({ className, ...props }: SandpackLayoutProps): ReactNode => ( ); 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): ReactNode => { 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): ReactNode => (

); export type SandboxTabsTriggerProps = Omit< ButtonHTMLAttributes, "onClick" > & { value: string; }; export const SandboxTabsTrigger = ({ className, value, ...props }: SandboxTabsTriggerProps): ReactNode => { const { selectedTab, setSelectedTab } = useSandboxTabsContext(); const handleClick = useCallback(() => { setSelectedTab(value); }, [setSelectedTab, value]); return (

sandbox

Instalação

Dependências