46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
'use client';
|
||
import { updateRole } from './lib/actions';
|
||
import { getProfile, updateProfile } from '@/actions/profile';
|
||
import { CheckboxWithText } from '@/components/profile/checkbox-with-text';
|
||
import { ProfileField } from '@/components/profile/profile-field';
|
||
import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
|
||
import { Card, CardContent, CardHeader } from '@repo/ui/components/ui/card';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
|
||
export function ProfileCard() {
|
||
const { data: customer } = useQuery({
|
||
queryFn: getProfile,
|
||
queryKey: ['profile'],
|
||
});
|
||
|
||
if (!customer) return <div>Пользователь не найден. Зарегистрируйтесь с помощью бота.</div>;
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center space-x-4 pb-2">
|
||
<Avatar className="size-12">
|
||
<AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
|
||
<AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
|
||
</Avatar>
|
||
<h2 className="text-2xl font-bold">{customer?.name}</h2>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<ProfileField
|
||
fieldName="name"
|
||
id="name"
|
||
label="Имя"
|
||
onChange={updateProfile}
|
||
value={customer?.name ?? ''}
|
||
/>
|
||
<ProfileField disabled id="phone" label="Телефон" value={customer?.phone ?? ''} />
|
||
<CheckboxWithText
|
||
checked={customer.role !== 'client'}
|
||
description="Разрешить другим пользователям записываться к вам"
|
||
onChange={updateRole}
|
||
text="Быть мастером"
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|