[V0_FILE]typescriptreact:file="lib/hooks.ts" isMerged="true" import { useDispatch, useSelector } from "react-redux" import type { TypedUseSelectorHook } from "react-redux" import type { RootState, AppDispatch } from "@/lib/store" // Use throughout your app instead of plain `useDispatch` and `useSelector` export const useAppDispatch: () => AppDispatch = useDispatch export const useAppSelector: TypedUseSelectorHook = useSelector [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{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))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", border: "hsl(var(--sidebar-border))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", ring: "hsl(var(--sidebar-ring))", }, }, 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")], } export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Dashboard from "@/components/dashboard" export default function Home() { return } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" import Dashboard from "@/components/dashboard" import ProfileContent from "@/components/profile-content" export default function ProfilePage() { return ( ) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true" import Dashboard from "@/components/dashboard" import SettingsContent from "@/components/settings-content" export default function SettingsPage() { return ( ) } [V0_FILE]typescriptreact:file="components/dashboard-content.tsx" isEdit="true" isMerged="true" "use client" import { useSelector } from "react-redux" import type { RootState } from "@/lib/store" import QueryInput from "@/components/query-input" import ResultsDisplay from "@/components/results-display" import { SidebarTrigger } from "@/components/ui/sidebar" import { motion } from "framer-motion" import { Sparkles } from "lucide-react" export default function DashboardContent() { const { loading, error } = useSelector((state: RootState) => state.queries) return (

Data Query Dashboard

{loading && (

Processing your query with AI...

Our AI is analyzing your request and preparing insightful visualizations

)} {error && (

Error processing query

{error}

Try rephrasing your query or check our examples for guidance.

)} {!loading && !error && ( )}

) } [V0_FILE]typescriptreact:file="components/query-input.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { useDispatch, useSelector } from "react-redux" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { submitQuery } from "@/lib/features/queries/queriesSlice" import { Search, Sparkles, Zap } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import type { RootState } from "@/lib/store" // Mock AI suggestions based on input const getAiSuggestions = (input: string): string[] => { if (!input.trim()) return [] const suggestions = [ `${input} by country`, `${input} over time`, `${input} compared to last year`, `${input} breakdown by category`, `${input} top performers`, ] return suggestions.slice(0, 3) } // Example queries for inspiration const exampleQueries = [ "Show me sales trends over the last 6 months", "What's the distribution of users by region?", "Compare revenue by product category", "Analyze customer satisfaction ratings", "Display marketing campaign performance", ] export default function QueryInput() { const dispatch = useDispatch() const [query, setQuery] = useState("") const [suggestions, setSuggestions] = useState([]) const [showSuggestions, setShowSuggestions] = useState(false) const [currentExampleIndex, setCurrentExampleIndex] = useState(0) const inputRef = useRef(null) const { settings } = useSelector((state: RootState) => state.settings) useEffect(() => { if (query.trim()) { setSuggestions(getAiSuggestions(query)) setShowSuggestions(true) } else { setShowSuggestions(false) } }, [query]) // Cycle through example queries in the placeholder useEffect(() => { const interval = setInterval(() => { setCurrentExampleIndex((prev) => (prev + 1) % exampleQueries.length) }, 5000) return () => clearInterval(interval) }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (query.trim()) { dispatch(submitQuery(query)) setShowSuggestions(false) } } const handleSuggestionClick = (suggestion: string) => { setQuery(suggestion) dispatch(submitQuery(suggestion)) setShowSuggestions(false) } const focusInput = () => { inputRef.current?.focus() } return (

Ask anything about your data

Use natural language to query your data and get instant insights

setQuery(e.target.value)} placeholder={`Try: "${exampleQueries[currentExampleIndex]}"`} className="h-14 pl-12 pr-12 text-lg shadow-lg transition-all duration-200 border-primary/20 group-hover:border-primary/50 focus-visible:ring-primary/20" /> {settings.enableAnimations && query.length === 0 && ( )}

{showSuggestions && suggestions.length > 0 && (

AI Suggestions:

{suggestions.map((suggestion, index) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="components/results-display.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { useSelector } from "react-redux" import type { RootState } from "@/lib/store" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart, LineChart, PieChart } from "@/components/ui/chart" import { BarChart3, LineChartIcon, PieChartIcon, TableIcon, Download, Share2, Maximize2 } from "lucide-react" import DataTable from "@/components/data-table" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" export default function ResultsDisplay() { const { currentQuery, currentResults } = useSelector((state: RootState) => state.queries) const [activeView, setActiveView] = useState("chart") const { settings } = useSelector((state: RootState) => state.settings) if (!currentResults) { return (

No results to display

Try submitting a query using the search bar above to visualize your data

Trend Analysis

Distribution Data

Comparison Charts

Detailed Tables

) } const { title, description, data, chartType } = currentResults return (

{title} {chartType.toUpperCase()} {description}

{chartType === "bar" && } {chartType === "line" && } {chartType === "pie" && } Chart View Table View

{chartType === "bar" && } {chartType === "line" && } {chartType === "pie" && }

AI Insights

{chartType === "bar" && "The bar chart shows significant variations across categories. The highest value is in Category A, which is 33% higher than the average."} {chartType === "line" && "The trend line indicates steady growth over time with a notable peak in June. Consider investigating the factors that contributed to this performance."} {chartType === "pie" && "The distribution shows that Group A and Group B together account for over 50% of the total. This concentration may present both opportunities and risks."}

) } function BarChartDisplay({ data, animated }: { data: any[]; animated: boolean }) { return ( `${value.toLocaleString()}`} yAxisWidth={80} /> ) } function LineChartDisplay({ data, animated }: { data: any[]; animated: boolean }) { return ( `${value.toLocaleString()}`} yAxisWidth={80} /> ) } function PieChartDisplay({ data, animated }: { data: any[]; animated: boolean }) { return ( `${value.toLocaleString()}`} /> ) } [V0_FILE]typescriptreact:file="components/data-table.tsx" isEdit="true" isMerged="true" "use client" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { motion } from "framer-motion" export default function DataTable({ data }: { data: any[] }) { if (!data || data.length === 0) return null // Get all unique keys from the data objects const columns = Array.from(new Set(data.flatMap((item) => Object.keys(item)))) return (

{columns.map((column) => ( {column} ))} {data.map((row, rowIndex) => ( {columns.map((column) => ( {row[column] !== undefined ? String(row[column]) : "-"} ))} ))}

) } [V0_FILE]typescriptreact:file="components/profile-content.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useSelector, useDispatch } from "react-redux" import type { RootState } from "@/lib/store" import { updateProfile } from "@/lib/features/profile/profileSlice" import { SidebarTrigger } from "@/components/ui/sidebar" import { motion } from "framer-motion" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Bell, Camera, Edit, Mail, MapPin, Save, User, Search, BarChart3 } from "lucide-react" export default function ProfileContent() { const dispatch = useDispatch() const { user } = useSelector((state: RootState) => state.profile) const [isEditing, setIsEditing] = useState(false) const [formData, setFormData] = useState({ name: user.name, email: user.email, role: user.role, location: user.location, bio: user.bio, }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() dispatch(updateProfile(formData)) setIsEditing(false) } return (

Profile

{user.name.charAt(0)}

{user.name}

{user.role} • {user.location}

{user.bio}

{user.stats.queries}

Queries

{user.stats.visualizations}

Visualizations

{user.stats.savedReports}

Saved Reports

Details Activity Preferences Profile Details Manage your personal information and account settings {isEditing ? ( ) : (

Full Name

{user.name}

{user.email}

Role

{user.role}

Location

{user.location}

Bio

{user.bio}

)} {isEditing && ( )} Recent Activity Your recent queries and interactions with the platform

{user.recentActivity.map((activity, index) => (

{activity.type === "query" ? ( ) : ( )}

{activity.description}

{activity.timestamp}

))}

Notification Preferences Manage how you receive notifications and updates

{user.notificationPreferences.map((pref, index) => (

{pref.name}

{pref.description}

))}

) } // Simple Switch component since we don't have access to the actual shadcn Switch function Switch({ checked }: { checked: boolean }) { return (

) } [V0_FILE]typescriptreact:file="components/settings-content.tsx" isMerged="true" "use client" import type React from "react" import { useSelector, useDispatch } from "react-redux" import type { RootState } from "@/lib/store" import { updateSettings } from "@/lib/features/settings/settingsSlice" import { clearHistory } from "@/lib/features/queries/queriesSlice" import { SidebarTrigger } from "@/components/ui/sidebar" import { motion } from "framer-motion" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { AlertCircle, Check, Moon, Palette, RotateCcw, Sun, Volume2, VolumeX } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" export default function SettingsContent() { const dispatch = useDispatch() const { settings } = useSelector((state: RootState) => state.settings) const { queryHistory } = useSelector((state: RootState) => state.queries) const handleToggleSetting = (key: string) => { dispatch(updateSettings({ [key]: !settings[key] })) } const handleClearHistory = () => { dispatch(clearHistory()) } const themeOptions = [ { id: "light", name: "Light", icon: Sun }, { id: "dark", name: "Dark", icon: Moon }, { id: "system", name: "System", icon: Palette }, ] return (

Settings

Appearance Preferences Data Management Appearance Settings Customize how the dashboard looks and feels

Theme

{themeOptions.map((theme) => { const Icon = theme.icon const isActive = settings.theme === theme.id return ( dispatch(updateSettings({ theme: theme.id }))} className={`relative flex flex-col items-center gap-2 p-4 rounded-lg border-2 cursor-pointer transition-all ${ isActive ? "border-primary bg-primary/5 text-primary" : "border-border hover:border-primary/50" }`} > {isActive && (

)} {theme.name} ) })}

Color Scheme

{["blue", "purple", "green", "orange"].map((color) => ( dispatch(updateSettings({ colorScheme: color }))} className={`relative h-12 rounded-lg cursor-pointer transition-all ${ settings.colorScheme === color ? "ring-2 ring-primary ring-offset-2" : "" }`} style={{ background: color === "blue" ? "linear-gradient(to right, #3b82f6, #2563eb)" : color === "purple" ? "linear-gradient(to right, #8b5cf6, #6d28d9)" : color === "green" ? "linear-gradient(to right, #10b981, #059669)" : "linear-gradient(to right, #f97316, #ea580c)", }} > {settings.colorScheme === color && (

)} ))}

Animations

Enable smooth animations and transitions

handleToggleSetting("enableAnimations")} />

Reduced Motion

Minimize non-essential animations

handleToggleSetting("reducedMotion")} />

Preferences Customize your dashboard experience

Sound Effects

Play sounds for interactions and notifications

handleToggleSetting("enableSoundEffects")} icon={settings.enableSoundEffects ? Volume2 : VolumeX} />

Auto Suggestions

Show AI-powered suggestions while typing

handleToggleSetting("enableAutoSuggestions")} />

Save Queries

Automatically save your recent queries

handleToggleSetting("saveQueries")} />

Chart Default View

{["bar", "line", "pie"].map((chartType) => { const Icon = chartType === "bar" ? BarChart3 : chartType === "line" ? LineChartIcon : PieChartIcon return ( dispatch(updateSettings({ defaultChartType: chartType }))} className={`relative flex flex-col items-center gap-2 p-4 rounded-lg border-2 cursor-pointer transition-all ${ settings.defaultChartType === chartType ? "border-primary bg-primary/5 text-primary" : "border-border hover:border-primary/50" }`} > {chartType} Chart ) })}

Data Management Manage your data and query history

Query History

Saved Queries

You have {queryHistory.length} saved queries

{queryHistory.length > 0 ? (

{queryHistory.map((query, index) => (

{query.text} {new Date(query.timestamp).toLocaleDateString()}

))}

) : (

No saved queries

)}

Danger Zone These actions cannot be undone. This will permanently delete your data.

) } // Simple Switch component since we don't have access to the actual shadcn Switch function Switch({ checked, onCheckedChange, id, icon: Icon, }: { checked: boolean onCheckedChange: () => void id?: string icon?: React.ElementType }) { return (

{Icon && }

) } // Missing imports import { BarChart3, LineChartIcon, PieChartIcon } from "lucide-react" [V0_FILE]typescriptreact:file="lib/store.ts" isEdit="true" isMerged="true" import { configureStore } from "@reduxjs/toolkit" import queriesReducer from "@/lib/features/queries/queriesSlice" import profileReducer from "@/lib/features/profile/profileSlice" import settingsReducer from "@/lib/features/settings/settingsSlice" export const store = configureStore({ reducer: { queries: queriesReducer, profile: profileReducer, settings: settingsReducer, }, }) export type RootState = ReturnType export type AppDispatch = typeof store.dispatch [V0_FILE]typescriptreact:file="lib/features/queries/queriesSlice.ts" isEdit="true" isMerged="true" import { createSlice, createAsyncThunk } from "@reduxjs/toolkit" // Mock data for different chart types const mockBarChartData = [ { name: "Category A", value: 4000 }, { name: "Category B", value: 3000 }, { name: "Category C", value: 2000 }, { name: "Category D", value: 2780 }, { name: "Category E", value: 1890 }, { name: "Category F", value: 2390 }, ] const mockLineChartData = [ { name: "Jan", value: 1000 }, { name: "Feb", value: 2000 }, { name: "Mar", value: 1500 }, { name: "Apr", value: 3000 }, { name: "May", value: 2500 }, { name: "Jun", value: 4000 }, { name: "Jul", value: 3500 }, ] const mockPieChartData = [ { name: "Group A", value: 400 }, { name: "Group B", value: 300 }, { name: "Group C", value: 300 }, { name: "Group D", value: 200 }, { name: "Group E", value: 100 }, ] // Types type QueryHistoryItem = { id: string text: string timestamp: number } type ChartType = "bar" | "line" | "pie" type QueryResult = { title: string description: string data: any[] chartType: ChartType } type QueriesState = { queryHistory: QueryHistoryItem[] currentQuery: string | null currentResults: QueryResult | null loading: boolean error: string | null } // Initial state const initialState: QueriesState = { queryHistory: [], currentQuery: null, currentResults: null, loading: false, error: null, } // Mock API call to process query const processQuery = (query: string): Promise => { return new Promise((resolve, reject) => { // Simulate API delay setTimeout(() => { // Determine chart type based on query content let chartType: ChartType = "bar" let data = mockBarChartData let title = "Query Results" const description = `Results for: "${query}"` if (query.toLowerCase().includes("over time") || query.toLowerCase().includes("trend")) { chartType = "line" data = mockLineChartData title = "Trend Analysis" } else if (query.toLowerCase().includes("breakdown") || query.toLowerCase().includes("distribution")) { chartType = "pie" data = mockPieChartData title = "Distribution Analysis" } // Randomly fail 10% of the time to demonstrate error handling if (Math.random() < 0.1) { reject(new Error("Failed to process query. Please try again.")) } else { resolve({ title, description, data, chartType, }) } }, 1500) // Simulate 1.5s delay }) } // Async thunk for submitting a query export const submitQuery = createAsyncThunk("queries/submitQuery", async (query: string, { rejectWithValue }) => { try { const result = await processQuery(query) return { query, result } } catch (error) { return rejectWithValue((error as Error).message) } }) // Slice const queriesSlice = createSlice({ name: "queries", initialState, reducers: { clearResults: (state) => { state.currentResults = null state.error = null }, clearHistory: (state) => { state.queryHistory = [] }, }, extraReducers: (builder) => { builder .addCase(submitQuery.pending, (state, action) => { state.loading = true state.error = null state.currentQuery = action.meta.arg }) .addCase(submitQuery.fulfilled, (state, action) => { const { query, result } = action.payload state.loading = false state.currentResults = result // Add to query history state.queryHistory.unshift({ id: Date.now().toString(), text: query, timestamp: Date.now(), }) // Keep only the last 10 queries if (state.queryHistory.length > 10) { state.queryHistory = state.queryHistory.slice(0, 10) } }) .addCase(submitQuery.rejected, (state, action) => { state.loading = false state.error = action.payload as string }) }, }) export const { clearResults, clearHistory } = queriesSlice.actions export default queriesSlice.reducer [V0_FILE]typescriptreact:file="lib/features/profile/profileSlice.ts" isMerged="true" import { createSlice, type PayloadAction } from "@reduxjs/toolkit" type UserStats = { queries: number visualizations: number savedReports: number } type NotificationPreference = { name: string description: string enabled: boolean } type Activity = { type: "query" | "visualization" description: string timestamp: string } type User = { name: string email: string avatar: string role: string location: string bio: string stats: UserStats notificationPreferences: NotificationPreference[] recentActivity: Activity[] } type ProfileState = { user: User } const initialState: ProfileState = { user: { name: "Alex Johnson", email: "alex.johnson@example.com", avatar: "/placeholder.svg?height=128&width=128", role: "Data Analyst", location: "San Francisco, CA", bio: "Data enthusiast with a passion for turning complex information into actionable insights. Specializing in visualization and AI-powered analytics.", stats: { queries: 128, visualizations: 47, savedReports: 12, }, notificationPreferences: [ { name: "Email Notifications", description: "Receive updates and reports via email", enabled: true, }, { name: "Query Alerts", description: "Get notified when queries complete", enabled: true, }, { name: "Weekly Reports", description: "Receive weekly usage summaries", enabled: false, }, ], recentActivity: [ { type: "query", description: "Analyzed sales data by region", timestamp: "Today at 10:23 AM", }, { type: "visualization", description: "Created bar chart for Q2 performance", timestamp: "Yesterday at 3:45 PM", }, { type: "query", description: "Compared marketing campaign results", timestamp: "2 days ago", }, { type: "visualization", description: "Generated pie chart for user demographics", timestamp: "3 days ago", }, ], }, } const profileSlice = createSlice({ name: "profile", initialState, reducers: { updateProfile: (state, action: PayloadAction>) => { state.user = { ...state.user, ...action.payload } }, addActivity: (state, action: PayloadAction) => { state.user.recentActivity.unshift(action.payload) if (state.user.recentActivity.length > 10) { state.user.recentActivity = state.user.recentActivity.slice(0, 10) } }, updateNotificationPreference: (state, action: PayloadAction<{ name: string; enabled: boolean }>) => { const { name, enabled } = action.payload const prefIndex = state.user.notificationPreferences.findIndex((pref) => pref.name === name) if (prefIndex !== -1) { state.user.notificationPreferences[prefIndex].enabled = enabled } }, }, }) export const { updateProfile, addActivity, updateNotificationPreference } = profileSlice.actions export default profileSlice.reducer [V0_FILE]typescriptreact:file="lib/features/settings/settingsSlice.ts" isMerged="true" import { createSlice, type PayloadAction } from "@reduxjs/toolkit" type SettingsState = { settings: { theme: string colorScheme: string enableAnimations: boolean reducedMotion: boolean enableSoundEffects: boolean enableAutoSuggestions: boolean saveQueries: boolean defaultChartType: string } } const initialState: SettingsState = { settings: { theme: "system", colorScheme: "purple", enableAnimations: true, reducedMotion: false, enableSoundEffects: true, enableAutoSuggestions: true, saveQueries: true, defaultChartType: "bar", }, } const settingsSlice = createSlice({ name: "settings", initialState, reducers: { updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload } }, resetSettings: (state) => { state.settings = initialState.settings }, }, }) export const { updateSettings, resetSettings } = settingsSlice.actions export default settingsSlice.reducer [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" interface ChartProps { data: any[] index: string categories: string[] colors: string[] valueFormatter?: (value: number) => string yAxisWidth?: number } export const BarChart = ({ data, index, categories, colors, valueFormatter, yAxisWidth }: ChartProps) => { // This is a placeholder for the actual chart implementation // In a real app, this would use Recharts or another charting library const maxValue = Math.max(...data.map((item) => item.value)) return (

Gen AI Analytics

Navigation {navItems.map((item) => ( {item.label} ))} Query History {queryHistory.length === 0 ? (

No queries yet. Try asking something!

) : ( queryHistory.map((query, index) => ( {query.text} )) )}

{user.name.charAt(0)}

{user.name}

{user.role}

) } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { Provider } from "react-redux" import { store } from "@/lib/store" import { SidebarProvider } from "@/components/ui/sidebar" import DashboardSidebar from "@/components/dashboard-sidebar" import DashboardContent from "@/components/dashboard-content" import { ThemeProvider } from "@/components/theme-provider" import { AnimatePresence, motion } from "framer-motion" import { usePathname } from "next/navigation" export default function Dashboard({ children }: { children?: React.ReactNode }) { const pathname = usePathname() // Determine which content to show based on the current path const renderContent = () => { if (children) { return children } return } return (

{renderContent()}

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } // Export useTheme hook for convenience export { useTheme } from "next-themes"