[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronLeft, ChevronRight, Download, Upload } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" export default function CSVVisualizer() { const [csvText, setCsvText] = useState("") const [delimiter, setDelimiter] = useState(",") const [hasHeader, setHasHeader] = useState(true) const [parsedData, setParsedData] = useState([]) const [currentPage, setCurrentPage] = useState(1) const rowsPerPage = 10 const parseCSV = () => { if (!csvText.trim()) { setParsedData([]) return } // Split by newlines and filter out empty rows const rows = csvText.split(/\r?\n/).filter((row) => row.trim() !== "") // Parse each row by the selected delimiter const data = rows.map((row) => { // Handle quoted values that might contain delimiters const result = [] let inQuote = false let currentValue = "" for (let i = 0; i < row.length; i++) { const char = row[i] if (char === '"' && (i === 0 || row[i - 1] !== "\\")) { inQuote = !inQuote } else if (char === delimiter && !inQuote) { result.push(currentValue) currentValue = "" } else { currentValue += char } } result.push(currentValue) return result }) setParsedData(data) setCurrentPage(1) } const downloadCSV = () => { if (parsedData.length === 0) return const csvContent = parsedData .map((row) => row .map((cell) => { // Escape quotes and wrap in quotes if contains delimiter or newline if (cell.includes('"') || cell.includes(delimiter) || cell.includes("\n")) { return `"${cell.replace(/"/g, '""')}"` } return cell }) .join(delimiter), ) .join("\n") const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.setAttribute("href", url) link.setAttribute("download", "data.csv") document.body.appendChild(link) link.click() document.body.removeChild(link) } // Pagination const totalPages = Math.ceil(parsedData.length / rowsPerPage) const startIndex = (currentPage - 1) * rowsPerPage const visibleData = parsedData.slice(startIndex, startIndex + rowsPerPage) const headers = hasHeader && parsedData.length > 0 ? parsedData[0] : [] const dataRows = hasHeader && parsedData.length > 0 ? parsedData.slice(1) : parsedData const visibleRows = hasHeader ? dataRows.slice(startIndex, startIndex + rowsPerPage) : visibleData return (

CSV Visualizer Paste your CSV data below and visualize it as a table

setCsvText(e.target.value)}
          />

<div className="flex flex-wrap gap-4">
            <div className="flex items-center space-x-2">
              <Label htmlFor="delimiter">Delimiter:</Label>
              <Select value={delimiter} onValueChange={setDelimiter}>
                <SelectTrigger className="w-[100px]">
                  <SelectValue placeholder="Delimiter" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value=",">Comma (,)</SelectItem>
                  <SelectItem value=";">Semicolon (;)</SelectItem>
                  <SelectItem value="\t">Tab</SelectItem>
                  <SelectItem value="|">Pipe (|)</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="flex items-center space-x-2">
              <Switch id="has-header" checked={hasHeader} onCheckedChange={setHasHeader} />
              <Label htmlFor="has-header">Has header row</Label>
            </div>

<Button onClick={parseCSV} className="ml-auto">
              <Upload className="mr-2 h-4 w-4" />
              Parse CSV
            </Button>
          </div>

{parsedData.length > 0 && (
            <div className="rounded-md border">
              <div className="overflow-x-auto">
                <Table>
                  {hasHeader && (
                    <TableHeader>
                      <TableRow>
                        {headers.map((header, index) => (
                          <TableHead key={index}>{header}</TableHead>
                        ))}
                      </TableRow>
                    </TableHeader>
                  )}
                  <TableBody>
                    {visibleRows.length > 0 ? (
                      visibleRows.map((row, rowIndex) => (
                        <TableRow key={rowIndex}>
                          {row.map((cell, cellIndex) => (
                            <TableCell key={cellIndex}>{cell}</TableCell>
                          ))}
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={headers.length || 1} className="text-center">
                          No data to display
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}

{totalPages > 1 && (
            <div className="flex items-center justify-between">
              <div className="text-sm text-muted-foreground">
                Showing {startIndex + 1}-{Math.min(startIndex + rowsPerPage, dataRows.length)} of {dataRows.length} rows
              </div>
              <div className="flex items-center space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
                  disabled={currentPage === 1}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <div className="text-sm">
                  Page {currentPage} of {totalPages}
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
                  disabled={currentPage === totalPages}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button
            variant="outline"
            onClick={() => {
              setCsvText("")
              setParsedData([])
            }}
          >
            Clear
          </Button>
          <Button variant="secondary" onClick={downloadCSV} disabled={parsedData.length === 0}>
            <Download className="mr-2 h-4 w-4" />
            Download CSV
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]css: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: 222.2 47.4% 11.2%;
    --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: 222.2 84% 4.9%;

--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: 210 40% 98%;
    --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: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import "./globals.css"
import type { Metadata } from "next"
import { Inter } from "next/font/google"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "CSV Visualizer",
  description: "Visualize CSV data as a table",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="dashboard.tsx"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function Dashboard() {
  return (
    <div className="container mx-auto p-6 max-w-6xl">
      <Tabs defaultValue="overview" className="mb-8">
        <TabsList>
          <TabsTrigger value="overview" className="rounded-md">
            Overview
          </TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
          <TabsTrigger value="reports">Reports</TabsTrigger>
          <TabsTrigger value="docs">Docs</TabsTrigger>
        </TabsList>
      </Tabs>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <Card>
          <CardContent className="p-6">
            <div className="space-y-1">
              <p className="text-sm text-muted-foreground">Total Revenue</p>
              <p className="text-2xl font-bold">$183,834.94</p>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="space-y-1">
              <p className="text-sm text-muted-foreground">Net Income</p>
              <p className="text-2xl font-bold">$80,489.94</p>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="space-y-1">
              <p className="text-sm text-muted-foreground">Infra Expenses</p>
              <p className="text-2xl font-bold">$3,834.94</p>
            </div>
          </CardContent>
        </Card>
      </div>

<h2 className="text-lg font-semibold mb-4">Transactions</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {Array.from({ length: 6 }).map((_, i) => (
          <Card key={i} className="border border-gray-200">
            <CardContent className="p-4">
              <div className="flex justify-between items-start mb-2">
                <span className="text-2xl font-bold">$50</span>
                <div className="text-right">
                  <p className="font-medium">John Doe</p>
                  <p className="text-sm text-muted-foreground">John@gmail.com</p>
                </div>
              </div>
              <div>
                <span className="text-sm font-medium text-orange-500">Subscription</span>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true"
/** @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)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
</article></body></html>