[V0_FILE]typescriptreact:file="components/sidebar-nav.tsx" isFixed="true" isQuickEdit="true" import { Home, Calendar, MessageCircle, HelpCircle, Settings, Upload } from "lucide-react" import { cn } from "@/lib/utils" import type React from "react" // Added import for React interface NavItemProps { icon: React.ReactNode label: string active?: boolean } function NavItem({ icon, label, active }: NavItemProps) { return (

{icon} {label}

) } export function SidebarNav() { return (

} label="Help" /> } label="Settings" /> } label="Upgrade" />

) } [V0_FILE]typescriptreact:file="components/profile-section.tsx" import { Instagram } from "lucide-react" import { Button } from "@/components/ui/button" export function ProfileSection() { return (

Alex

Hey! I'm Jacob, aka GamerLegend42. Passionate about everything gaming, from retro classics to the latest eSports. When not gaming, I'm probably streaming or exploring new tech. Join me for epic gaming adventures!

@Username

) } [V0_FILE]typescriptreact:file="components/belt-system.tsx" import { Button } from "@/components/ui/button" interface BeltProps { type: "Bronze" | "Silver" | "Gold" | "Platinum" credit: number count: number } function Belt({ type, credit, count }: BeltProps) { return (

Credit: {credit}

{count}

) } export function BeltSystem() { return (

My Belts

) } [V0_FILE]typescriptreact:file="components/game-stats.tsx" interface StatCardProps { value: number label: string color: string } function StatCard({ value, label, color }: StatCardProps) { return (

{value}

{label}

) } export function GameStats() { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { SidebarNav } from "@/components/sidebar-nav" import { ProfileSection } from "@/components/profile-section" import { BeltSystem } from "@/components/belt-system" import { GameStats } from "@/components/game-stats" import { Button } from "@/components/ui/button" import { Search } from "lucide-react" export default function Page() { return (

My profile

My games stats

My Games

{["Counter-Strike 2", "VALORANT", "Tom Clancy's Rainbow Six Siege", "Team Fortress 2"].map((game) => (

{game}

))}

) } [V0_FILE]typescript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], theme: { 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)", }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], }, }, }, plugins: [require("tailwindcss-animate")], }