feat: adiciona horario e icone de relogio na pagina de confirmacao
This commit is contained in:
@@ -1,34 +1,38 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { MapPin, Palette, Briefcase } from 'lucide-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, arenas, sponsors }: SettingsTabsProps) {
|
||||
const [activeTab, setActiveTab] = useState<'branding' | 'arenas' | 'sponsors'>('branding')
|
||||
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">
|
||||
<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",
|
||||
"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"
|
||||
@@ -53,6 +57,28 @@ export function SettingsTabs({ branding, arenas, sponsors }: SettingsTabsProps)
|
||||
{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"
|
||||
|
||||
Reference in New Issue
Block a user