109 lines
4.4 KiB
TypeScript
109 lines
4.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { MapPin, Palette, Briefcase, Shirt, Zap } from 'lucide-react'
|
|
import { clsx } from 'clsx'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
|
|
interface SettingsTabsProps {
|
|
branding: React.ReactNode
|
|
teams: React.ReactNode
|
|
arenas: React.ReactNode
|
|
sponsors: React.ReactNode
|
|
voting: React.ReactNode
|
|
}
|
|
|
|
export function SettingsTabs({ branding, teams, arenas, sponsors, voting }: SettingsTabsProps) {
|
|
const [activeTab, setActiveTab] = useState<'branding' | 'teams' | 'arenas' | 'sponsors' | 'voting'>('branding')
|
|
|
|
const tabs = [
|
|
{ id: 'branding', label: 'Identidade Visual', icon: Palette },
|
|
{ id: 'voting', label: 'Votação & Resenha', icon: Zap },
|
|
{ id: 'teams', label: 'Times', icon: Shirt },
|
|
{ id: 'arenas', label: 'Locais & Arenas', icon: MapPin },
|
|
{ id: 'sponsors', label: 'Patrocínios', icon: Briefcase },
|
|
] 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 overflow-x-auto">
|
|
{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 whitespace-nowrap",
|
|
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 === 'voting' && (
|
|
<motion.div
|
|
key="voting"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
{voting}
|
|
</motion.div>
|
|
)}
|
|
{activeTab === 'teams' && (
|
|
<motion.div
|
|
key="teams"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
{teams}
|
|
</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>
|
|
)}
|
|
{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>
|
|
)
|
|
}
|