refactor: move minor components to uti

Tivix · Jul 10, 2024 · 5d95aa7 · 5d95aa7
1 parent a3957ea
commit 5d95aa7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 36 deletions.
diff --git a/frontend/src/components/pages/ProfileSetting/ProfileSettings.tsx b/frontend/src/components/pages/ProfileSetting/ProfileSettings.tsx
@@ -8,11 +8,15 @@ import { DeleteIcon } from '@app/static/icons/DeleteIcon';
 import { Avatar } from '@app/components/common/Avatar';
 import { useProfileSettings } from './ProfileSetting.hooks';
 import { CropImageModal } from './modules/CropImageModal';
-import { ReactNode } from 'react';
 import { DeleteImageModal } from './modules/DeleteImageModal';
 import { Typography } from '@app/components/common/Typography';
 import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
 import { routes } from '@app/constants';
+import {
+  LadderDataItem,
+  NotificationCheckbox,
+  PersonalDetailsDataItem,
+} from '@app/components/pages/ProfileSetting/utils';
 
 export const ProfileSettings: React.FC<ProfileSettingsProps> = ({ data }) => {
   const { firstName, lastName, email, ladders, photo } = data;
@@ -28,41 +32,6 @@ export const ProfileSettings: React.FC<ProfileSettingsProps> = ({ data }) => {
     handleSaveCroppedImage,
   } = useProfileSettings();
 
-  const NotificationCheckbox: React.FC<{ icon: ReactNode }> = ({ icon }) => (
-    <div className="flex flex-col items-center">
-      <div className="mb-6 text-navy-500">{icon}</div>
-      <div className="flex h-6 items-center">
-        <input type="checkbox" className="border-gray-300 h-4 w-4 rounded text-blue-800 focus:ring-blue-800" />
-      </div>
-    </div>
-  );
-
-  const PersonalDetailsDataItem: React.FC<{ title: string; value: string | number }> = ({ title, value }) => (
-    <div className="border-b border-navy-200 px-4 py-6 sm:col-span-2 sm:px-0">
-      <dt>
-        <Typography variant="body-m/medium">{title}</Typography>
-      </dt>
-      <dd>
-        <Typography variant="body-m/regular" className="mt-1 text-navy-600 sm:mt-2">
-          {value}
-        </Typography>
-      </dd>
-    </div>
-  );
-
-  const LadderDataItem: React.FC<{ title: string; value: string | number }> = ({ title, value }) => (
-    <div>
-      <dt>
-        <Typography variant="body-m/medium">{title}</Typography>
-      </dt>
-      <dd>
-        <Typography variant="body-m/regular" className="mt-1 text-navy-600 sm:mt-2">
-          {value}
-        </Typography>
-      </dd>
-    </div>
-  );
-
   return (
     <div>
       <Breadcrumbs

diff --git a/frontend/src/components/pages/ProfileSetting/utils.tsx b/frontend/src/components/pages/ProfileSetting/utils.tsx
@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { Typography } from '@app/components/common/Typography';
+
+export const NotificationCheckbox: React.FC<{ icon: ReactNode }> = ({ icon }) => (
+  <div className="flex flex-col items-center">
+    <div className="mb-6 text-navy-500">{icon}</div>
+    <div className="flex h-6 items-center">
+      <input type="checkbox" className="border-gray-300 h-4 w-4 rounded text-blue-800 focus:ring-blue-800" />
+    </div>
+  </div>
+);
+
+export const PersonalDetailsDataItem: React.FC<{ title: string; value: string | number }> = ({ title, value }) => (
+  <div className="border-b border-navy-200 px-4 py-6 sm:col-span-2 sm:px-0">
+    <dt>
+      <Typography variant="body-m/medium">{title}</Typography>
+    </dt>
+    <dd>
+      <Typography variant="body-m/regular" className="mt-1 text-navy-600 sm:mt-2">
+        {value}
+      </Typography>
+    </dd>
+  </div>
+);
+
+export const LadderDataItem: React.FC<{ title: string; value: string | number }> = ({ title, value }) => (
+  <div>
+    <dt>
+      <Typography variant="body-m/medium">{title}</Typography>
+    </dt>
+    <dd>
+      <Typography variant="body-m/regular" className="mt-1 text-navy-600 sm:mt-2">
+        {value}
+      </Typography>
+    </dd>
+  </div>
+);