Refactor Components

src/app/auth/page.tsx

@@ -1,4 +1,4 @@
-import FormAuth from '@/components/pages/auth/form-auth'
+import AuthForm from '@/components/pages/auth/auth-form'
 import AuthContent from '@/components/pages/auth-content'
 import { Icons } from '@/components/ui/icons'
 import ImageCard from '@/components/ui/image-card'
@@ -15,7 +15,7 @@ export default function Auth() {
           <h1 className="title-lg">Authentication</h1>
           <ThemeToggler />
         </header>
-        <FormAuth className="mt-5" />
+        <AuthForm className="mt-5" />
       </article>
     </AuthContent>
   )

src/app/profile/page.tsx

@@ -1,6 +1,6 @@
 import AuthContent from '@/components/pages/auth-content'
 import FileInput from '@/components/pages/profile/file-input'
-import FormProfile from '@/components/pages/profile/form-profile'
+import ProfileForm from '@/components/pages/profile/profile-form'
 import ImageCard from '@/components/ui/image-card'
 import { ThemeToggler } from '@/components/ui/theme-toggler'
 
@@ -15,7 +15,7 @@ export default function Profile() {
           <h1 className="title-lg">Profile</h1>
           <ThemeToggler />
         </header>
-        <FormProfile className="mt-5" />
+        <ProfileForm className="mt-5" />
       </article>
     </AuthContent>
   )

src/app/verification/page.tsx

@@ -1,5 +1,5 @@
 import AuthContent from '@/components/pages/auth-content'
-import ControlOtp from '@/components/pages/verification/control-otp'
+import OtpControl from '@/components/pages/verification/otp-control'
 import { Icons } from '@/components/ui/icons'
 import ImageCard from '@/components/ui/image-card'
 import { ThemeToggler } from '@/components/ui/theme-toggler'
@@ -15,7 +15,7 @@ export default function Verification() {
           <h1 className="title-lg">Check your Email</h1>
           <ThemeToggler />
         </header>
-        <ControlOtp className="mt-5" />
+        <OtpControl className="mt-5" />
       </article>
     </AuthContent>
   )

src/components/pages/profile/file-input.tsx

@@ -13,11 +13,8 @@ type FileInputProps = {
 
 const FileInput: FC<FileInputProps> = ({ className }) => {
   const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const [_, setImage] = useState<File | undefined>()
-
+  const [_, setImage] = useState<File | undefined>() // TODO: utilize image for api requests
   const [preview, setPreview] = useState<string | undefined>()
-
   const [progress, setProgress] = useState<number>(0)
 
   const clearSelectFile = () => {
@@ -32,15 +29,16 @@ const FileInput: FC<FileInputProps> = ({ className }) => {
     setImage(file)
 
     const fileReader = new FileReader()
-
     fileReader.readAsDataURL(file)
 
     fileReader.onloadstart = () => {
       setProgress(0)
     }
+
     fileReader.onprogress = (progress) => {
       setProgress((progress.loaded / progress.total) * 100)
     }
+
     fileReader.onload = () => {
       setPreview(fileReader.result as string)
       setTimeout(() => setProgress(0), PROGRESS_TIMEOUT_DELAY)
@@ -60,27 +58,24 @@ const FileInput: FC<FileInputProps> = ({ className }) => {
   return (
     <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>
           <Icons.cross
-            className="absolute z-10 top-4 right-4 text-base-white dark:text-base-black"
+            className="cursor-pointer absolute z-10 top-2 right-2 text-base-white dark:text-base-black"
             onClick={clearSelectFile}
           />
-        </div>
+        </>
       ) : (
-        <div>
-          <Icons.photo_profile className="text-base-gray-2 dark:text-base-black" />
-        </div>
+        <Icons.photo_profile className="text-base-gray-2 dark:text-base-black" />
       )}
       <div
-        className="absolute -bottom-4 right-1/2 translate-x-1/2"
+        className="cursor-pointer absolute w-8 h-8 rounded-lg flex items-center justify-center bg-base-white dark:bg-bright-indigo -bottom-4 right-1/2 translate-x-1/2"
         onClick={handleSelectFile}
       >
-        <Icons.mingcute_camera className="text-white dark:text-bright-indigo" />
+        <Icons.mingcute_camera className="text-black" />
       </div>
-
       <div
         className={cn(
           'absolute z-[11] top-1/2 left-1/2 w-full',
@@ -92,9 +87,8 @@ const FileInput: FC<FileInputProps> = ({ className }) => {
           value={progress}
         />
       </div>
-
       <input
-        className="absolute block h-full w-full top-0 opacity-0 rounded-3xl"
+        className="cursor-pointer absolute block h-full w-full top-0 opacity-0 rounded-3xl"
         name="image"
         onChange={handleImageChange}
         ref={fileInputRef}

src/components/pages/verification/control-otp.tsx → src/components/pages/verification/otp-control.tsx

@@ -6,11 +6,11 @@ import { LENGTH_OTP } from '@/constants'
 import { cn } from '@/lib/utils'
 import { FC, useState } from 'react'
 
-type ControlOtpProps = { className?: string }
+type OtpControlProps = { className?: string }
 
 const MOCK_OTP = '12345' // TODO: remove
 
-const ControlOtp: FC<ControlOtpProps> = ({ className }) => {
+const OtpControl: FC<OtpControlProps> = ({ className }) => {
   const [otp, setOtp] = useState<string>('')
   const [otpIsInvalid, setOtpIsInvalid] = useState<boolean>(false)
 
@@ -66,4 +66,4 @@ const ControlOtp: FC<ControlOtpProps> = ({ className }) => {
   )
 }
 
-export default ControlOtp
+export default OtpControl

src/components/ui/icons.tsx

@@ -25,21 +25,24 @@ export const Icons = {
       </svg>
     )
   },
-  cross: (props: IconProps) => (
-    <svg
-      fill="none"
-      height="13"
-      viewBox="0 0 13 13"
-      width="13"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M7.96789 6.37695L12.421 1.92383C12.6324 1.71286 12.7512 1.42657 12.7515 1.12795C12.7518 0.829323 12.6334 0.542827 12.4224 0.331483C12.2114 0.120138 11.9252 0.00125829 11.6265 0.000994563C11.3279 0.00073084 11.0414 0.119105 10.8301 0.330077L6.37695 4.7832L1.92383 0.330077C1.71248 0.118732 1.42584 0 1.12695 0C0.828065 0 0.541421 0.118732 0.330077 0.330077C0.118732 0.541421 0 0.828065 0 1.12695C0 1.42584 0.118732 1.71248 0.330077 1.92383L4.7832 6.37695L0.330077 10.8301C0.118732 11.0414 0 11.3281 0 11.627C0 11.9258 0.118732 12.2125 0.330077 12.4238C0.541421 12.6352 0.828065 12.7539 1.12695 12.7539C1.42584 12.7539 1.71248 12.6352 1.92383 12.4238L6.37695 7.9707L10.8301 12.4238C11.0414 12.6352 11.3281 12.7539 11.627 12.7539C11.9258 12.7539 12.2125 12.6352 12.4238 12.4238C12.6352 12.2125 12.7539 11.9258 12.7539 11.627C12.7539 11.3281 12.6352 11.0414 12.4238 10.8301L7.96789 6.37695Z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
+  cross: ({ size, ...props }: IconProps) => {
+    const dimension = getIconDimension(size)
+    return (
+      <svg
+        fill="none"
+        height={dimension}
+        viewBox="0 0 24 24"
+        width={dimension}
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M12.9679 12.377L17.421 7.92383C17.6324 7.71286 17.7512 7.42657 17.7515 7.12795C17.7518 6.82932 17.6334 6.54283 17.4224 6.33148C17.2114 6.12014 16.9252 6.00126 16.6265 6.00099C16.3279 6.00073 16.0414 6.11911 15.8301 6.33008L11.377 10.7832L6.92383 6.33008C6.71248 6.11873 6.42584 6 6.12695 6C5.82807 6 5.54142 6.11873 5.33008 6.33008C5.11873 6.54142 5 6.82807 5 7.12695C5 7.42584 5.11873 7.71248 5.33008 7.92383L9.7832 12.377L5.33008 16.8301C5.11873 17.0414 5 17.3281 5 17.627C5 17.9258 5.11873 18.2125 5.33008 18.4238C5.54142 18.6352 5.82807 18.7539 6.12695 18.7539C6.42584 18.7539 6.71248 18.6352 6.92383 18.4238L11.377 13.9707L15.8301 18.4238C16.0414 18.6352 16.3281 18.7539 16.627 18.7539C16.9258 18.7539 17.2125 18.6352 17.4238 18.4238C17.6352 18.2125 17.7539 17.9258 17.7539 17.627C17.7539 17.3281 17.6352 17.0414 17.4238 16.8301L12.9679 12.377Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  },
   golub: (props: IconProps) => (
     <svg
       fill="none"
@@ -62,23 +65,15 @@ export const Icons = {
   mingcute_camera: (props: IconProps) => (
     <svg
       fill="none"
-      height="31"
-      viewBox="0 0 31 31"
-      width="31"
+      height="19"
+      viewBox="0 0 19 19"
+      width="19"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <rect
-        fill="currentColor"
-        height="30"
-        rx="7.5"
-        width="30"
-        x="0.5"
-        y="0.5"
-      />
       <path
-        d="M20.5233 9.04102C21.0942 9.04102 21.6418 9.26783 22.0455 9.67155C22.4493 10.0753 22.6761 10.6228 22.6761 11.1938V19.8049C22.6761 20.3759 22.4493 20.9234 22.0455 21.3271C21.6418 21.7309 21.0942 21.9577 20.5233 21.9577H10.477C9.90604 21.9577 9.35848 21.7309 8.95475 21.3271C8.55103 20.9234 8.32422 20.3759 8.32422 19.8049V11.1938C8.32422 10.6228 8.55103 10.0753 8.95475 9.67155C9.35848 9.26783 9.90604 9.04102 10.477 9.04102H20.5233ZM15.5001 11.9114C14.5486 11.9114 13.6359 12.2894 12.9631 12.9623C12.2902 13.6351 11.9122 14.5478 11.9122 15.4993C11.9122 16.4509 12.2902 17.3635 12.9631 18.0364C13.6359 18.7093 14.5486 19.0873 15.5001 19.0873C16.4517 19.0873 17.3643 18.7093 18.0372 18.0364C18.7101 17.3635 19.0881 16.4509 19.0881 15.4993C19.0881 14.5478 18.7101 13.6351 18.0372 12.9623C17.3643 12.2894 16.4517 11.9114 15.5001 11.9114ZM15.5001 13.3466C16.0711 13.3466 16.6187 13.5734 17.0224 13.9771C17.4261 14.3808 17.6529 14.9284 17.6529 15.4993C17.6529 16.0703 17.4261 16.6179 17.0224 17.0216C16.6187 17.4253 16.0711 17.6521 15.5001 17.6521C14.9292 17.6521 14.3816 17.4253 13.9779 17.0216C13.5742 16.6179 13.3474 16.0703 13.3474 15.4993C13.3474 14.9284 13.5742 14.3808 13.9779 13.9771C14.3816 13.5734 14.9292 13.3466 15.5001 13.3466ZM20.5233 11.1938H19.8057C19.6228 11.194 19.4469 11.264 19.3139 11.3896C19.1809 11.5151 19.1009 11.6867 19.0901 11.8693C19.0794 12.0519 19.1388 12.2317 19.2562 12.372C19.3736 12.5122 19.5401 12.6024 19.7217 12.624L19.8057 12.629H20.5233C20.7062 12.6288 20.8821 12.5587 21.0151 12.4332C21.1481 12.3076 21.2281 12.136 21.2389 11.9534C21.2496 11.7709 21.1902 11.5911 21.0728 11.4508C20.9554 11.3106 20.7889 11.2204 20.6073 11.1988L20.5233 11.1938Z"
-        fill="black"
+        d="M14.5233 3.04102C15.0942 3.04102 15.6418 3.26783 16.0455 3.67155C16.4493 4.07527 16.6761 4.62284 16.6761 5.19379V13.8049C16.6761 14.3759 16.4493 14.9234 16.0455 15.3271C15.6418 15.7309 15.0942 15.9577 14.5233 15.9577H4.477C3.90604 15.9577 3.35848 15.7309 2.95475 15.3271C2.55103 14.9234 2.32422 14.3759 2.32422 13.8049V5.19379C2.32422 4.62284 2.55103 4.07527 2.95475 3.67155C3.35848 3.26783 3.90604 3.04102 4.477 3.04102H14.5233ZM9.50015 5.91139C8.54856 5.91139 7.63595 6.2894 6.96307 6.96228C6.2902 7.63515 5.91218 8.54776 5.91218 9.49935C5.91218 10.4509 6.2902 11.3635 6.96307 12.0364C7.63595 12.7093 8.54856 13.0873 9.50015 13.0873C10.4517 13.0873 11.3643 12.7093 12.0372 12.0364C12.7101 11.3635 13.0881 10.4509 13.0881 9.49935C13.0881 8.54776 12.7101 7.63515 12.0372 6.96228C11.3643 6.2894 10.4517 5.91139 9.50015 5.91139ZM9.50015 7.34657C10.0711 7.34657 10.6187 7.57338 11.0224 7.97711C11.4261 8.38083 11.6529 8.9284 11.6529 9.49935C11.6529 10.0703 11.4261 10.6179 11.0224 11.0216C10.6187 11.4253 10.0711 11.6521 9.50015 11.6521C8.92919 11.6521 8.38163 11.4253 7.9779 11.0216C7.57418 10.6179 7.34737 10.0703 7.34737 9.49935C7.34737 8.9284 7.57418 8.38083 7.9779 7.97711C8.38163 7.57338 8.92919 7.34657 9.50015 7.34657ZM14.5233 5.19379H13.8057C13.6228 5.194 13.4469 5.26403 13.3139 5.38959C13.1809 5.51514 13.1009 5.68675 13.0901 5.86933C13.0794 6.05192 13.1388 6.2317 13.2562 6.37196C13.3736 6.51222 13.5401 6.60235 13.7217 6.62396L13.8057 6.62898H14.5233C14.7062 6.62878 14.8821 6.55874 15.0151 6.43319C15.1481 6.30763 15.2281 6.13603 15.2389 5.95344C15.2496 5.77086 15.1902 5.59107 15.0728 5.45081C14.9554 5.31056 14.7889 5.22042 14.6073 5.19882L14.5233 5.19379Z"
+        fill="currentColor"
       />
     </svg>
   ),

tsconfig.json

@@ -18,13 +18,13 @@
     "baseUrl": ".",
     "plugins": [
       {
-        "name": "next"
-      }
+        "name": "next",
+      },
     ],
     "paths": {
-      "@/*": ["src/*"]
-    }
+      "@/*": ["src/*"],
+    },
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }