feat: implement financial recurrence, privacy settings, and premium DateTimePicker overhaul

src/components/SettingsTabs.tsx

@@ -1,21 +1,23 @@
 'use client'
 
 import { useState } from 'react'
-import { MapPin, Palette } from 'lucide-react'
+import { MapPin, Palette, Briefcase } from 'lucide-react'
 import { clsx } from 'clsx'
 import { motion, AnimatePresence } from 'framer-motion'
 
 interface SettingsTabsProps {
     branding: React.ReactNode
     arenas: React.ReactNode
+    sponsors: React.ReactNode
 }
 
-export function SettingsTabs({ branding, arenas }: SettingsTabsProps) {
-    const [activeTab, setActiveTab] = useState<'branding' | 'arenas'>('branding')
+export function SettingsTabs({ branding, arenas, sponsors }: SettingsTabsProps) {
+    const [activeTab, setActiveTab] = useState<'branding' | 'arenas' | 'sponsors'>('branding')
 
     const tabs = [
         { id: 'branding', label: 'Identidade Visual', icon: Palette },
         { id: 'arenas', label: 'Locais & Arenas', icon: MapPin },
+        { id: 'sponsors', label: 'Patrocínios', icon: Briefcase },
     ] as const
 
     return (
@@ -62,6 +64,17 @@ export function SettingsTabs({ branding, arenas }: SettingsTabsProps) {
                             {arenas}
                         </motion.div>
                     )}
+                    {activeTab === 'sponsors' && (
+                        <motion.div
+                            key="sponsors"
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -10 }}
+                            transition={{ duration: 0.2 }}
+                        >
+                            {sponsors}
+                        </motion.div>
+                    )}
                 </AnimatePresence>
             </div>
         </div>