contacts: use ui/Card component

fix app background
profile: use ui/Card
2025-01-27 17:27:07 +03:00 · 2025-01-27 17:20:34 +03:00 · 2025-01-27 16:40:05 +03:00 · 2025-01-27 15:40:58 +03:00 · 2025-01-27 15:09:58 +03:00 · 2025-01-27 15:08:39 +03:00
14 changed files with 102 additions and 31 deletions
--- a/apps/web/app/(main)/contacts/page.tsx
+++ b/apps/web/app/(main)/contacts/page.tsx
@ -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>
  );
 }
--- a/apps/web/app/(main)/layout.tsx
+++ b/apps/web/app/(main)/layout.tsx
@ -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>
+    </>
  );
 }
--- a/apps/web/app/(main)/profile/[telegramId]/page.tsx
+++ b/apps/web/app/(main)/profile/[telegramId]/page.tsx
@ -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 = {
+type Props = { params: Promise<{ telegramId: string }> };
  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>
  );
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@ -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>
--- a/apps/web/components/navigation/header/back-button.tsx
+++ b/apps/web/components/navigation/header/back-button.tsx
@ -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>
  );
 }
--- a/apps/web/components/navigation/header/index.tsx
+++ b/apps/web/components/navigation/header/index.tsx
@ -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>
  );
 }
--- a/apps/web/components/navigation/header/page-title.tsx
+++ b/apps/web/components/navigation/header/page-title.tsx
@ -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>;
 }
--- a/apps/web/components/navigation/index.tsx
+++ b/apps/web/components/navigation/index.tsx
@ -1 +1,2 @@
 export * from './header';
 export * from './navbar';
--- a/apps/web/components/navigation/navbar/index.tsx
+++ b/apps/web/components/navigation/navbar/index.tsx
@ -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="Записи" />
--- a/apps/web/components/navigation/navbar/nav-button.tsx
+++ b/apps/web/components/navigation/navbar/nav-button.tsx
--- a/apps/web/components/profile/profile-card.tsx
+++ b/apps/web/components/profile/profile-card.tsx
@ -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>
+    <Card className="p-4">
-      <CardHeader className="flex flex-row items-center space-x-4 pb-2">
+      <div className="flex flex-col gap-4">
-        <Avatar className="size-12">
+        {telegramId ? false : <ProfileFieldsHeader />}
          <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">
        {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>
  );
 }
--- a/packages/ui/src/components/ui/card.tsx
+++ b/packages/ui/src/components/ui/card.tsx
@ -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}
    />
--- a/packages/ui/src/globals.css
+++ b/packages/ui/src/globals.css
@ -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%;
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@ -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: {
Author	SHA1	Message	Date
vchikalkin	5b03631512	contacts: use ui/Card component	2025-01-27 17:27:07 +03:00
vchikalkin	d56fc90e4d	fix app background	2025-01-27 17:20:34 +03:00
vchikalkin	b621253482	profile: use ui/Card	2025-01-27 16:40:05 +03:00
vchikalkin	a6ce3ad09b	fix profile layout	2025-01-27 15:40:58 +03:00
vchikalkin	fcf7a39aec	remove page-header from main pages	2025-01-27 15:09:58 +03:00
vchikalkin	fed597229f	make profile photo bigger	2025-01-27 15:08:39 +03:00
vchikalkin	22022fb480	remove navigation context	2025-01-27 15:02:34 +03:00
vchikalkin	2a9470e4ce	optimize layout	2025-01-27 14:38:01 +03:00
vchikalkin	434122060a	set header title	2025-01-27 14:32:53 +03:00
vchikalkin	28fdcdebfe	prepare for header back button: fix pages layout add header with back button	2025-01-27 13:53:24 +03:00
`@ -1 +1,2 @@`
		`export * from './header';`
	`export * from './navbar';`	`export * from './navbar';`