"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Terminal, Cpu, Database, Webhook, Code2, Blocks, Settings, Menu, X, Zap, ArrowUpRight, FolderOpen } from "lucide-react"; export default function ForgeSidebar() { const [activeItem, setActiveItem] = useState("API Keys"); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const navCategories = [ { title: "Core", color: "bg-[#FFE800] dark:bg-[#CCFF00]", items: [ { id: "Dashboard", icon: Terminal }, { id: "API Keys", icon: Code2, badge: "NEW" }, { id: "Webhooks", icon: Webhook } ] }, { title: "Infrastructure", color: "bg-[#FF3366] dark:bg-[#FF00FF]", items: [ { id: "Databases", icon: Database }, { id: "Compute", icon: Cpu }, { id: "Storage", icon: Blocks } ] } ]; const BrutalistShadow = "shadow-[4px_4px_0px_0px_#171717] dark:shadow-[4px_4px_0px_0px_#ffffff]"; const BrutalistHover = "hover:-translate-y-1 hover:-translate-x-1 hover:shadow-[6px_6px_0px_0px_#171717] dark:hover:shadow-[6px_6px_0px_0px_#ffffff]"; return (

FORGE

{isMobileMenuOpen && (

{navCategories.map((category) => (

{category.title}

{category.items.map((item) => { const isActive = activeItem === item.id; return ( ); })}

))}

)}

FORGE

{navCategories.map((category) => (

{category.title}

{category.items.map((item) => { const isActive = activeItem === item.id; return ( ); })}

))}

{activeItem}

Current Keys

4 active tokens in production environment.

Usage Limits

84% of compute quota reached this month.

System Log

[ERR] Connection timeout on port 8080

[INFO] Database migration completed securely.

[INFO] Worker instance scaled successfully.

); }