[V0_FILE]typescriptreact:file="components/data-grid.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, ChevronUp, ArrowUpDown } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" interface Column { name: string type: string } interface DataGridProps { data: any[] columns: Column[] onColumnClick?: (columnName: string) => void } export function DataGrid({ data, columns, onColumnClick }: DataGridProps) { const [sortColumn, setSortColumn] = useState(null) const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc") const [page, setPage] = useState(1) const [rowsPerPage, setRowsPerPage] = useState(10) const [filters, setFilters] = useState>({}) const handleSort = (columnName: string) => { if (sortColumn === columnName) { setSortDirection(sortDirection === "asc" ? "desc" : "asc") } else { setSortColumn(columnName) setSortDirection("asc") } } const handleFilter = (columnName: string, value: string) => { setFilters((prev) => ({ ...prev, [columnName]: value, })) setPage(1) // Reset to first page when filtering } // Apply filters let filteredData = [...data] Object.entries(filters).forEach(([column, value]) => { if (value) { filteredData = filteredData.filter((row) => String(row[column]).toLowerCase().includes(value.toLowerCase())) } }) // Apply sorting if (sortColumn) { filteredData.sort((a, b) => { const aValue = a[sortColumn] const bValue = b[sortColumn] if (aValue < bValue) return sortDirection === "asc" ? -1 : 1 if (aValue > bValue) return sortDirection === "asc" ? 1 : -1 return 0 }) } // Apply pagination const totalPages = Math.ceil(filteredData.length / rowsPerPage) const paginatedData = filteredData.slice((page - 1) * rowsPerPage, page * rowsPerPage) const getTypeIcon = (type: string) => { switch (type.toUpperCase()) { case "INTEGER": return 123 case "VARCHAR": return abc case "DATE": return 📅 case "DOUBLE": return 1.23 default: return {type[0]} } } return (

{columns.map((column, index) => ( ))} {paginatedData.map((row, rowIndex) => ( {columns.map((column, colIndex) => ( ))} ))}

onColumnClick && onColumnClick(column.name)} > {getTypeIcon(column.type)} {column.name} handleFilter(column.name, e.target.value)} />
{row[column.name]}

{/* Pagination */}

Showing {Math.min(filteredData.length, 1 + (page - 1) * rowsPerPage)}- {Math.min(page * rowsPerPage, filteredData.length)} of {filteredData.length} rows

Page {page} of {totalPages || 1}

) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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))", }, blue: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a", }, }, 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/import-data-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Upload, FileIcon, CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" interface ImportDataModalProps { onClose: () => void onImport: (file: File) => void } export function ImportDataModal({ onClose, onImport }: ImportDataModalProps) { const [file, setFile] = useState(null) const [isDragging, setIsDragging] = useState(false) const [previewData, setPreviewData] = useState(null) const fileInputRef = useRef(null) const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = () => { setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { const droppedFile = e.dataTransfer.files[0] handleFileSelected(droppedFile) } } const handleFileInputChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { handleFileSelected(e.target.files[0]) } } const handleFileSelected = (selectedFile: File) => { setFile(selectedFile) // In a real app, we would parse the file and show a preview // For this mockup, we'll just simulate it setTimeout(() => { setPreviewData({ fileName: selectedFile.name, tableName: selectedFile.name.split(".")[0], columns: [ { name: "id", type: "INTEGER" }, { name: "name", type: "VARCHAR" }, { name: "date", type: "DATE" }, { name: "value", type: "DOUBLE" }, ], rowCount: Math.floor(Math.random() * 1000000) + 1000, previewRows: [ { id: 1, name: "Item 1", date: "2023-01-01", value: 123.45 }, { id: 2, name: "Item 2", date: "2023-01-02", value: 234.56 }, { id: 3, name: "Item 3", date: "2023-01-03", value: 345.67 }, ], }) }, 500) } const handleImport = () => { if (file) { onImport(file) } } return ( Import Data {!file ? (

fileInputRef.current?.click()} >

Drag & Drop your file here

Support for CSV, Excel, and Parquet files

) : (

{file.name}

{(file.size / 1024 / 1024).toFixed(2)} MB

{previewData && ( <>

Table Preview

{previewData.tableName}

{previewData.rowCount.toLocaleString()} rows, {previewData.columns.length} columns

{previewData.columns.map((column: any, index: number) => ( ))} {previewData.previewRows.map((row: any, rowIndex: number) => ( {previewData.columns.map((column: any, colIndex: number) => ( ))} ))}

{column.type.charAt(0)} {column.name}
{row[column.name]}

)}

)} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { DatabaseIcon, ImportIcon as FileImportIcon } from "lucide-react" import { Sidebar } from "@/components/sidebar" import { SQLNotebook } from "@/components/sql-notebook" import { ColumnStats } from "@/components/column-stats" import { ImportDataModal } from "@/components/import-data-modal" import { Button } from "@/components/ui/button" export default function SwiftQueryApp() { const [selectedTable, setSelectedTable] = useState(null) const [selectedColumn, setSelectedColumn] = useState(null) const [showImportModal, setShowImportModal] = useState(false) const [tables, setTables] = useState([]) const [currentQuery, setCurrentQuery] = useState("") const [queryResults, setQueryResults] = useState(null) // Mock function to simulate importing data const handleImportData = (file: File) => { // In a real app, this would use duckdb-wasm to import the file const tableName = file.name.split(".")[0] // Mock table data const newTable = { name: tableName, rowCount: Math.floor(Math.random() * 1000000) + 1000, columns: [ { name: "id", type: "INTEGER" }, { name: "name", type: "VARCHAR" }, { name: "date", type: "DATE" }, { name: "value", type: "DOUBLE" }, ], } setTables([...tables, newTable]) setShowImportModal(false) } // Mock function to simulate running a query const handleRunQuery = (sql: string) => { // In a real app, this would use duckdb-wasm to run the query setCurrentQuery(sql) // Mock query results const mockResults = { columns: [ { name: "id", type: "INTEGER" }, { name: "name", type: "VARCHAR" }, { name: "date", type: "DATE" }, { name: "value", type: "DOUBLE" }, ], rows: Array(20) .fill(0) .map((_, i) => ({ id: i + 1, name: `Item ${i + 1}`, date: new Date().toISOString().split("T")[0], value: Math.random() * 1000, })), } setQueryResults(mockResults) } return (

{/* Left Sidebar */} setShowImportModal(true)} /> {/* Main Content Area */}

{/* Header */}

Swift Query

SQL Data Explorer

{/* Main Content */}

{tables.length === 0 ? (

Welcome to Swift Query

Get started by importing your CSV, Excel, or Parquet files to analyze your data with SQL.

) : ( <> {/* SQL Notebook */} {/* Right Sidebar - Column Stats */} )}

{/* Import Data Modal */} {showImportModal && setShowImportModal(false)} onImport={handleImportData} />}

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, ChevronRight, DatabaseIcon, TableIcon, MoreHorizontal, Eye, Download, Trash2, Edit, } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" interface SidebarProps { tables: any[] onSelectTable: (tableName: string) => void onImportClick: () => void } export function Sidebar({ tables, onSelectTable, onImportClick }: SidebarProps) { const [expandedItems, setExpandedItems] = useState>({}) const toggleExpand = (name: string) => { setExpandedItems((prev) => ({ ...prev, [name]: !prev[name], })) } return (

Database Explorer

{tables.length === 0 ? (

No tables yet. Import data to get started.

) : (

toggleExpand("tables")} > {expandedItems["tables"] ? ( ) : ( )} Tables

{expandedItems["tables"] && (

{tables.map((table, index) => (

{ toggleExpand(table.name) onSelectTable(table.name) }} > {expandedItems[table.name] ? ( ) : ( )} {table.name} ({table.rowCount.toLocaleString()} rows, {table.columns.length} cols) Preview Rename Export Delete

{expandedItems[table.name] && (

{table.columns.map((column: any, colIndex: number) => (

{column.type.charAt(0)}

{column.name}

))}

)}

))}

)}

) } [V0_FILE]typescriptreact:file="components/sql-editor.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" interface SQLEditorProps { value: string onChange: (value: string) => void onExecute?: () => void } export function SQLEditor({ value, onChange, onExecute }: SQLEditorProps) { const editorRef = useRef(null) const textareaRef = useRef(null) const [editorValue, setEditorValue] = useState(value) const [showSuggestions, setShowSuggestions] = useState(false) const [cursorPosition, setCursorPosition] = useState(0) // SQL keywords for auto-completion const sqlKeywords = [ "SELECT", "FROM", "WHERE", "GROUP BY", "ORDER BY", "LIMIT", "JOIN", "LEFT JOIN", "RIGHT JOIN", "INNER JOIN", "HAVING", "INSERT INTO", "UPDATE", "DELETE FROM", "CREATE TABLE", "DROP TABLE", "ALTER TABLE", "COUNT", "SUM", "AVG", "MIN", "MAX", "DISTINCT", ] // Update local state when prop value changes useEffect(() => { setEditorValue(value) }, [value]) // Handle changes and propagate to parent const handleChange = (e: React.ChangeEvent) => { const newValue = e.target.value setEditorValue(newValue) onChange(newValue) setCursorPosition(e.target.selectionStart) } // Handle keyboard shortcuts const handleKeyDown = (e: React.KeyboardEvent) => { // Execute query on Ctrl+Enter or Cmd+Enter if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && onExecute) { e.preventDefault() onExecute() return } // Handle tab key for indentation if (e.key === "Tab") { e.preventDefault() const target = e.target as HTMLTextAreaElement const start = target.selectionStart const end = target.selectionEnd // Insert tab at cursor position const newValue = editorValue.substring(0, start) + " " + editorValue.substring(end) setEditorValue(newValue) onChange(newValue) // Move cursor after the inserted tab setTimeout(() => { target.selectionStart = target.selectionEnd = start + 2 setCursorPosition(start + 2) }, 0) } } // Auto-completion logic const handleAutoComplete = (keyword: string) => { if (textareaRef.current) { const textarea = textareaRef.current const currentPos = textarea.selectionStart const textBefore = editorValue.substring(0, currentPos) // Find the last word being typed const lastWordMatch = textBefore.match(/\S+$/) const lastWordStart = lastWordMatch ? textBefore.lastIndexOf(lastWordMatch[0]) : currentPos // Replace the current word with the selected keyword const newValue = editorValue.substring(0, lastWordStart) + keyword + editorValue.substring(currentPos) setEditorValue(newValue) onChange(newValue) // Move cursor to the end of the inserted keyword const newCursorPos = lastWordStart + keyword.length setTimeout(() => { textarea.selectionStart = textarea.selectionEnd = newCursorPos setCursorPosition(newCursorPos) setShowSuggestions(false) }, 0) } } // Get current word at cursor for auto-completion const getCurrentWord = () => { if (!textareaRef.current) return "" const text = editorValue const curPos = textareaRef.current.selectionStart // Find the start of the current word let start = curPos while (start > 0 && /\S/.test(text.charAt(start - 1))) { start-- } // Extract the current word return text.substring(start, curPos).toUpperCase() } // Filter suggestions based on current word const filteredSuggestions = () => { const currentWord = getCurrentWord() if (!currentWord) return [] return sqlKeywords.filter((keyword) => keyword.toUpperCase().startsWith(currentWord)) } // Show suggestions when typing useEffect(() => { const suggestions = filteredSuggestions() setShowSuggestions(suggestions.length > 0) }, [editorValue, cursorPosition]) return (

setCursorPosition((e.target as HTMLTextAreaElement).selectionStart)}
          className="w-full p-4 font-mono text-sm focus:outline-none resize-none bg-white rounded min-h-[150px]"
          placeholder="Write your SQL query here..."
          spellCheck="false"
        />

{/* Auto-completion dropdown */}
        {showSuggestions && (
          <div className="absolute z-10 bg-white border border-gray-200 rounded shadow-lg max-h-48 overflow-y-auto">
            {filteredSuggestions().map((suggestion, index) => (
              <div
                key={index}
                className="px-3 py-1 hover:bg-blue-50 cursor-pointer text-sm font-mono"
                onClick={() => handleAutoComplete(suggestion)}
              >
                {suggestion}
              </div>
            ))}
          </div>
        )}
      </div>

{/* Simple syntax highlighting hints */}
      <div className="flex flex-wrap gap-1 p-2 border-t border-gray-200 bg-gray-50 text-xs">
        <span className="px-1 py-0.5 bg-blue-100 text-blue-800 rounded">SELECT</span>
        <span className="px-1 py-0.5 bg-blue-100 text-blue-800 rounded">FROM</span>
        <span className="px-1 py-0.5 bg-blue-100 text-blue-800 rounded">WHERE</span>
        <span className="px-1 py-0.5 bg-blue-100 text-blue-800 rounded">GROUP BY</span>
        <span className="px-1 py-0.5 bg-blue-100 text-blue-800 rounded">ORDER BY</span>
        <span className="px-1 py-0.5 bg-blue-100 text-blue-800 rounded">LIMIT</span>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/sql-notebook.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Play, Trash2, Download, Copy, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DataGrid } from "@/components/data-grid"
import { SQLEditor } from "@/components/sql-editor"

interface SQLNotebookProps {
  onRunQuery: (sql: string) => void
  queryResults: any | null
  onSelectColumn: (columnName: string) => void
}

export function SQLNotebook({ onRunQuery, queryResults, onSelectColumn }: SQLNotebookProps) {
  const [cells, setCells] = useState([
    {
      id: 1,
      content:
        "-- Welcome to Swift Query!\n-- Try importing a CSV file and then query it\n-- Example: SELECT * FROM your_table LIMIT 10;\n\n-- Or try this sample query when you have data:\nSELECT * FROM table_name LIMIT 10;",
    },
  ])
  const [activeCellId, setActiveCellId] = useState(1)

const handleRunQuery = (cellId: number) => {
    const cell = cells.find((c) => c.id === cellId)
    if (cell) {
      // Set active cell when running query
      setActiveCellId(cellId)
      onRunQuery(cell.content)
    }
  }

const handleCellChange = (cellId: number, content: string) => {
    setCells(cells.map((cell) => (cell.id === cellId ? { ...cell, content } : cell)))
  }

const handleAddCell = (afterCellId: number) => {
    const newId = Math.max(...cells.map((c) => c.id)) + 1

// Find the index of the current cell
    const currentIndex = cells.findIndex((cell) => cell.id === afterCellId)

// Insert the new cell after the current one
    const newCells = [...cells.slice(0, currentIndex + 1), { id: newId, content: "" }, ...cells.slice(currentIndex + 1)]

setCells(newCells)
    setActiveCellId(newId)
  }

const handleDeleteCell = (cellId: number) => {
    // Don't delete if it's the only cell
    if (cells.length <= 1) {
      // Just clear the content instead
      setCells(cells.map((cell) => (cell.id === cellId ? { ...cell, content: "" } : cell)))
      return
    }

// Find the index of the cell to delete
    const cellIndex = cells.findIndex((cell) => cell.id === cellId)

// Remove the cell
    const newCells = cells.filter((cell) => cell.id !== cellId)
    setCells(newCells)

// Set active cell to the previous one or the next one if it was the first
    if (cellIndex > 0) {
      setActiveCellId(cells[cellIndex - 1].id)
    } else if (newCells.length > 0) {
      setActiveCellId(newCells[0].id)
    }
  }

return (
    <div className="flex-1 overflow-auto bg-white">
      <div className="max-w-full p-4 space-y-6">
        {cells.map((cell, index) => (
          <div
            key={cell.id}
            className={`border rounded-lg overflow-hidden ${activeCellId === cell.id ? "border-blue-400 shadow-sm" : "border-gray-200"}`}
          >
            <div className="bg-gray-50 p-2 flex items-center justify-between border-b border-gray-200">
              <div className="text-sm text-gray-500">Cell {cell.id}</div>
              <div className="flex items-center space-x-2">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => handleRunQuery(cell.id)}
                  className="h-8 px-2 text-blue-600"
                >
                  <Play className="h-4 w-4 mr-1" />
                  Run
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => handleDeleteCell(cell.id)}
                  className="h-8 px-2 text-gray-600"
                >
                  <Trash2 className="h-4 w-4 mr-1" />
                  Delete
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => handleAddCell(cell.id)}
                  className="h-8 px-2 text-gray-600"
                >
                  <Plus className="h-4 w-4 mr-1" />
                  Add Below
                </Button>
              </div>
            </div>

<SQLEditor
              value={cell.content}
              onChange={(value) => handleCellChange(cell.id, value)}
              onExecute={() => handleRunQuery(cell.id)}
            />

{activeCellId === cell.id && queryResults && (
              <div className="border-t border-gray-200">
                <div className="bg-gray-50 p-2 flex items-center justify-between border-b border-gray-200">
                  <div className="text-sm text-gray-500">Query executed in 0.12s • {queryResults.rows.length} rows</div>
                  <div className="flex items-center space-x-2">
                    <Button variant="ghost" size="sm" className="h-8 px-2 text-gray-600">
                      <Copy className="h-4 w-4 mr-1" />
                      Copy
                    </Button>
                    <Button variant="ghost" size="sm" className="h-8 px-2 text-gray-600">
                      <Download className="h-4 w-4 mr-1" />
                      Export
                    </Button>
                  </div>
                </div>

<DataGrid data={queryResults.rows} columns={queryResults.columns} onColumnClick={onSelectColumn} />
              </div>
            )}
          </div>
        ))}

<Button
          variant="outline"
          onClick={() => handleAddCell(cells[cells.length - 1].id)}
          className="w-full border-dashed border-gray-300 text-gray-500"
        >
          <Plus className="h-4 w-4 mr-2" />
          Add SQL Cell
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/column-stats.tsx" isEdit="true" isQuickEdit="true"
"use client"
import { Download } from "lucide-react"
import { Button } from "@/components/ui/button"

interface ColumnStatsProps {
  selectedColumn: string | null
  queryResults: any | null
}

export function ColumnStats({ selectedColumn, queryResults }: ColumnStatsProps) {
  if (!queryResults) {
    return (
      <div className="w-80 border-l border-gray-200 bg-gray-50 p-4 overflow-auto">
        <div className="text-center text-gray-400 mt-8">
          <p>Run a query to see table summary</p>
        </div>
      </div>
    )
  }

// Calculate table statistics
  const totalRows = queryResults.rows.length
  const totalColumns = queryResults.columns.length

// Get column types summary
  const columnTypes: Record<string, number> = {}
  queryResults.columns.forEach((col: any) => {
    columnTypes[col.type] = (columnTypes[col.type] || 0) + 1
  })

return (
    <div className="w-80 border-l border-gray-200 bg-gray-50 p-4 overflow-auto">
      <div className="mb-4">
        <h3 className="text-lg font-medium">Table Summary</h3>
        <p className="text-sm text-gray-500">Query results overview</p>
      </div>

<div className="space-y-4">
        <div className="bg-white p-4 rounded-md border border-gray-200">
          <h4 className="text-sm font-medium mb-2">Overview</h4>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-gray-500">Total rows:</span>
              <span>{totalRows.toLocaleString()}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-500">Total columns:</span>
              <span>{totalColumns}</span>
            </div>
          </div>
        </div>

<div className="bg-white p-4 rounded-md border border-gray-200">
          <h4 className="text-sm font-medium mb-2">Columns</h4>
          <div className="space-y-2 text-sm">
            {queryResults.columns.map((column: any, index: number) => (
              <div key={index} className="flex items-center py-1 border-b border-gray-100 last:border-0">
                <div className="h-4 w-4 rounded bg-blue-100 text-blue-800 text-xs flex items-center justify-center mr-2">
                  {column.type.charAt(0)}
                </div>
                <span className="flex-1 truncate">{column.name}</span>
                <span className="text-xs text-gray-500">{column.type}</span>
              </div>
            ))}
          </div>
        </div>

{selectedColumn && (
          <div className="bg-white p-4 rounded-md border border-gray-200">
            <h4 className="text-sm font-medium mb-2">Selected Column: {selectedColumn}</h4>
            <div className="space-y-2 text-sm">
              {(() => {
                const column = queryResults.columns.find((col: any) => col.name === selectedColumn)
                if (!column) return null

// Extract values for the selected column
                const values = queryResults.rows.map((row: any) => row[selectedColumn])

// Calculate basic statistics
                const numericValues = values.filter((v: any) => typeof v === "number")
                const stats = {
                  count: values.length,
                  nullCount: values.filter((v: any) => v === null || v === undefined).length,
                  distinct: new Set(values).size,
                  min: numericValues.length ? Math.min(...numericValues) : null,
                  max: numericValues.length ? Math.max(...numericValues) : null,
                  avg: numericValues.length
                    ? numericValues.reduce((a: number, b: number) => a + b, 0) / numericValues.length
                    : null,
                }

return (
                  <>
                    <div className="flex justify-between">
                      <span className="text-gray-500">Type:</span>
                      <span>{column.type}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-500">Null count:</span>
                      <span>{stats.nullCount}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-500">Distinct values:</span>
                      <span>{stats.distinct}</span>
                    </div>
                    {stats.min !== null && (
                      <div className="flex justify-between">
                        <span className="text-gray-500">Min:</span>
                        <span>{stats.min}</span>
                      </div>
                    )}
                    {stats.max !== null && (
                      <div className="flex justify-between">
                        <span className="text-gray-500">Max:</span>
                        <span>{stats.max}</span>
                      </div>
                    )}
                    {stats.avg !== null && (
                      <div className="flex justify-between">
                        <span className="text-gray-500">Average:</span>
                        <span>{stats.avg.toFixed(2)}</span>
                      </div>
                    )}
                  </>
                )
              })()}
            </div>
          </div>
        )}
      </div>

<div className="mt-4">
        <Button variant="outline" size="sm" className="w-full flex items-center justify-center">
          <Download className="h-4 w-4 mr-2" />
          Export Summary
        </Button>
      </div>
    </div>
  )
}
</article></body></html>