From 5bddeec5ae00bc2c43a520ad9d4eb82e1b257a5c Mon Sep 17 00:00:00 2001
From: nefelibatala1993 <leuela1993@gmail.com>
Date: Tue, 29 Aug 2023 16:48:36 +0300
Subject: [PATCH] fix(Aait-web-1): add responsiveness for the blogs in the
 profile page

---
 aait/web/group-1/app/profile/account/page.tsx | 88 +++++++++++++++++++
 aait/web/group-1/app/profile/layout.tsx       | 65 ++++++++++++++
 .../web/group-1/app/profile/my-blogs/page.tsx | 20 +++++
 aait/web/group-1/app/profile/page.tsx         | 55 ++++++++++++
 aait/web/group-1/components/profile/Card.tsx  | 58 ++++++++++++
 5 files changed, 286 insertions(+)
 create mode 100644 aait/web/group-1/app/profile/account/page.tsx
 create mode 100644 aait/web/group-1/app/profile/layout.tsx
 create mode 100644 aait/web/group-1/app/profile/my-blogs/page.tsx
 create mode 100644 aait/web/group-1/app/profile/page.tsx
 create mode 100644 aait/web/group-1/components/profile/Card.tsx

diff --git a/aait/web/group-1/app/profile/account/page.tsx b/aait/web/group-1/app/profile/account/page.tsx
new file mode 100644
index 000000000..bdc509dcc
--- /dev/null
+++ b/aait/web/group-1/app/profile/account/page.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import React from 'react';
+import Image from 'next/image';
+
+export default function Page() {
+  return (
+    <div className='flex flex-col space-y-16 font-montserrat'>
+      <div className='flex justify-between'>
+        <div>
+          <h3 className='text-[13px] text-[#5D5D5D] font-semibold'>Manage Your Account</h3>
+          <p className='text-[10px] text-[#868686] font-light'>You can change your password here</p>
+        </div>
+        <button className='text-[10px] font-semibold bg-[#264FAD] rounded-md text-white px-12 py-2'>Save Changes</button>
+      </div>
+      <form className='grid grid-cols-3 place-items-start items-center text-[11px] font-poppins w-full max-w-md mx-auto gap-y-5'>
+        <label className='col-span-1 font-semibold text-[#565656]'>Current Password</label>
+        <div className='col-span-2 flex justify-between items-center py-3 px-5 rounded-lg bg-[#EFF3F9] w-full'>
+          <input
+            type="password"
+            className='focus:outline-none bg-[#EFF3F9]'
+            placeholder='Enter your current password'
+            />
+          <Image
+            src='/images/toggle-password-status.png'
+            width={ 12 }
+            height={ 12 }
+            alt=' toggle password visiblity'
+            className=''
+          />
+        </div>
+        <label className='col-span-1 font-semibold text-[#565656]'>New Password</label>
+        <div className='col-span-2 flex justify-between items-center py-3 px-5 rounded-lg bg-[#EFF3F9] w-full'>
+          <input
+            type="password"
+            className='focus:outline-none bg-[#EFF3F9]'
+            placeholder='Enter new password'
+            />
+          <Image
+            src='/images/toggle-password-status.png'
+            width={ 12 }
+            height={ 12 }
+            alt=' toggle password visiblity'
+            className=''
+          />
+        </div>
+        <label className='col-span-1 font-semibold text-[#565656]'>Confirm Password</label>
+        <div className='col-span-2 flex justify-between items-center py-3 px-5 rounded-lg bg-[#EFF3F9] w-full'>
+          <input
+            type="password"
+            className='focus:outline-none bg-[#EFF3F9]'
+            placeholder='Confirm new password'
+            />
+          <Image
+            src='/images/toggle-password-status.png'
+            width={ 12 }
+            height={ 12 }
+            alt=' toggle password visiblity'
+            className=''
+          />
+        </div>
+      </form>
+    </div>
+  );
+}
+
+
+///<div className='flex flex-col items-center text-[11px] font-poppins'>
+{/* <div className='flex space-x-3 justify-between items-center border p-3'>
+
+<h4 className='font-semibold text-[#565656]'>Current Password</h4>
+
+<div className='flex items-center bg-[#EFF3F9] p-2 rounded-md'>
+  <input
+    type="password"
+    className='bg-[#EFF3F9] focus:outline-none'
+    placeholder='Enter your current password'
+    />
+  <Image
+    src='/images/toggle-password-status.png'
+    width={ 12 }
+    height={ 12 }
+    alt=' toggle password visiblity '
+  />
+</div>
+
+</div>
+</div> */}
diff --git a/aait/web/group-1/app/profile/layout.tsx b/aait/web/group-1/app/profile/layout.tsx
new file mode 100644
index 000000000..9e14cd141
--- /dev/null
+++ b/aait/web/group-1/app/profile/layout.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+
+export default function ProfileLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const links: string[] = [ 'Personal Information', 'My Blogs', 'Account Setting' ];
+  const linkPathname = new Map<string, string>([
+    ['Personal Information', '/profile'],
+    ['My Blogs', '/profile/my-blogs'],
+    ['Account Setting', '/profile/account']
+  ]);
+  const pathname = usePathname();
+
+  return (
+    <div className='px-[100px] flex flex-col space-y-5 font-montserrat'>
+      <h1 className='text-[22px] font-semibold'>Profile</h1>
+      <div className={ `flex justify-between items-center text-md border-b ${ pathname === '/profile/my-blogs' ? 'pb-2' : 'pb-4' }` }>
+        <div className='flex space-x-10 text-[12px] text-[#494949] font-semibold'>
+          {
+            // links.map(link => <h3 className={ pathname === linkPathname.get(link) && `border-b-2 border-[#264FAD] -mb-5` } >{ link }</h3>)
+            links.map(link => (
+              <Link
+                href={ linkPathname.get(link) as string }
+                className={
+                  pathname === linkPathname.get(link) ? 'border-b-2 border-[#264FAD] -mb-4' : ''
+                }
+              >{ link }</Link>
+            ))
+          }
+        </div>
+        { pathname === linkPathname.get('My Blogs') && <button className='text-[10px] font-semibold bg-[#264FAD] rounded-md text-white px-12 py-2'>New Blog</button> }
+      </div>
+      { children }
+    </div>
+  );
+}
+
+
+
+
+
+
+
+// import React, { ReactNode } from 'react';
+
+// interface PropsInterface {
+//   children: ReactNode;
+// }
+
+// const ProfileLayout: React.FC<PropsInterface> = ({ children }) => {
+//   return (
+//     <div>
+//       <h1>This is Persitent layout accross components.</h1>
+//       { children }
+//     </div>
+//   );
+// }
+
+// export default ProfileLayout;
diff --git a/aait/web/group-1/app/profile/my-blogs/page.tsx b/aait/web/group-1/app/profile/my-blogs/page.tsx
new file mode 100644
index 000000000..5f786b5f4
--- /dev/null
+++ b/aait/web/group-1/app/profile/my-blogs/page.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Card from '@/components/profile/Card';
+
+export default function Page() {
+  return (
+    <div className='flex flex-col space-y-5 font-montserrat'>
+      <div>
+        <h3 className='text-[13px] text-[#5D5D5D] font-semibold'>Manage Blogs</h3>
+        <p className='text-[10px] text-[#868686] font-light'>Edit, Delete and View the status of your blogs</p>
+      </div>
+      <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 place-items-center gap-4'>
+        {Array.from({ length: 8 }).map((_, index) => (
+          <div key={index} className=''>
+            <Card />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/aait/web/group-1/app/profile/page.tsx b/aait/web/group-1/app/profile/page.tsx
new file mode 100644
index 000000000..7c7a98981
--- /dev/null
+++ b/aait/web/group-1/app/profile/page.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+
+export default function Page() {
+  return (
+    <div className='flex flex-col space-y-5 font-montserrat'>
+      <div className='flex justify-between'>
+        <div>
+          <h3 className='text-[13px] text-[#5D5D5D] font-semibold'>Manage Personal Information</h3>
+          <p className='text-[10px] text-[#868686] font-light'>Add all the required information about yourself</p>
+        </div>
+        <button className='text-[10px] font-semibold bg-[#264FAD] rounded-md text-white px-12 py-2'>Save Changes</button>
+      </div>
+      <div className='grid grid-cols-3 lg:pr-[300px] gap-10 text-[10px] md:text-[11px]'>
+        <h4 className=' text-[#565656] font-semibold font-poppins col-span-1'>Name <span className='text-[#F64040]'>*</span></h4>
+        <input
+          type="text"
+          className=" text-[#565656] font-semibold font-poppins col-span-1 border border-gray-300 rounded-lg py-2 px-3"
+          value='Yididiya'
+          />
+        <input
+          type="text"
+          className=" text-[#565656] font-semibold font-poppins col-span-1 border border-gray-300 rounded-lg py-2 px-3"
+          value='Kebede'
+          />
+        <h4 className=' text-[#565656] font-semibold font-poppins col-span-1'>Email <span className='text-[#F64040]'>*</span></h4>
+        <input
+          type="email"
+          className=" text-[#565656] font-semibold font-poppins col-span-2 border border-gray-300 rounded-lg py-2 px-3"
+          value='yididiyakebede@gmail.com'
+          />
+        <h4 className=' text-[#565656] font-semibold font-poppins col-span-1'>Your Photo <span className='text-[#F64040]'>*</span></h4>
+        <div className='col-span-2 flex items-start justify-center md:justify-start space-x-0 md:space-x-16'>
+          <Image
+              className='hidden md:block'
+              src='/images/profile-image.png'
+              width={ 50 }
+              height={ 50 }
+              alt='small profile image'
+            />
+          <div className='text-center border flex flex-col justify-center items-center border-gray-300 rounded-lg h-full px-10 py-12'>
+            <Image
+              src='/images/file-upload-image.png'
+              width={ 25 }
+              height={ 25 }
+              alt='file upload image'
+            />
+            <p className='text-[10px] font-semibold sm:text-[11px] text-[#858585]'> <span className='text-[#565656]'>Clik to upload</span> or drag and drop SVG, PNG, JPG or GIF(max 800x400px)</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/aait/web/group-1/components/profile/Card.tsx b/aait/web/group-1/components/profile/Card.tsx
new file mode 100644
index 000000000..927103d78
--- /dev/null
+++ b/aait/web/group-1/components/profile/Card.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+
+
+const Card = () => {
+  return (
+    <div className='col-span-1 font-montserrat shadow-sm rounded-md'>
+      <Image
+        className='object-cover w-full'
+        src='/images/test-card-image.png'
+        alt='test card image'
+        width={ 420 }
+        height={ 300 }
+      />
+
+      <div className='px-5 flex flex-col items-start space-y-5 py-5'>
+
+        <h4 className='text-gray-700 text-sm'>Design Liberalized Exchange Rate Management</h4>
+
+        <div className='flex justify-start items-center space-x-3'>
+          <Image
+            className='rounded-full'
+            src='/images/Image.png'
+            alt='test avatar image'
+            width={ 26 }
+            height={ 26 }
+          />
+          <p className='text-[11px] text-[#B9B9C3] font-light'>by <span className='text-[#6E6B7B] font-semibold'>Fred Boone</span> | Jan 10, 2020</p>
+        </div>
+
+        <div className='flex items-center justify-start space-x-4'>
+          <div className='text-[9px] px-4 py-2 font-semibold text-gray-400 rounded-full border bg-gray-200'>UI/UX</div>
+          <div className='text-[9px] px-4 py-2 font-semibold text-gray-400 rounded-full border bg-gray-200'>DEVELOPMENT</div>
+        </div>
+
+        <div className='text-[11px] text-gray-500'>A little personality goes a long way, especially on a business blog. So don’t be afraid to let loose.</div>
+
+        <div className='flex justify-between items-center w-full border-t pt-4 text-[12px]'>
+          <div className='flex justify-start items-center space-x-1'>
+            <Image
+              className='w-[13px]'
+              src='/images/test-pending.png'
+              alt='pending image'
+              width={ 20 }
+              height={ 20 }
+            />
+            <span className='text-[#FF9F43] font-semibold'>Pending</span>
+          </div>
+          <div className='text-[#7367F0] font-semibold'>Read More</div>
+        </div>
+
+      </div>
+
+    </div>
+  )
+}
+
+export default Card;