feat: add error handling to player creation and update gitignore for agent

src/components/SettingsTabs.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useState } from 'react'
+import { MapPin, Palette } from 'lucide-react'
+import { clsx } from 'clsx'
+import { motion, AnimatePresence } from 'framer-motion'
+
+interface SettingsTabsProps {
+    branding: React.ReactNode
+    arenas: React.ReactNode
+}
+
+export function SettingsTabs({ branding, arenas }: SettingsTabsProps) {
+    const [activeTab, setActiveTab] = useState<'branding' | 'arenas'>('branding')
+
+    const tabs = [
+        { id: 'branding', label: 'Identidade Visual', icon: Palette },
+        { id: 'arenas', label: 'Locais & Arenas', icon: MapPin },
+    ] as const
+
+    return (
+        <div className="space-y-8">
+            <div className="flex p-1 bg-surface-raised rounded-xl border border-border w-full sm:w-fit">
+                {tabs.map((tab) => (
+                    <button
+                        key={tab.id}
+                        onClick={() => setActiveTab(tab.id)}
+                        className={clsx(
+                            "flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-bold transition-all flex-1 sm:flex-none justify-center",
+                            activeTab === tab.id
+                                ? "bg-primary text-background shadow-lg shadow-emerald-500/10"
+                                : "text-muted hover:text-foreground hover:bg-white/5"
+                        )}
+                    >
+                        <tab.icon className="w-4 h-4" />
+                        {tab.label}
+                    </button>
+                ))}
+            </div>
+
+            <div className="min-h-[500px]">
+                <AnimatePresence mode="wait">
+                    {activeTab === 'branding' && (
+                        <motion.div
+                            key="branding"
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -10 }}
+                            transition={{ duration: 0.2 }}
+                        >
+                            {branding}
+                        </motion.div>
+                    )}
+                    {activeTab === 'arenas' && (
+                        <motion.div
+                            key="arenas"
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -10 }}
+                            transition={{ duration: 0.2 }}
+                        >
+                            {arenas}
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+        </div>
+    )
+}