admin/zapishis-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix profile layout

Browse Source
This commit is contained in:
vchikalkin 2025-01-27 15:40:58 +03:00
parent fcf7a39aec
commit a6ce3ad09b
3 changed files with 46 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/app/(main)/contacts/page.tsx
View File

@ -5,7 +5,7 @@ import { ContactsFilterProvider } from '@/context/contacts-filter';
export default function ContactsPage() {
return (
<ContactsFilterProvider>
<div className="sticky top-0 z-50 flex flex-row items-center justify-between space-x-4 bg-background p-4">
<div className="flex flex-row items-center justify-between space-x-4 bg-background p-4">
<h1 className="text-2xl font-bold">Контакты</h1>
<ContactsFilter />
</div>

2
apps/web/app/layout.tsx
View File

@ -16,7 +16,7 @@ export default async function RootLayout({ children }: Readonly<PropsWithChildre
return (
<html lang={locale}>
<body className="bg-secondary">
<body className="bg-muted dark:bg-zinc-900">
<I18nProvider>
<ThemeProvider>
<AuthProvider>

55
apps/web/components/profile/profile-card.tsx
View File

@ -8,28 +8,31 @@ import { Button } from '@repo/ui/components/ui/button';
import { useQuery } from '@tanstack/react-query';
import Link from 'next/link';
type ProfileCardProps = {
type ProfileProps = {
readonly telegramId?: string;
};
export function ProfileCard({ telegramId }: ProfileCardProps) {
export function ProfileCard(props: ProfileProps) {
return (
<div className="space-y-4">
<Person {...props} />
<ProfileFields {...props} />
</div>
);
}
export function ProfileFields({ telegramId }: ProfileProps) {
const { data: customer } = useQuery({
queryFn: () => getProfile({ telegramId }),
queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
});
if (!customer) return <div>Пользователь не найден</div>;
if (!customer) return null;
return (
<div className="space-y-4 bg-background p-4">
<div className="flex flex-col items-center space-y-2">
<Avatar className="size-20">
<AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
<AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
</Avatar>
<h2 className="text-3xl font-bold">{customer?.name}</h2>
</div>
<div className="rounded-md bg-background p-4">
<div className="flex flex-col gap-4">
{telegramId ? false : <ProfileFieldsHeader />}
{telegramId ? (
false
) : (
@ -77,3 +80,33 @@ export function ProfileCard({ telegramId }: ProfileCardProps) {
</div>
);
}
function Person({ telegramId }: ProfileProps) {
const { data: customer } = useQuery({
queryFn: () => getProfile({ telegramId }),
queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
});
if (!customer) return null;
return (
<div className="rounded-md bg-background p-4">
<div className="flex flex-col items-center space-y-2">
<Avatar className="size-20">
<AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
<AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
</Avatar>
<h2 className="text-2xl font-bold">{customer?.name}</h2>
</div>
</div>
);
}
function ProfileFieldsHeader() {
return (
<div className="flex flex-row justify-between">
<h1 className="text-lg font-bold text-muted-foreground">Ваши данные</h1>
<div />
</div>
);
}