671 lines
25 KiB
TypeScript
671 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import Input from '@/components/ui/Input';
|
|
import Toggle from '@/components/ui/Toggle';
|
|
import SectionHeader from '@/components/ui/SectionHeader';
|
|
import FormField from '@/components/ui/FormField';
|
|
import PageHeader from '@/components/ui/PageHeader';
|
|
import {
|
|
Settings,
|
|
Building2,
|
|
Mail,
|
|
Globe,
|
|
Upload,
|
|
Save,
|
|
Bell,
|
|
Shield,
|
|
Eye,
|
|
Trash2,
|
|
CheckCircle,
|
|
User,
|
|
Phone,
|
|
MapPin,
|
|
FileText,
|
|
Link as LinkIcon,
|
|
Image as ImageIcon,
|
|
Lock,
|
|
Key,
|
|
Smartphone,
|
|
AlertCircle
|
|
} from 'lucide-react';
|
|
|
|
// ============================================================================
|
|
// Types
|
|
// ============================================================================
|
|
|
|
interface SponsorProfile {
|
|
companyName: string;
|
|
contactName: string;
|
|
contactEmail: string;
|
|
contactPhone: string;
|
|
website: string;
|
|
description: string;
|
|
logoUrl: string | null;
|
|
industry: string;
|
|
address: {
|
|
street: string;
|
|
city: string;
|
|
country: string;
|
|
postalCode: string;
|
|
};
|
|
taxId: string;
|
|
socialLinks: {
|
|
twitter: string;
|
|
linkedin: string;
|
|
instagram: string;
|
|
};
|
|
}
|
|
|
|
interface NotificationSettings {
|
|
emailNewSponsorships: boolean;
|
|
emailWeeklyReport: boolean;
|
|
emailRaceAlerts: boolean;
|
|
emailPaymentAlerts: boolean;
|
|
emailNewOpportunities: boolean;
|
|
emailContractExpiry: boolean;
|
|
}
|
|
|
|
interface PrivacySettings {
|
|
publicProfile: boolean;
|
|
showStats: boolean;
|
|
showActiveSponsorships: boolean;
|
|
allowDirectContact: boolean;
|
|
}
|
|
|
|
// ============================================================================
|
|
// Mock Data
|
|
// ============================================================================
|
|
|
|
const MOCK_PROFILE: SponsorProfile = {
|
|
companyName: 'Acme Racing Co.',
|
|
contactName: 'John Smith',
|
|
contactEmail: 'sponsor@acme-racing.com',
|
|
contactPhone: '+1 (555) 123-4567',
|
|
website: 'https://acme-racing.com',
|
|
description: 'Premium sim racing equipment and accessories for competitive drivers. We specialize in high-performance steering wheels, pedals, and cockpit systems used by professionals worldwide.',
|
|
logoUrl: null,
|
|
industry: 'Racing Equipment',
|
|
address: {
|
|
street: '123 Racing Boulevard',
|
|
city: 'Indianapolis',
|
|
country: 'United States',
|
|
postalCode: '46222',
|
|
},
|
|
taxId: 'US12-3456789',
|
|
socialLinks: {
|
|
twitter: '@acmeracing',
|
|
linkedin: 'acme-racing-co',
|
|
instagram: '@acmeracing',
|
|
},
|
|
};
|
|
|
|
const MOCK_NOTIFICATIONS: NotificationSettings = {
|
|
emailNewSponsorships: true,
|
|
emailWeeklyReport: true,
|
|
emailRaceAlerts: false,
|
|
emailPaymentAlerts: true,
|
|
emailNewOpportunities: true,
|
|
emailContractExpiry: true,
|
|
};
|
|
|
|
const MOCK_PRIVACY: PrivacySettings = {
|
|
publicProfile: true,
|
|
showStats: false,
|
|
showActiveSponsorships: true,
|
|
allowDirectContact: true,
|
|
};
|
|
|
|
const INDUSTRY_OPTIONS = [
|
|
'Racing Equipment',
|
|
'Automotive',
|
|
'Technology',
|
|
'Gaming & Esports',
|
|
'Energy Drinks',
|
|
'Apparel',
|
|
'Financial Services',
|
|
'Other',
|
|
];
|
|
|
|
// ============================================================================
|
|
// Components
|
|
// ============================================================================
|
|
|
|
function SavedIndicator({ visible }: { visible: boolean }) {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: visible ? 1 : 0, x: visible ? 0 : 20 }}
|
|
transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
|
|
className="flex items-center gap-2 text-performance-green"
|
|
>
|
|
<CheckCircle className="w-4 h-4" />
|
|
<span className="text-sm font-medium">Changes saved</span>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// ============================================================================
|
|
// Main Component
|
|
// ============================================================================
|
|
|
|
export default function SponsorSettingsPage() {
|
|
const router = useRouter();
|
|
const shouldReduceMotion = useReducedMotion();
|
|
const [profile, setProfile] = useState(MOCK_PROFILE);
|
|
const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
|
|
const [privacy, setPrivacy] = useState(MOCK_PRIVACY);
|
|
const [saving, setSaving] = useState(false);
|
|
const [saved, setSaved] = useState(false);
|
|
|
|
const handleSaveProfile = async () => {
|
|
setSaving(true);
|
|
await new Promise(resolve => setTimeout(resolve, 800));
|
|
setSaving(false);
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 3000);
|
|
};
|
|
|
|
const handleDeleteAccount = () => {
|
|
if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone. All sponsorship data will be permanently removed.')) {
|
|
// Call logout API to clear session
|
|
fetch('/api/auth/logout', { method: 'POST' }).finally(() => {
|
|
router.push('/');
|
|
});
|
|
}
|
|
};
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: shouldReduceMotion ? 0 : 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
className="max-w-4xl mx-auto py-8 px-4"
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
{/* Header */}
|
|
<motion.div variants={itemVariants}>
|
|
<PageHeader
|
|
icon={Settings}
|
|
title="Sponsor Settings"
|
|
description="Manage your company profile, notifications, and security preferences"
|
|
action={<SavedIndicator visible={saved} />}
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Company Profile */}
|
|
<motion.div variants={itemVariants}>
|
|
<Card className="mb-6 overflow-hidden">
|
|
<SectionHeader
|
|
icon={Building2}
|
|
title="Company Profile"
|
|
description="Your public-facing company information"
|
|
/>
|
|
<div className="p-6 space-y-6">
|
|
{/* Company Basic Info */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<FormField label="Company Name" icon={Building2} required>
|
|
<Input
|
|
type="text"
|
|
value={profile.companyName}
|
|
onChange={(e) => setProfile({ ...profile, companyName: e.target.value })}
|
|
placeholder="Your company name"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="Industry">
|
|
<select
|
|
value={profile.industry}
|
|
onChange={(e) => setProfile({ ...profile, industry: e.target.value })}
|
|
className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue"
|
|
>
|
|
{INDUSTRY_OPTIONS.map(industry => (
|
|
<option key={industry} value={industry}>{industry}</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
</div>
|
|
|
|
{/* Contact Information */}
|
|
<div className="pt-4 border-t border-charcoal-outline/50">
|
|
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
|
Contact Information
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<FormField label="Contact Name" icon={User} required>
|
|
<Input
|
|
type="text"
|
|
value={profile.contactName}
|
|
onChange={(e) => setProfile({ ...profile, contactName: e.target.value })}
|
|
placeholder="Full name"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="Contact Email" icon={Mail} required>
|
|
<Input
|
|
type="email"
|
|
value={profile.contactEmail}
|
|
onChange={(e) => setProfile({ ...profile, contactEmail: e.target.value })}
|
|
placeholder="sponsor@company.com"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="Phone Number" icon={Phone}>
|
|
<Input
|
|
type="tel"
|
|
value={profile.contactPhone}
|
|
onChange={(e) => setProfile({ ...profile, contactPhone: e.target.value })}
|
|
placeholder="+1 (555) 123-4567"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="Website" icon={Globe}>
|
|
<Input
|
|
type="url"
|
|
value={profile.website}
|
|
onChange={(e) => setProfile({ ...profile, website: e.target.value })}
|
|
placeholder="https://company.com"
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Address */}
|
|
<div className="pt-4 border-t border-charcoal-outline/50">
|
|
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
|
Business Address
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="md:col-span-2">
|
|
<FormField label="Street Address" icon={MapPin}>
|
|
<Input
|
|
type="text"
|
|
value={profile.address.street}
|
|
onChange={(e) => setProfile({
|
|
...profile,
|
|
address: { ...profile.address, street: e.target.value }
|
|
})}
|
|
placeholder="123 Main Street"
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<FormField label="City">
|
|
<Input
|
|
type="text"
|
|
value={profile.address.city}
|
|
onChange={(e) => setProfile({
|
|
...profile,
|
|
address: { ...profile.address, city: e.target.value }
|
|
})}
|
|
placeholder="City"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="Postal Code">
|
|
<Input
|
|
type="text"
|
|
value={profile.address.postalCode}
|
|
onChange={(e) => setProfile({
|
|
...profile,
|
|
address: { ...profile.address, postalCode: e.target.value }
|
|
})}
|
|
placeholder="12345"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="Country">
|
|
<Input
|
|
type="text"
|
|
value={profile.address.country}
|
|
onChange={(e) => setProfile({
|
|
...profile,
|
|
address: { ...profile.address, country: e.target.value }
|
|
})}
|
|
placeholder="Country"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="Tax ID / VAT Number" icon={FileText}>
|
|
<Input
|
|
type="text"
|
|
value={profile.taxId}
|
|
onChange={(e) => setProfile({ ...profile, taxId: e.target.value })}
|
|
placeholder="XX12-3456789"
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="pt-4 border-t border-charcoal-outline/50">
|
|
<FormField label="Company Description">
|
|
<textarea
|
|
value={profile.description}
|
|
onChange={(e) => setProfile({ ...profile, description: e.target.value })}
|
|
placeholder="Tell potential sponsorship partners about your company, products, and what you're looking for in sponsorship opportunities..."
|
|
rows={4}
|
|
className="w-full px-4 py-3 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
This description appears on your public sponsor profile.
|
|
</p>
|
|
</FormField>
|
|
</div>
|
|
|
|
{/* Social Links */}
|
|
<div className="pt-4 border-t border-charcoal-outline/50">
|
|
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
|
Social Media
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<FormField label="Twitter / X" icon={LinkIcon}>
|
|
<Input
|
|
type="text"
|
|
value={profile.socialLinks.twitter}
|
|
onChange={(e) => setProfile({
|
|
...profile,
|
|
socialLinks: { ...profile.socialLinks, twitter: e.target.value }
|
|
})}
|
|
placeholder="@username"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="LinkedIn" icon={LinkIcon}>
|
|
<Input
|
|
type="text"
|
|
value={profile.socialLinks.linkedin}
|
|
onChange={(e) => setProfile({
|
|
...profile,
|
|
socialLinks: { ...profile.socialLinks, linkedin: e.target.value }
|
|
})}
|
|
placeholder="company-name"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="Instagram" icon={LinkIcon}>
|
|
<Input
|
|
type="text"
|
|
value={profile.socialLinks.instagram}
|
|
onChange={(e) => setProfile({
|
|
...profile,
|
|
socialLinks: { ...profile.socialLinks, instagram: e.target.value }
|
|
})}
|
|
placeholder="@username"
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Logo Upload */}
|
|
<div className="pt-4 border-t border-charcoal-outline/50">
|
|
<FormField label="Company Logo" icon={ImageIcon}>
|
|
<div className="flex items-start gap-6">
|
|
<div className="w-24 h-24 rounded-xl bg-gradient-to-br from-iron-gray to-deep-graphite border-2 border-dashed border-charcoal-outline flex items-center justify-center overflow-hidden">
|
|
{profile.logoUrl ? (
|
|
<img src={profile.logoUrl} alt="Company logo" className="w-full h-full object-cover" />
|
|
) : (
|
|
<Building2 className="w-10 h-10 text-gray-600" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3">
|
|
<label className="cursor-pointer">
|
|
<input
|
|
type="file"
|
|
accept="image/png,image/jpeg,image/svg+xml"
|
|
className="hidden"
|
|
/>
|
|
<div className="px-4 py-2 rounded-lg bg-iron-gray border border-charcoal-outline text-gray-300 hover:bg-charcoal-outline transition-colors flex items-center gap-2">
|
|
<Upload className="w-4 h-4" />
|
|
Upload Logo
|
|
</div>
|
|
</label>
|
|
{profile.logoUrl && (
|
|
<Button variant="secondary" className="text-sm text-gray-400">
|
|
Remove
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-2">
|
|
PNG, JPEG, or SVG. Max 2MB. Recommended size: 400x400px.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</FormField>
|
|
</div>
|
|
|
|
{/* Save Button */}
|
|
<div className="pt-6 border-t border-charcoal-outline flex items-center justify-end gap-4">
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleSaveProfile}
|
|
disabled={saving}
|
|
className="min-w-[160px]"
|
|
>
|
|
{saving ? (
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
|
Saving...
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-2">
|
|
<Save className="w-4 h-4" />
|
|
Save Profile
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Notification Preferences */}
|
|
<motion.div variants={itemVariants}>
|
|
<Card className="mb-6 overflow-hidden">
|
|
<SectionHeader
|
|
icon={Bell}
|
|
title="Email Notifications"
|
|
description="Control which emails you receive from GridPilot"
|
|
color="text-warning-amber"
|
|
/>
|
|
<div className="p-6">
|
|
<div className="space-y-1">
|
|
<Toggle
|
|
checked={notifications.emailNewSponsorships}
|
|
onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
|
|
label="Sponsorship Approvals"
|
|
description="Receive confirmation when your sponsorship requests are approved"
|
|
/>
|
|
<Toggle
|
|
checked={notifications.emailWeeklyReport}
|
|
onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
|
|
label="Weekly Analytics Report"
|
|
description="Get a weekly summary of your sponsorship performance"
|
|
/>
|
|
<Toggle
|
|
checked={notifications.emailRaceAlerts}
|
|
onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
|
|
label="Race Day Alerts"
|
|
description="Be notified when sponsored leagues have upcoming races"
|
|
/>
|
|
<Toggle
|
|
checked={notifications.emailPaymentAlerts}
|
|
onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
|
|
label="Payment & Invoice Notifications"
|
|
description="Receive invoices and payment confirmations"
|
|
/>
|
|
<Toggle
|
|
checked={notifications.emailNewOpportunities}
|
|
onChange={(checked) => setNotifications({ ...notifications, emailNewOpportunities: checked })}
|
|
label="New Sponsorship Opportunities"
|
|
description="Get notified about new leagues and drivers seeking sponsors"
|
|
/>
|
|
<Toggle
|
|
checked={notifications.emailContractExpiry}
|
|
onChange={(checked) => setNotifications({ ...notifications, emailContractExpiry: checked })}
|
|
label="Contract Expiry Reminders"
|
|
description="Receive reminders before your sponsorship contracts expire"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Privacy & Visibility */}
|
|
<motion.div variants={itemVariants}>
|
|
<Card className="mb-6 overflow-hidden">
|
|
<SectionHeader
|
|
icon={Eye}
|
|
title="Privacy & Visibility"
|
|
description="Control how your profile appears to others"
|
|
color="text-performance-green"
|
|
/>
|
|
<div className="p-6">
|
|
<div className="space-y-1">
|
|
<Toggle
|
|
checked={privacy.publicProfile}
|
|
onChange={(checked) => setPrivacy({ ...privacy, publicProfile: checked })}
|
|
label="Public Profile"
|
|
description="Allow leagues, teams, and drivers to view your sponsor profile"
|
|
/>
|
|
<Toggle
|
|
checked={privacy.showStats}
|
|
onChange={(checked) => setPrivacy({ ...privacy, showStats: checked })}
|
|
label="Show Sponsorship Statistics"
|
|
description="Display your total sponsorships and investment amounts"
|
|
/>
|
|
<Toggle
|
|
checked={privacy.showActiveSponsorships}
|
|
onChange={(checked) => setPrivacy({ ...privacy, showActiveSponsorships: checked })}
|
|
label="Show Active Sponsorships"
|
|
description="Let others see which leagues and teams you currently sponsor"
|
|
/>
|
|
<Toggle
|
|
checked={privacy.allowDirectContact}
|
|
onChange={(checked) => setPrivacy({ ...privacy, allowDirectContact: checked })}
|
|
label="Allow Direct Contact"
|
|
description="Enable leagues and teams to send you sponsorship proposals"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Security */}
|
|
<motion.div variants={itemVariants}>
|
|
<Card className="mb-6 overflow-hidden">
|
|
<SectionHeader
|
|
icon={Shield}
|
|
title="Account Security"
|
|
description="Protect your sponsor account"
|
|
color="text-primary-blue"
|
|
/>
|
|
<div className="p-6 space-y-4">
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline/50">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-2 rounded-lg bg-iron-gray">
|
|
<Key className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
<div>
|
|
<p className="text-gray-200 font-medium">Password</p>
|
|
<p className="text-sm text-gray-500">Last changed 3 months ago</p>
|
|
</div>
|
|
</div>
|
|
<Button variant="secondary">
|
|
Change Password
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline/50">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-2 rounded-lg bg-iron-gray">
|
|
<Smartphone className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
<div>
|
|
<p className="text-gray-200 font-medium">Two-Factor Authentication</p>
|
|
<p className="text-sm text-gray-500">Add an extra layer of security to your account</p>
|
|
</div>
|
|
</div>
|
|
<Button variant="secondary">
|
|
Enable 2FA
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-2 rounded-lg bg-iron-gray">
|
|
<Lock className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
<div>
|
|
<p className="text-gray-200 font-medium">Active Sessions</p>
|
|
<p className="text-sm text-gray-500">Manage devices where you're logged in</p>
|
|
</div>
|
|
</div>
|
|
<Button variant="secondary">
|
|
View Sessions
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Danger Zone */}
|
|
<motion.div variants={itemVariants}>
|
|
<Card className="border-racing-red/30 overflow-hidden">
|
|
<div className="p-5 border-b border-racing-red/30 bg-gradient-to-r from-racing-red/10 to-transparent">
|
|
<h2 className="text-lg font-semibold text-racing-red flex items-center gap-3">
|
|
<div className="p-2 rounded-lg bg-racing-red/10">
|
|
<AlertCircle className="w-5 h-5 text-racing-red" />
|
|
</div>
|
|
Danger Zone
|
|
</h2>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-2 rounded-lg bg-racing-red/10">
|
|
<Trash2 className="w-5 h-5 text-racing-red" />
|
|
</div>
|
|
<div>
|
|
<p className="text-gray-200 font-medium">Delete Sponsor Account</p>
|
|
<p className="text-sm text-gray-500">
|
|
Permanently delete your account and all associated sponsorship data.
|
|
This action cannot be undone.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={handleDeleteAccount}
|
|
className="text-racing-red border-racing-red/30 hover:bg-racing-red/10"
|
|
>
|
|
Delete Account
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
} |