[V0_FILE]typescriptreact:file="json-to-ts-converter.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Alert, AlertDescription } from "@/components/ui/alert" import { Check, ClipboardCopy, RefreshCw } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface KeyToType { [key: string]: string | KeyToType | Array } export default function JsonToTsConverter() { const [jsonInput, setJsonInput] = useState("") const [tsOutput, setTsOutput] = useState("") const [error, setError] = useState("") const [isConverting, setIsConverting] = useState(false) const [activeTab, setActiveTab] = useState("input") const [isCopied, setIsCopied] = useState(false) const { toast } = useToast() const copyToClipboard = async () => { try { await navigator.clipboard.writeText(tsOutput) setIsCopied(true) // Show toast notification toast({ title: "Copied!", description: "TypeScript interfaces copied to clipboard", }) // Reset the copied state after 2 seconds setTimeout(() => { setIsCopied(false) }, 2000) } catch (err) { console.error("Failed to copy text: ", err) toast({ variant: "destructive", title: "Error", description: "Failed to copy to clipboard", }) } } const convertJsonToTs = () => { setIsConverting(true) setError("") try { // Parse JSON input const jsonObj = JSON.parse(jsonInput.trim()) // Generate TypeScript interfaces const result = generateTypeScriptInterfaces(jsonObj) setTsOutput(result) // Switch to output tab on success setActiveTab("output") // Show success toast toast({ title: "Conversion successful", description: "JSON has been converted to TypeScript interfaces", }) } catch (err) { setError(`Error: ${err instanceof Error ? err.message : String(err)}`) setTsOutput("") // Show error toast toast({ variant: "destructive", title: "Conversion failed", description: err instanceof Error ? err.message : String(err), }) } finally { setIsConverting(false) } } const generateTypeScriptInterfaces = (obj: any, interfaceName = "RootObject"): string => { const interfaces: string[] = [] const rootInterface = generateInterface(obj, interfaceName, interfaces) // Combine all interfaces return [...interfaces, rootInterface].join("\n\n") } const generateInterface = (obj: any, interfaceName: string, interfaces: string[], path: string[] = []): string => { if (typeof obj !== "object" || obj === null) { return getPrimitiveType(obj) } if (Array.isArray(obj)) { if (obj.length === 0) { return "any[]" } // Handle array of objects if (typeof obj[0] === "object" && obj[0] !== null) { const newInterfaceName = `${interfaceName}Item` const itemInterface = generateInterface(obj[0], newInterfaceName, interfaces, [...path, "0"]) // If the result is already an interface name, use it if (itemInterface === newInterfaceName) { return `${newInterfaceName}[]` } // Otherwise, create a new interface for the array items interfaces.push(`interface ${newInterfaceName} ${itemInterface}`) return `${newInterfaceName}[]` } // Handle array of primitives return `${getPrimitiveType(obj[0])}[]` } // Handle object const properties: string[] = [] const nestedTypes: KeyToType = {} for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { const value = obj[key] const propertyPath = [...path, key] if (typeof value === "object" && value !== null) { const sanitizedKey = sanitizePropertyName(key) const newInterfaceName = `${interfaceName}${capitalizeFirstLetter(sanitizedKey)}` if (Array.isArray(value)) { if (value.length > 0 && typeof value[0] === "object" && value[0] !== null) { const itemInterfaceName = `${newInterfaceName}Item` const itemInterface = generateInterface(value[0], itemInterfaceName, interfaces, [...propertyPath, "0"]) if (itemInterface.startsWith("interface")) { interfaces.push(itemInterface) properties.push(` ${sanitizedKey}: ${itemInterfaceName}[]`) } else { properties.push(` ${sanitizedKey}: ${itemInterface}[]`) } } else { properties.push( ` ${sanitizedKey}: ${generateInterface(value, newInterfaceName, interfaces, propertyPath)}`, ) } } else { const nestedInterface = generateInterface(value, newInterfaceName, interfaces, propertyPath) if (nestedInterface.startsWith("{")) { interfaces.push(`interface ${newInterfaceName} ${nestedInterface}`) properties.push(` ${sanitizedKey}: ${newInterfaceName}`) } else { properties.push(` ${sanitizedKey}: ${nestedInterface}`) } } } else { properties.push(` ${sanitizePropertyName(key)}: ${getPrimitiveType(value)}`) } } } return `{\n${properties.join("\n")}\n}` } const getPrimitiveType = (value: any): string => { if (value === null) return "null" if (value === undefined) return "undefined" const type = typeof value if (type === "string") return "string" if (type === "number") return "number" if (type === "boolean") return "boolean" return "any" } const sanitizePropertyName = (name: string): string => { // Handle property names that aren't valid identifiers if (/^[0-9]/.test(name) || /[^a-zA-Z0-9_]/.test(name)) { return `'${name}'` } return name } const capitalizeFirstLetter = (str: string): string => { return str.charAt(0).toUpperCase() + str.slice(1) } const handleClear = () => { setJsonInput("") setTsOutput("") setError("") } return (

JSON to TypeScript Converter Convert JSON objects to TypeScript interfaces JSON Input TypeScript Output

setJsonInput(e.target.value)}
              />
              {error && (
                <Alert variant="destructive">
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}
              <div className="flex justify-between gap-2">
                <Button variant="outline" onClick={handleClear}>
                  Clear
                </Button>
                <Button
                  onClick={convertJsonToTs}
                  disabled={isConverting || !jsonInput.trim()}
                  className="bg-primary hover:bg-primary/90"
                >
                  {isConverting ? (
                    <>
                      <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                      Converting...
                    </>
                  ) : (
                    "Convert to TypeScript"
                  )}
                </Button>
              </div>
            </TabsContent>
            <TabsContent value="output">
              <div className="relative">
                <Textarea
                  readOnly
                  className="min-h-[300px] font-mono"
                  value={tsOutput}
                  placeholder="TypeScript interfaces will appear here..."
                />
                {tsOutput && (
                  <Button
                    size="sm"
                    variant="secondary"
                    className="absolute top-2 right-2 flex items-center gap-1"
                    onClick={copyToClipboard}
                  >
                    {isCopied ? (
                      <>
                        <Check className="h-4 w-4" />
                        <span>Copied!</span>
                      </>
                    ) : (
                      <>
                        <ClipboardCopy className="h-4 w-4" />
                        <span>Copy</span>
                      </>
                    )}
                  </Button>
                )}
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
        <CardFooter className="text-sm text-muted-foreground">
          Convert your JSON data to TypeScript interfaces with proper typing
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"

export function Footer() {
  return (
    <footer className="border-t border-border py-6 md:py-8">
      <div className="container flex flex-col items-center justify-between gap-4 md:flex-row">
        <p className="text-center text-sm text-muted-foreground md:text-left">
          © {new Date().getFullYear()} JSON to TS Converter. All rights reserved.
        </p>
        <div className="flex gap-4 text-sm text-muted-foreground">
          <Link
            href="https://github.com/fromsko"
            target="_blank"
            rel="noopener noreferrer"
            className="hover:text-foreground hover:underline"
          >
            GitHub
          </Link>
          <Link
            href="https://tool.endlove.work/"
            target="_blank"
            rel="noopener noreferrer"
            className="hover:text-foreground hover:underline"
          >
            翻译
          </Link>
          <Link
            href="https://api.endlove.work/"
            target="_blank"
            rel="noopener noreferrer"
            className="hover:text-foreground hover:underline"
          >
            公益接口
          </Link>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescript: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}",
    "./*.{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))",
        },
      },
      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/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 <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

[V0_FILE]typescriptreact:file="theme-toggle.tsx" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"

export function ThemeToggle() {
  const [mounted, setMounted] = useState(false)
  const { resolvedTheme, setTheme } = useTheme()

// Ensure component is mounted to avoid hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

// Toggle between light and dark
  const toggleTheme = () => {
    setTheme(resolvedTheme === "dark" ? "light" : "dark")
  }

if (!mounted) {
    return (
      <Button variant="ghost" size="icon" className="opacity-0">
        <Sun className="h-[1.2rem] w-[1.2rem]" />
      </Button>
    )
  }

return (
    <Button
      variant="outline"
      size="icon"
      onClick={toggleTheme}
      className="focus-visible:ring-0"
      aria-label="Toggle theme"
    >
      {resolvedTheme === "dark" ? (
        <Sun className="h-[1.2rem] w-[1.2rem]" />
      ) : (
        <Moon className="h-[1.2rem] w-[1.2rem]" />
      )}
    </Button>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata, Viewport } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"

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

export const metadata: Metadata = {
  title: "JSON to TypeScript Converter",
  description: "Convert JSON objects to TypeScript interfaces",
}

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "#020817" },
  ],
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem storageKey="json-to-ts-theme">
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="example-usage.tsx" isEdit="true"
"use client"

import JsonToTsConverter from "./json-to-ts-converter"
import { Footer } from "./footer"
import { ThemeToggle } from "./theme-toggle"

export default function Page() {
  return (
    <div className="min-h-screen flex flex-col bg-background text-foreground">
      <header className="container mx-auto py-4 flex justify-end">
        <ThemeToggle />
      </header>
      <main className="flex-1 py-6">
        <h1 className="text-3xl font-bold text-center mb-8">JSON to TypeScript Converter</h1>
        <JsonToTsConverter />
      </main>
      <Footer />
    </div>
  )
}

[V0_FILE]css:file="app/globals.css" isEdit="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 transition-colors duration-300;
  }
}

[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"

import ExampleUsage from "../example-usage"

export default function Page() {
  return <ExampleUsage />
}
</article></body></html>

About

About