"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { FileCode2, Database, ShieldCheck, Zap, Terminal, Play, ChevronRight, Lock, Unlock, Activity, Server, Code2 } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } interface IdeFeature { id: string; filename: string; icon: React.ElementType; iconColor: string; title: string; description: string; codeSnippet: React.ReactNode; Visual: React.FC<{ isRunning: boolean }>; } export interface DeveloperIdeShowcaseProps { badge?: string; heading: string; subheading: string; className?: string; } const AuthVisual = ({ isRunning }: { isRunning: boolean }) => (

{isRunning ? ( ) : ( )}

{isRunning ? "Authenticated" : "Sign In"}

); const DatabaseVisual = ({ isRunning }: { isRunning: boolean }) => (

users_table

Connected

{[1, 2, 3].map((row, i) => (

{i + 1}

))}

); const RealtimeVisual = ({ isRunning }: { isRunning: boolean }) => (

{[...Array(12)].map((_, i) => ( ))}

); const EdgeVisual = ({ isRunning }: { isRunning: boolean }) => (

{[0, 72, 144, 216, 288].map((degree, i) => ( {isRunning && ( )} ))}

); const featuresData: IdeFeature[] = [ { id: "auth", filename: "middleware.ts", icon: ShieldCheck, iconColor: "text-indigo-400", title: "Zero-Trust Authentication", description: "Implement enterprise-grade security with a few lines of code. Our middleware handles session management, OAuth, and MFA automatically.", codeSnippet: ( <>

{'// Protected routes middleware'}

import {'{ auth }'} from "@uixtra/auth";

import {'{ NextResponse }'} from "next/server";

export default auth((req) => {'{'}

if (!req.auth) {'{'}

return NextResponse.redirect("/login");

{'}'}

return NextResponse.next();

{'}'});

export const config = {'{'}

matcher: ["/dashboard/:path*"],

{'}'};

), Visual: AuthVisual, }, { id: "db", filename: "schema.prisma", icon: Database, iconColor: "text-emerald-400", title: "Type-Safe Database", description: "Interact with your data using a fully typed ORM. Never write a raw SQL query again unless you absolutely want to.", codeSnippet: ( <>

{'// Data model definition'}

datasource db {'{'}

provider = "postgresql"

url = env("DATABASE_URL")

{'}'}

model User {'{'}

id String @id @default(cuid())

email String @unique

name String?

role Role @default(USER)

createdAt DateTime @default(now())

{'}'}

), Visual: DatabaseVisual, }, { id: "realtime", filename: "events.ts", icon: Zap, iconColor: "text-amber-400", title: "Global Pub/Sub", description: "Broadcast events to millions of connected clients in milliseconds. Perfect for chat apps, live charts, and multiplayer experiences.", codeSnippet: ( <>

{'// Real-time event subscription'}

import {'{ Channel }'} from "@uixtra/realtime";

const channel = new Channel("live-metrics");

export function subscribeToMetrics(callback) {'{'}

channel.subscribe("update", (payload) => {'{'}

{'// Automatically handles reconnects'}

callback(payload.data);

{'}'});

return () => channel.unsubscribe();

{'}'}

), Visual: RealtimeVisual, }, { id: "edge", filename: "api/route.ts", icon: Server, iconColor: "text-blue-400", title: "Edge Computing", description: "Run your backend logic at the edge, literally steps away from your users. Achieve zero cold starts and infinite scalability.", codeSnippet: ( <>

{'// Edge function deployment'}

export const runtime = "edge";

export async function GET(req: Request) {'{'}

const {'{ geo }'} = req;

const response = await fetch(

`https://api.weather.com/v1/${'{geo.city}'}`

);

return Response.json({'{\n'}

location: geo.city,

data: await response.json()

{'}'});

{'}'}

), Visual: EdgeVisual, } ]; export function DeveloperIdeShowcase({ badge, heading, subheading, className }: DeveloperIdeShowcaseProps) { const [activeId, setActiveId] = useState(featuresData[0].id); const [isRunning, setIsRunning] = useState(true); const activeFeature = featuresData.find(f => f.id === activeId)!; const ActiveVisual = activeFeature.Visual; useEffect(() => { setIsRunning(false); const timer = setTimeout(() => setIsRunning(true), 100); return () => clearTimeout(timer); }, [activeId]); return (

{badge && (

{badge}

)} {heading} {subheading}

uixtra-core-workspace

Explorer

{featuresData.map((feature) => { const Icon = feature.icon; const isActive = activeId === feature.id; return ( ); })}

{activeFeature.title}

{activeFeature.description}

{activeFeature.filename}

{[...Array(15)].map((_, i) =>

{i + 1}

)}

{activeFeature.codeSnippet}

Preview

); } export default function DeveloperIdeShowcaseDemo() { return (

); }