[V0_FILE]typescriptreact:file="contexts/SidepanelContext.tsx" "use client" import type React from "react" import { createContext, useState, useContext } from "react" type SidepanelContextType = { isOpen: boolean toggleSidepanel: () => void } const SidepanelContext = createContext(undefined) export const SidepanelProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [isOpen, setIsOpen] = useState(true) const toggleSidepanel = () => { setIsOpen(!isOpen) } return {children} } export const useSidepanel = () => { const context = useContext(SidepanelContext) if (context === undefined) { throw new Error("useSidepanel must be used within a SidepanelProvider") } return context } [V0_FILE]javascript:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]json:file="package.json" { "dependencies": { // ... (keep existing dependencies) "html2pdf.js": "^0.10.1", "marked": "^4.0.12", "dompurify": "^2.3.3" } } [V0_FILE]typescriptreact:file="components/Menubar.tsx" import type React from "react" import { Bell, User, Settings } from "lucide-react" import { Button } from "@/components/ui/button" export const Menubar: React.FC = () => { return (

App Name

) } [V0_FILE]typescriptreact:file="components/Sidepanel.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Menu, Home, Users, Settings, HelpCircle } from "lucide-react" import { useSidepanel } from "../contexts/SidepanelContext" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface SidebarItem { icon: React.ReactNode label: string } const sidebarItems: SidebarItem[] = [ { icon: , label: "Dashboard" }, { icon: , label: "Users" }, { icon: , label: "Settings" }, { icon: , label: "Help" }, ] export const Sidepanel: React.FC = () => { const { isOpen, toggleSidepanel } = useSidepanel() const [activeItem, setActiveItem] = useState("Dashboard") return (

{isOpen && Menu}

) } [V0_FILE]typescriptreact:file="contexts/ThemeContext.tsx" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" type Theme = "light" | "dark" interface ThemeContextType { theme: Theme setTheme: (theme: Theme) => void } const ThemeContext = createContext(undefined) export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [theme, setTheme] = useState("light") useEffect(() => { const storedTheme = localStorage.getItem("theme") as Theme if (storedTheme) { setTheme(storedTheme) } }, []) useEffect(() => { localStorage.setItem("theme", theme) document.documentElement.setAttribute("data-theme", theme) document.documentElement.classList.remove("light", "dark") document.documentElement.classList.add(theme) }, [theme]) return {children} } export const useTheme = () => { const context = useContext(ThemeContext) if (context === undefined) { throw new Error("useTheme must be used within a ThemeProvider") } return context } [V0_FILE]typescriptreact:file="app/globals.css" @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222 47% 11%; --card: 0 0% 100%; --card-foreground: 222 47% 11%; --popover: 0 0% 100%; --popover-foreground: 222 47% 11%; --primary: 221 83% 53%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222 47% 11%; --muted: 210 40% 96%; --muted-foreground: 215 16% 47%; --accent: 210 40% 96%; --accent-foreground: 222 47% 11%; --destructive: 0 84% 60%; --destructive-foreground: 210 40% 98%; --border: 214 32% 91%; --input: 214 32% 91%; --ring: 221 83% 53%; --radius: 0.5rem; } .dark { --background: 222 47% 11%; --foreground: 210 40% 98%; --card: 222 47% 11%; --card-foreground: 210 40% 98%; --popover: 222 47% 11%; --popover-foreground: 210 40% 98%; --primary: 217 91% 60%; --primary-foreground: 222 47% 11%; --secondary: 217 33% 17%; --secondary-foreground: 210 40% 98%; --muted: 217 33% 17%; --muted-foreground: 215 20% 65%; --accent: 217 33% 17%; --accent-foreground: 210 40% 98%; --destructive: 0 63% 31%; --destructive-foreground: 210 40% 98%; --border: 217 33% 17%; --input: 217 33% 17%; --ring: 224 76% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-family: "Inter", sans-serif; } } /* Improved focus styles */ :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* Scrollbar styles */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: hsl(var(--muted)); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--accent-foreground)); } [V0_FILE]typescriptreact:file="contexts/TabsContext.tsx" "use client" import type React from "react" import { createContext, useContext, useState } from "react" type Tab = { id: string title: string component: React.ReactNode } type TabsContextType = { tabs: Tab[] activeTab: string addTab: (tab: Tab) => void removeTab: (tabId: string) => void setActiveTab: (tabId: string) => void reorderTabs: (startIndex: number, endIndex: number) => void } const TabsContext = createContext(undefined) export const TabsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [tabs, setTabs] = useState([{ id: "home", title: "Home", component: }]) const [activeTab, setActiveTab] = useState("home") const addTab = (tab: Tab) => { setTabs((prevTabs) => [...prevTabs, tab]) setActiveTab(tab.id) } const removeTab = (tabId: string) => { if (tabId === "home") return setTabs((prevTabs) => prevTabs.filter((tab) => tab.id !== tabId)) if (activeTab === tabId) { setActiveTab(tabs[0].id) } } const reorderTabs = (startIndex: number, endIndex: number) => { const newTabs = Array.from(tabs) const [reorderedTab] = newTabs.splice(startIndex, 1) newTabs.splice(endIndex, 0, reorderedTab) setTabs(newTabs) } return ( {children} ) } export const useTabsContext = () => { const context = useContext(TabsContext) if (context === undefined) { throw new Error("useTabsContext must be used within a TabsProvider") } return context } // Placeholder Home component const Home = () => (

Welcome to the Home tab!

This is the main landing page of our application.

) [V0_FILE]typescriptreact:file="components/TabbedLayout.tsx" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd" import { PlusCircle, X, ChevronRight } from "lucide-react" import { useTabsContext } from "../contexts/TabsContext" import { Button } from "@/components/ui/button" // Types type Tab = { id: string title: string component: React.ReactNode } // Main TabbedLayout Component export default function TabbedLayout() { const { tabs, activeTab, addTab, removeTab, setActiveTab, reorderTabs } = useTabsContext() const [showComponentMenu, setShowComponentMenu] = useState(false) const availableComponents = [ { id: "dashboard", title: "Dashboard" }, { id: "users", title: "Users" }, { id: "settings", title: "Settings" }, { id: "help", title: "Help" }, ] const openedComponentIds = tabs.map((tab) => tab.id) const availableComponentOptions = availableComponents.filter( (component) => !openedComponentIds.includes(component.id), ) const handleAddTab = () => { if (availableComponentOptions.length > 0) { setShowComponentMenu(true) } } const handleSelectComponents = (componentIds: string[]) => { componentIds.forEach((id) => { const component = availableComponents.find((c) => c.id === id) if (component) { addTab({ id, title: component.title, component:

{component.title} Component

, }) } }) setShowComponentMenu(false) } const onDragEnd = (result: any) => { if (!result.destination) return reorderTabs(result.source.index, result.destination.index) } return (

{showComponentMenu && ( setShowComponentMenu(false)} /> )}

) } // TabSection Component function TabSection({ tabs, activeTab, setActiveTab, addTab, removeTab, }: { tabs: Tab[] activeTab: string setActiveTab: (tabId: string) => void addTab: () => void removeTab: (tabId: string) => void }) { const [showAllTabs, setShowAllTabs] = useState(false) const tabsRef = useRef(null) const visibleTabs = showAllTabs ? tabs : tabs.slice(0, 11) useEffect(() => { if (tabsRef.current) { const activeTabElement = tabsRef.current.querySelector(`[data-tab-id="${activeTab}"]`) if (activeTabElement) { activeTabElement.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" }) } } }, [activeTab]) const handleWheel = (e: React.WheelEvent) => { if (tabsRef.current) { e.preventDefault() tabsRef.current.scrollLeft += e.deltaY } } const colors = [ "bg-red-500", "bg-blue-500", "bg-green-500", "bg-yellow-500", "bg-purple-500", "bg-pink-500", "bg-indigo-500", "bg-teal-500", "bg-orange-500", "bg-cyan-500", ] return ( {(provided) => (

{ provided.innerRef(el) tabsRef.current = el }} {...provided.droppableProps} className="flex items-center p-2 overflow-x-auto scrollbar-hide" onWheel={handleWheel} > {visibleTabs.map((tab, index) => ( {(provided) => (

setActiveTab(tab.id)} data-tab-id={tab.id} > {tab.title} {tab.id !== "home" && ( )}

)} ))} {provided.placeholder} {tabs.length > 11 && !showAllTabs && ( )}

)} ) } // MainSection Component function MainSection({ activeTab, tabs }: { activeTab: string; tabs: Tab[] }) { const activeComponent = tabs.find((tab) => tab.id === activeTab)?.component return

{activeComponent}

} // SelectComponentMenu Component function SelectComponentMenu({ availableComponents, onSelect, onCancel, }: { availableComponents: { id: string; title: string }[] onSelect: (componentIds: string[]) => void onCancel: () => void }) { const [selectedComponents, setSelectedComponents] = useState([]) const toggleComponent = (componentId: string) => { setSelectedComponents((prev) => prev.includes(componentId) ? prev.filter((id) => id !== componentId) : [...prev, componentId], ) } return (

Select Components

{availableComponents.map((component) => ( ))}

) } [V0_FILE]typescriptreact:file="components/Layout.tsx" import type React from "react" import { SidepanelProvider } from "../contexts/SidepanelContext" import { ThemeProvider } from "../contexts/ThemeContext" import { TabsProvider } from "../contexts/TabsContext" import { Menubar } from "./Menubar" import { Sidepanel } from "./Sidepanel" const ThemedLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => { return (

{children}

) } export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Layout } from "../components/Layout" import TabbedLayout from "../components/TabbedLayout" export default function Home() { return (

) }

About

About