components/profile: rename components files

apps/web/app/(main)/profile/[telegramId]/page.tsx

@@ -1,6 +1,6 @@
 import { getProfile } from '@/actions/profile';
 import { PageHeader } from '@/components/navigation';
-import { ProfileCard } from '@/components/profile/profile-card';
+import { DataCard, PersonCard } from '@/components/profile';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
 type Props = { params: Promise<{ telegramId: string }> };
@@ -19,7 +19,10 @@ export default async function ProfilePage(props: Readonly<Props>) {
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <PageHeader title="Профиль контакта" />
-      <ProfileCard telegramId={telegramId} />
+      <div className="space-y-4">
+        <PersonCard telegramId={telegramId} />
+        <DataCard telegramId={telegramId} />
+      </div>
     </HydrationBoundary>
   );
 }

apps/web/app/(main)/profile/page.tsx

@@ -1,5 +1,5 @@
 import { getProfile } from '@/actions/profile';
-import { ProfileCard } from '@/components/profile/profile-card';
+import { DataCard, PersonCard } from '@/components/profile';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
 export default async function ProfilePage() {
@@ -12,7 +12,10 @@ export default async function ProfilePage() {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <ProfileCard />
+      <div className="space-y-4">
+        <PersonCard />
+        <DataCard />
+      </div>
     </HydrationBoundary>
   );
 }

apps/web/components/profile/card-header.tsx

@@ -0,0 +1,12 @@
+type Props = {
+  title: string;
+};
+
+export function ProfileCardHeader({ title }: Readonly<Props>) {
+  return (
+    <div className="flex flex-row justify-between">
+      <h1 className="text-lg font-bold text-muted-foreground">{title}</h1>
+      <div />
+    </div>
+  );
+}

apps/web/components/profile/data-card.tsx

@@ -1,28 +1,16 @@
 'use client';
+import { ProfileCardHeader } from './card-header';
 import { updateRole } from './lib/actions';
+import { type ProfileProps } from './types';
 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 { CheckboxWithText } from '@/components/profile/checkbox-field';
+import { DataField } from '@/components/profile/text-field';
 import { Button } from '@repo/ui/components/ui/button';
 import { Card } from '@repo/ui/components/ui/card';
 import { useQuery } from '@tanstack/react-query';
 import Link from 'next/link';
 
-type ProfileProps = {
-  readonly telegramId?: string;
-};
-
-export function ProfileCard(props: ProfileProps) {
-  return (
-    <div className="space-y-4">
-      <Person {...props} />
-      <ProfileFields {...props} />
-    </div>
-  );
-}
-
-export function ProfileFields({ telegramId }: ProfileProps) {
+export function DataCard({ telegramId }: Readonly<ProfileProps>) {
   const { data: customer } = useQuery({
     queryFn: () => getProfile({ telegramId }),
     queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
@@ -33,11 +21,11 @@ export function ProfileFields({ telegramId }: ProfileProps) {
   return (
     <Card className="p-4">
       <div className="flex flex-col gap-4">
-        {telegramId ? false : <ProfileFieldsHeader />}
+        {telegramId ? false : <ProfileCardHeader title="Ваши данные" />}
         {telegramId ? (
           false
         ) : (
-          <ProfileField
+          <DataField
             fieldName="name"
             id="name"
             label="Имя"
@@ -46,7 +34,7 @@ export function ProfileFields({ telegramId }: ProfileProps) {
           />
         )}
         <Link href={telegramId && customer?.phone ? `tel:${customer?.phone}` : ''}>
-          <ProfileField
+          <DataField
             disabled={!telegramId}
             id="phone"
             label="Телефон"
@@ -81,33 +69,3 @@ export function ProfileFields({ telegramId }: ProfileProps) {
     </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>
-  );
-}

apps/web/components/profile/index.ts

@@ -0,0 +1,2 @@
+export * from './data-card';
+export * from './person-card';

apps/web/components/profile/person-card.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { type ProfileProps } from './types';
+import { getProfile } from '@/actions/profile';
+import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
+import { Card } from '@repo/ui/components/ui/card';
+import { useQuery } from '@tanstack/react-query';
+
+export function PersonCard({ telegramId }: Readonly<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>
+  );
+}

apps/web/components/profile/text-field.tsx

@@ -16,7 +16,7 @@ type ProfileFieldProps = {
   readonly value: string;
 };
 
-export function ProfileField({
+export function DataField({
   disabled = false,
   fieldName,
   id,

apps/web/components/profile/types.tsx

@@ -0,0 +1,3 @@
+export type ProfileProps = {
+  readonly telegramId?: string;
+};