chore: update profile page

src/components/Setting/ChangePassword.astro

@@ -3,7 +3,7 @@
   <p class='mt-2'>Manage settings for your account passwords</p>
   <div class='mt-8 space-y-4'>
     <div class='flex w-full flex-col'>
-      <label for='current-password' class='text-sm text-slate-500'
+      <label for='current-password' class='text-sm leading-none text-slate-500'
         >Current Password</label
       >
       <input
@@ -16,7 +16,7 @@
       />
     </div>
     <div class='flex w-full flex-col'>
-      <label for='new-password' class='text-sm text-slate-500'
+      <label for='new-password' class='text-sm leading-none text-slate-500'
         >New Password</label
       >
       <input
@@ -29,8 +29,9 @@
       />
     </div>
     <div class='flex w-full flex-col'>
-      <label for='new-password-confirmation' class='text-sm text-slate-500'
-        >New Password Confirm</label
+      <label
+        for='new-password-confirmation'
+        class='text-sm leading-none text-slate-500'>New Password Confirm</label
       >
       <input
         type='password'

src/components/Setting/UpdateProfile.astro

@@ -0,0 +1,35 @@
+<div>
+  <h2 class='text-3xl font-bold sm:text-4xl'>Update Profile</h2>
+  <p class='mt-2'>Manage settings for your roadmap.sh profile</p>
+  <div class='mt-8 space-y-4'>
+    <div class='flex w-full flex-col'>
+      <label for='name' class='text-sm text-slate-500 leading-none'>Name</label>
+      <input
+        type='text'
+        name='name'
+        id='name'
+        class='mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1'
+        required
+        placeholder='Arik Chakma'
+      />
+    </div>
+    <div class='flex w-full flex-col'>
+      <label for='email' class='text-sm text-slate-500 leading-none'>Email</label>
+      <input
+        type='email'
+        name='email'
+        id='email'
+        class='mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1'
+        required
+        placeholder='arik@roadmap.sh'
+      />
+    </div>
+
+    <button
+      class='!mt-5 inline-flex h-10 items-center justify-center rounded-lg border border-slate-300 bg-black p-2 px-4 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:opacity-60'
+      type='button'
+    >
+      Update
+    </button>
+  </div>
+</div>

src/pages/settings/change-password.astro

@@ -3,7 +3,7 @@ import ChangePassword from '../../components/Setting/ChangePassword.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 ---
 
-<BaseLayout title='' description=''>
+<BaseLayout title='Change Password' description=''>
   <div class='container py-10'>
     <ChangePassword />
   </div>

src/pages/settings/profile.astro

@@ -0,0 +1,10 @@
+---
+import UpdateProfile from '../../components/Setting/UpdateProfile.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title='Update Profile'>
+  <div class='container py-10'>
+    <UpdateProfile />
+  </div>
+</BaseLayout>