CaIon
90 lines
3.0 KiB
TypeScript
Vendored
90 lines
3.0 KiB
TypeScript
Vendored
import { useState } from 'react'
|
|
import { Link2, Settings } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
} from '@/components/ui/card'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
import { TitledCard } from '@/components/ui/titled-card'
|
|
import type { UserProfile } from '../types'
|
|
import { AccountBindingsTab } from './tabs/account-bindings-tab'
|
|
import { NotificationTab } from './tabs/notification-tab'
|
|
|
|
// ============================================================================
|
|
// Profile Settings Card Component
|
|
// ============================================================================
|
|
|
|
interface ProfileSettingsCardProps {
|
|
profile: UserProfile | null
|
|
loading: boolean
|
|
onProfileUpdate: () => void
|
|
}
|
|
|
|
export function ProfileSettingsCard({
|
|
profile,
|
|
loading,
|
|
onProfileUpdate,
|
|
}: ProfileSettingsCardProps) {
|
|
const { t } = useTranslation()
|
|
const [activeTab, setActiveTab] = useState('bindings')
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card className='gap-0 overflow-hidden py-0'>
|
|
<CardHeader className='border-b p-3 !pb-3 sm:p-5 sm:!pb-5'>
|
|
<Skeleton className='h-6 w-32' />
|
|
<Skeleton className='mt-2 h-4 w-48' />
|
|
</CardHeader>
|
|
<CardContent className='space-y-4 p-3 sm:p-5'>
|
|
<Skeleton className='h-10 w-full' />
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<Skeleton key={i} className='h-20 w-full' />
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<TitledCard
|
|
title={t('Settings')}
|
|
description={t('Configure your account preferences and integrations')}
|
|
icon={<Settings className='h-4 w-4' />}
|
|
>
|
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList className='grid h-auto w-full grid-cols-2 gap-1 rounded-xl p-1'>
|
|
<TabsTrigger
|
|
value='bindings'
|
|
className='h-auto gap-2 rounded-lg px-3 py-2'
|
|
>
|
|
<Link2 className='h-4 w-4' />
|
|
<span className='hidden sm:inline'>{t('Account Bindings')}</span>
|
|
<span className='sm:hidden'>{t('Bindings')}</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value='settings'
|
|
className='h-auto gap-2 rounded-lg px-3 py-2'
|
|
>
|
|
<Settings className='h-4 w-4' />
|
|
<span className='hidden sm:inline'>
|
|
{t('Settings & Preferences')}
|
|
</span>
|
|
<span className='sm:hidden'>{t('Settings')}</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value='bindings' className='mt-4 sm:mt-6'>
|
|
<AccountBindingsTab profile={profile} onUpdate={onProfileUpdate} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value='settings' className='mt-4 sm:mt-6'>
|
|
<NotificationTab profile={profile} onUpdate={onProfileUpdate} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</TitledCard>
|
|
)
|
|
}
|