Compare commits
10 Commits
main
...
feature/ba
| Author | SHA1 | Date | |
|---|---|---|---|
|
5b03631512 | ||
|
|
d56fc90e4d | ||
|
|
b621253482 | ||
|
|
a6ce3ad09b | ||
|
|
fcf7a39aec | ||
|
|
fed597229f | ||
|
|
22022fb480 | ||
|
|
2a9470e4ce | ||
|
|
434122060a | ||
|
|
28fdcdebfe |
@ -1,17 +1,20 @@
|
||||
import { ContactsList } from '@/components/contacts/contacts-list';
|
||||
import { ContactsFilter } from '@/components/contacts/dropdown-filter';
|
||||
import { ContactsFilterProvider } from '@/context/contacts-filter';
|
||||
import { Card } from '@repo/ui/components/ui/card';
|
||||
|
||||
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-6 pb-2">
|
||||
<Card>
|
||||
<div className="flex flex-row items-center justify-between space-x-4 p-4">
|
||||
<h1 className="text-2xl font-bold">Контакты</h1>
|
||||
<ContactsFilter />
|
||||
</div>
|
||||
<div className="bg-background p-6 pt-0">
|
||||
<div className="p-4 pt-0">
|
||||
<ContactsList />
|
||||
</div>
|
||||
</Card>
|
||||
</ContactsFilterProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,9 +3,9 @@ import { type PropsWithChildren } from 'react';
|
||||
|
||||
export default async function Layout({ children }: Readonly<PropsWithChildren>) {
|
||||
return (
|
||||
<div className="mx-auto flex h-screen flex-col justify-between">
|
||||
<>
|
||||
<main>{children}</main>
|
||||
<BottomNav />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
import { getProfile } from '@/actions/profile';
|
||||
import { PageHeader } from '@/components/navigation';
|
||||
import { ProfileCard } from '@/components/profile/profile-card';
|
||||
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
|
||||
|
||||
type Props = {
|
||||
params: Promise<{
|
||||
telegramId: string;
|
||||
}>;
|
||||
};
|
||||
type Props = { params: Promise<{ telegramId: string }> };
|
||||
|
||||
export default async function ProfilePage(props: Readonly<Props>) {
|
||||
const parameters = await props.params;
|
||||
@ -21,6 +18,7 @@ export default async function ProfilePage(props: Readonly<Props>) {
|
||||
|
||||
return (
|
||||
<HydrationBoundary state={dehydrate(queryClient)}>
|
||||
<PageHeader title="Профиль контакта" />
|
||||
<ProfileCard telegramId={telegramId} />
|
||||
</HydrationBoundary>
|
||||
);
|
||||
|
||||
@ -16,7 +16,7 @@ export default async function RootLayout({ children }: Readonly<PropsWithChildre
|
||||
|
||||
return (
|
||||
<html lang={locale}>
|
||||
<body className="bg-secondary">
|
||||
<body className="bg-app-background">
|
||||
<I18nProvider>
|
||||
<ThemeProvider>
|
||||
<AuthProvider>
|
||||
|
||||
14
apps/web/components/navigation/header/back-button.tsx
Normal file
14
apps/web/components/navigation/header/back-button.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
'use client';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export function BackButton() {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="m-2 cursor-pointer">
|
||||
<ArrowLeft className="size-5" onClick={() => router.back()} />
|
||||
<span className="sr-only">Назад</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
apps/web/components/navigation/header/index.tsx
Normal file
14
apps/web/components/navigation/header/index.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
'use client';
|
||||
import { BackButton } from './back-button';
|
||||
import { PageTitle } from './page-title';
|
||||
|
||||
type Props = { title: string | undefined };
|
||||
|
||||
export function PageHeader(props: Readonly<Props>) {
|
||||
return (
|
||||
<div className="sticky top-0 z-50 flex items-center bg-background p-2">
|
||||
<BackButton />
|
||||
<PageTitle title={props.title} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
apps/web/components/navigation/header/page-title.tsx
Normal file
5
apps/web/components/navigation/header/page-title.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
type Props = { readonly title: string | undefined };
|
||||
|
||||
export function PageTitle(props: Readonly<Props>) {
|
||||
return <span className="h-8 text-lg font-bold tracking-wide">{props?.title}</span>;
|
||||
}
|
||||
@ -1 +1,2 @@
|
||||
export * from './header';
|
||||
export * from './navbar';
|
||||
|
||||
@ -3,7 +3,7 @@ import { BookOpen, Newspaper, PlusCircle, User, Users } from 'lucide-react';
|
||||
|
||||
export function BottomNav() {
|
||||
return (
|
||||
<nav className="sticky inset-x-0 bottom-0 border-t border-border bg-background">
|
||||
<nav className="fixed inset-x-0 bottom-0 border-t border-border bg-background">
|
||||
<div className="grid grid-cols-5">
|
||||
<NavButton href="/dashboard" icon={<Newspaper />} label="Главное" />
|
||||
<NavButton href="/records" icon={<BookOpen />} label="Записи" />
|
||||
@ -5,32 +5,35 @@ 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 { Button } from '@repo/ui/components/ui/button';
|
||||
import { Card, CardContent, CardHeader } from '@repo/ui/components/ui/card';
|
||||
import { Card } from '@repo/ui/components/ui/card';
|
||||
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 (
|
||||
<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">
|
||||
<Card className="p-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
{telegramId ? false : <ProfileFieldsHeader />}
|
||||
{telegramId ? (
|
||||
false
|
||||
) : (
|
||||
@ -74,7 +77,37 @@ export function ProfileCard({ telegramId }: ProfileCardProps) {
|
||||
) : (
|
||||
false
|
||||
)}
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function Person({ telegramId }: ProfileProps) {
|
||||
const { data: customer } = useQuery({
|
||||
queryFn: () => getProfile({ telegramId }),
|
||||
queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
|
||||
});
|
||||
|
||||
if (!customer) return null;
|
||||
|
||||
return (
|
||||
<Card className="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>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ProfileFieldsHeader() {
|
||||
return (
|
||||
<div className="flex flex-row justify-between">
|
||||
<h1 className="text-lg font-bold text-muted-foreground">Ваши данные</h1>
|
||||
<div />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import * as React from 'react';
|
||||
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
|
||||
className={cn('rounded-lg bg-card text-card-foreground shadow-sm', className)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--app-background: 240 4.8% 95.9%;
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
@ -32,6 +33,7 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
--app-background: 240 3.7% 7%;
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
|
||||
@ -35,6 +35,7 @@ const config = {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
'app-background': 'hsl(var(--app-background))',
|
||||
background: 'hsl(var(--background))',
|
||||
border: 'hsl(var(--border))',
|
||||
card: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user