Profile image upload

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "class-variance-authority": "^0.7.0",

project-words.txt

@@ -8,4 +8,6 @@ Roboto
 subheadline
 linecap
 linejoin
+mingcute
+shadcn
 clsx

src/app/auth/page.tsx

@@ -9,7 +9,7 @@ export default function Auth() {
     <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">
-          <ImageCard className="-my-[4.375rem] flex-shrink-0 hidden sm:flex items-center justify-center">
+          <ImageCard className="-my-[4.375rem] flex-shrink-0 hidden sm:flex pt-24 pr-8 pb-36 pl-5">
             <Icons.golub />
           </ImageCard>
           <div>

src/app/profile/page.tsx

@@ -0,0 +1,26 @@
+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'
+import { ThemeToggler } from '@/components/ui/theme-toggler'
+
+export default function Profile() {
+  return (
+    <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">
+          <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>
+              <ThemeToggler />
+            </div>
+            <FormProfile className="mt-5" />
+          </div>
+        </div>
+      </Content>
+    </section>
+  )
+}

src/components/pages/auth/image-card.tsx

@@ -10,7 +10,7 @@ const ImageCard: FC<ImageCardProps> = ({ children, className }) => {
   return (
     <div
       className={classnames(
-        'pt-24 pr-8 pb-36 pl-5 flex items-center justify-center rounded-3xl bg-gradient-purple-blue',
+        'flex items-center justify-center rounded-3xl bg-gradient-purple-blue',
         className
       )}
     >

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

@@ -0,0 +1,108 @@
+'use client'
+
+import { Icons } from '@/components/ui/icons'
+import { Progress } from '@/components/ui/progress'
+import { PROGRESS_TIMEOUT_DELAY } from '@/constants'
+import { cn } from '@/lib/utils'
+import Image from 'next/image'
+import { FC, FormEvent, useRef, useState } from 'react'
+
+type FileInputProps = {
+  className?: string
+}
+
+const FileInput: FC<FileInputProps> = ({ className }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const [_, setImage] = useState<File | undefined>()
+
+  const [preview, setPreview] = useState<string | undefined>()
+
+  const [progress, setProgress] = useState<number>(0)
+
+  const clearSelectFile = () => {
+    setPreview(undefined)
+  }
+
+  const handleSelectFile = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleImageLoad = (file: File) => {
+    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)
+    }
+  }
+
+  const handleImageChange = (event: FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLElement & {
+      files: FileList
+    }
+
+    if (target.files.length > 0) {
+      handleImageLoad(target.files[0])
+    }
+  }
+
+  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"
+            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>
+
+      <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}
+        />
+      </div>
+
+      <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>
+  )
+}
+
+export default FileInput

src/components/pages/profile/form-profile.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { PROFILE_NAME_LENGTH } from '@/constants'
+import { classnames } from '@/utils'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { FC } from 'react'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+
+type FormProfileProps = { className?: string }
+
+const formSchema = z.object({
+  profileName: z
+    .string()
+    .min(PROFILE_NAME_LENGTH, 'The field must not be empty'),
+})
+
+const ProfileForm: FC<FormProfileProps> = ({ className }) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    defaultValues: {
+      profileName: '',
+    },
+    resolver: zodResolver(formSchema),
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    alert(JSON.stringify(values))
+    console.log(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        className={classnames('space-y-8 pr-[9.75rem]', className)}
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <FormField
+          control={form.control}
+          name="profileName"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  className="sm:min-w-[343px]"
+                  id="profile_name"
+                  placeholder="Profile Name"
+                  type="text"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button className="!mt-8 w-full" type="submit">
+          Submit
+        </Button>
+      </form>
+    </Form>
+  )
+}
+
+export default ProfileForm