remove unnecessary styles from imagecard in profile page and move ima…

…gecard to profile page
dev-KPI · Jan 29, 2024 · c4b71b7 · c4b71b7
1 parent 64f5409
commit c4b71b7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 49 deletions.
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -1,3 +1,4 @@
+import ImageCard from '@/components/pages/auth/image-card'
 import FileInput from '@/components/pages/profile/file-input'
 import FormProfile from '@/components/pages/profile/form-profile'
 import Content from '@/components/ui/content'
@@ -8,7 +9,9 @@ export default function Profile() {
     <section className="h-screen w-screen bg-gradient-blue-white">
       <Content className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8">
         <div className="p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] rounded-3xl bg-base-white dark:bg-base-black">
-          <FileInput />
+          <ImageCard className="-my-[4.375rem] flex-shrink-0 hidden sm:flex py-32 px-[3.25rem]">
+            <FileInput />
+          </ImageCard>
           <div>
             <div className="flex justify-between pb-2 mt-8">
               <h1 className="title-lg">Profile</h1>

diff --git a/src/components/pages/profile/file-input.tsx b/src/components/pages/profile/file-input.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import ImageCard from '@/components/pages/auth/image-card'
 import { Icons } from '@/components/ui/icons'
 import { Progress } from '@/components/ui/progress'
 import { PROGRESS_TIMEOUT_DELAY } from '@/constants'
@@ -59,59 +58,50 @@ const FileInput: FC<FileInputProps> = ({ className }) => {
   }
 
   return (
-    <ImageCard
-      className={cn(
-        '-my-[4.375rem] flex-shrink-0 hidden sm:flex items-center justify-center py-32 px-[3.25rem]',
-        className
-      )}
-    >
-      <div className="relative">
-        {preview ? (
-          <div>
-            <Image
-              alt="avatar"
-              className="w-[144px] h-[144px] rounded-3xl"
-              src={preview}
-            />
-            <Icons.cross
-              className="absolute z-10 top-4 right-4 text-base-white dark:text-base-black"
-              onClick={clearSelectFile}
-            />
-          </div>
-        ) : (
-          <div>
-            <Icons.photo_profile className="text-base-gray-2 dark:text-base-black" />
+    <div className={cn('relative', className)}>
+      {preview ? (
+        <div>
+          <div className="relative w-[144px] h-[144px] overflow-hidden rounded-3xl">
+            <Image alt="avatar" fill src={preview} />
           </div>
-        )}
-        <div
-          className="absolute -bottom-4 right-1/2 translate-x-1/2"
-          onClick={handleSelectFile}
-        >
-          <Icons.mingcute_camera className="text-white dark:text-bright-indigo" />
-        </div>
-
-        <div
-          className={cn(
-            'absolute z-[11] top-1/2 left-1/2 w-full',
-            !progress && 'w-0'
-          )}
-        >
-          <Progress
-            className="w-5/6 relative mx-auto transition-[width] duration-500 ease-in-out -left-1/2"
-            value={progress}
+          <Icons.cross
+            className="absolute z-10 top-4 right-4 text-base-white dark:text-base-black"
+            onClick={clearSelectFile}
           />
         </div>
+      ) : (
+        <div>
+          <Icons.photo_profile className="text-base-gray-2 dark:text-base-black" />
+        </div>
+      )}
+      <div
+        className="absolute -bottom-4 right-1/2 translate-x-1/2"
+        onClick={handleSelectFile}
+      >
+        <Icons.mingcute_camera className="text-white dark:text-bright-indigo" />
+      </div>
 
-        <input
-          className="absolute block h-full w-full top-0 opacity-0 rounded-3xl"
-          name="image"
-          onChange={handleImageChange}
-          ref={fileInputRef}
-          type="file"
+      <div
+        className={cn(
+          'absolute z-[11] top-1/2 left-1/2 w-full',
+          !progress && 'w-0'
+        )}
+      >
+        <Progress
+          className="w-5/6 relative mx-auto transition-[width] duration-500 ease-in-out -left-1/2"
+          value={progress}
         />
-        <span className="sr-only">File input</span>
       </div>
-    </ImageCard>
+
+      <input
+        className="absolute block h-full w-full top-0 opacity-0 rounded-3xl"
+        name="image"
+        onChange={handleImageChange}
+        ref={fileInputRef}
+        type="file"
+      />
+      <span className="sr-only">File input</span>
+    </div>
   )
 }