From af36eaa225139e63475e418c723e06165e795c87 Mon Sep 17 00:00:00 2001
From: Aamil13 <aamil.shafi13@gmail.com>
Date: Fri, 31 May 2024 16:48:27 +0530
Subject: [PATCH] pulled UI-Timeline and implemented it

---
 src/app/community/[id]/profile/page.tsx       |  56 +++++++
 src/app/communityprofile/page.tsx             |  18 --
 src/app/globals.css                           |   7 +-
 src/components/Timeline/Post.tsx              |  24 ++-
 src/components/Timeline/ProfileCard.tsx       |   4 +-
 .../CommunityProfileCommentBox.tsx            |  37 -----
 .../CommunityProfileContainer.tsx             | 154 ++++++++++++++----
 .../communityProfile/CommunityProfilePost.tsx |  84 ----------
 .../CommunityProfileAccesibility.tsx          |   2 +-
 .../CommunityProfileAccount.tsx               |  50 +++---
 .../CommunityProfileBillings.tsx              |   8 +-
 .../CommunityProfileSettings/Option.tsx       |   2 +-
 src/components/communityProfile/SideBar.tsx   |  84 ----------
 13 files changed, 232 insertions(+), 298 deletions(-)
 create mode 100644 src/app/community/[id]/profile/page.tsx
 delete mode 100644 src/app/communityprofile/page.tsx
 delete mode 100644 src/components/communityProfile/CommunityProfileCommentBox.tsx
 delete mode 100644 src/components/communityProfile/CommunityProfilePost.tsx
 delete mode 100644 src/components/communityProfile/SideBar.tsx

diff --git a/src/app/community/[id]/profile/page.tsx b/src/app/community/[id]/profile/page.tsx
new file mode 100644
index 00000000..eb195050
--- /dev/null
+++ b/src/app/community/[id]/profile/page.tsx
@@ -0,0 +1,56 @@
+'use client'
+import Footer from '@/components/Footer/Footer'
+import Navbar from '@/components/Timeline/Navbar'
+import Modal from '@/components/Timeline/Modal'
+import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
+import ProfileCard from '@/components/Timeline/ProfileCard'
+import CommunityProfileContainer from '@/components/communityProfile/CommunityProfileContainer'
+import { ModalContentType } from '@/types/global'
+import React, { useState } from 'react'
+
+const sampleUser = {
+  name: 'Kathryn Murphy',
+  bio: 'Junior student major at Law, Nagoya University',
+  university: '3rd Year, Undergraduate, Law',
+  department: 'Junior student major at Law',
+  location: 'London, United Kingdom',
+  email: 'kathrynmurphy@gmail.com',
+  phone: '+44-3028-3239',
+  dateOfBirth: 'April 3rd, 2002',
+  followers: 21,
+  following: 63,
+}
+
+const Profile = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalContentType, setModalContentType] = useState<ModalContentType>()
+  const [activeTab, setActiveTab] = useState<string>('Profile')
+
+  const handleTabClick = (tab: string) => {
+    setActiveTab(tab)
+  }
+
+  const modalContent = (modalContentType: string) => {
+    switch (modalContentType) {
+      case 'EditProfileModal':
+        return <EditProfileModal />
+      default:
+        return null
+    }
+  }
+  return (
+    <>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        {modalContentType && modalContent(modalContentType)}
+      </Modal>
+      <Navbar activeTab={activeTab} onTabClick={handleTabClick} />
+      <div className="flex justify-center w-full gap-6 mt-20 max-md:flex-col max-md:items-center pb-10  ">
+        <ProfileCard {...sampleUser} setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} isUserProfile={true} />
+        <CommunityProfileContainer />
+      </div>
+      <Footer />
+    </>
+  )
+}
+
+export default Profile
diff --git a/src/app/communityprofile/page.tsx b/src/app/communityprofile/page.tsx
deleted file mode 100644
index e632d653..00000000
--- a/src/app/communityprofile/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Footer from '@/components/Footer/Footer'
-import CommunityProfileContainer from '@/components/communityProfile/CommunityProfileContainer'
-import SideBar from '@/components/communityProfile/SideBar'
-import React from 'react'
-
-const communityProfile = () => {
-  return (
-    <>
-      <div className="flex justify-center w-full gap-6 mt-20 max-md:flex-col max-md:items-center pb-10  ">
-        <SideBar />
-        <CommunityProfileContainer />
-      </div>
-      <Footer />
-    </>
-  )
-}
-
-export default communityProfile
diff --git a/src/app/globals.css b/src/app/globals.css
index 112f841c..cb0c1f62 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -27,11 +27,8 @@ body {
   display: none;
 }
 
-.noscroll{
-
-    overflow-y: hidden
-  
-  
+.noscroll {
+  overflow-y: hidden;
 }
 
 @layer components {
diff --git a/src/components/Timeline/Post.tsx b/src/components/Timeline/Post.tsx
index 7fb73f4d..e8bac132 100644
--- a/src/components/Timeline/Post.tsx
+++ b/src/components/Timeline/Post.tsx
@@ -5,7 +5,7 @@ import { FaComment } from 'react-icons/fa'
 import { IoPaperPlaneSharp } from 'react-icons/io5'
 // import Image from 'next/image'
 import { SlOptions } from 'react-icons/sl'
-import { FaArrowUp, FaArrowDown } from 'react-icons/fa6'
+import { FaArrowUp, FaArrowDown, FaBookmark } from 'react-icons/fa6'
 import { MdOutlineImage } from 'react-icons/md'
 import { MdGifBox, MdOutlineBookmarkBorder } from 'react-icons/md'
 import { HiReply, HiOutlineBell, HiOutlineFlag } from 'react-icons/hi'
@@ -37,7 +37,7 @@ interface PostProps {
   university: string
   year: string
   text: string
-  link: string
+  link?: string
   date: string
   avatar: string
   likes: number
@@ -47,6 +47,9 @@ interface PostProps {
   userComments: Comment[]
   setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
+  isUserProfile?: boolean
+  media?: string
+  saved?: boolean
 }
 
 const PostOptions = () => {
@@ -134,9 +137,12 @@ const Post: React.FC<PostProps> = ({
   userComments,
   setIsModalOpen,
   setModalContentType,
+  isUserProfile,
+  media,
+  saved,
 }) => {
   return (
-    <div className="border-2 border-gray-dark rounded-lg mb-4 shadow-sm max-w-[696px]">
+    <div className={`${isUserProfile ? '' : 'border-2 border-gray-dark rounded-lg'} mb-4 shadow-sm max-w-[696px]`}>
       <div className="flex items-start">
         {/* User Post */}
         <div className="pt-10">
@@ -151,8 +157,18 @@ const Post: React.FC<PostProps> = ({
               </div>
             </div>
             {/* POST OPTIONS */}
-            <PostOptions />
+            <div className="flex items-center gap-2">
+              {saved && <FaBookmark />}
+
+              <PostOptions />
+            </div>
           </div>
+          {/* media div  */}
+          {media && (
+            <div className="flex justify-center w-full px-10 mt-2">
+              <img className="rounded-lg h-96 object-fill max-sm:object-cover w-full " src={media} alt="media" />
+            </div>
+          )}
           {/* Post Content */}
           <div className="mt-6 px-10 ">
             {/* TODO: A MARKDOWN PARSER MAY BE NEEDED FOR POST CONTENT */}
diff --git a/src/components/Timeline/ProfileCard.tsx b/src/components/Timeline/ProfileCard.tsx
index 7847db5c..c69032f0 100644
--- a/src/components/Timeline/ProfileCard.tsx
+++ b/src/components/Timeline/ProfileCard.tsx
@@ -21,6 +21,7 @@ interface ProfileProps {
   followers: number
   setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
+  isUserProfile?: boolean
 }
 
 const ProfileItem = ({ iconName, text }: { iconName: React.ComponentType<{ size: number; color: string }>; text: string }) => {
@@ -45,6 +46,7 @@ const ProfileCard: React.FC<ProfileProps> = ({
   followers,
   setIsModalOpen,
   setModalContentType,
+  isUserProfile,
 }) => {
   return (
     <div className="max-w-[280px] bg-white rounded-lg shadow-md overflow-hidden border-2 border-gray-dark">
@@ -71,7 +73,7 @@ const ProfileCard: React.FC<ProfileProps> = ({
       <div className="px-8 mt-8 py-5">
         <h2 className="text-lg font-semibold">{name}</h2>
         <p className="text-gray-dark text-xs py-1">{bio}</p>
-        <button className="w-full bg-primary text-white py-2 mt-2 rounded-lg text-xs font-medium">Create Avatar</button>
+        {!isUserProfile && <button className="w-full bg-primary text-white py-2 mt-2 rounded-lg text-xs font-medium">Create Avatar</button>}
         <div className="mt-5 flex flex-col gap-4">
           <ProfileItem iconName={RiGraduationCapFill} text={university} />
           <ProfileItem iconName={HiLibrary} text={department} />
diff --git a/src/components/communityProfile/CommunityProfileCommentBox.tsx b/src/components/communityProfile/CommunityProfileCommentBox.tsx
deleted file mode 100644
index 33142e2e..00000000
--- a/src/components/communityProfile/CommunityProfileCommentBox.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import { HiDotsHorizontal } from 'react-icons/hi'
-import { FaArrowUp, FaArrowDown } from 'react-icons/fa6'
-import { CgMailReply } from 'react-icons/cg'
-
-const CommunityProfileCommentBox = () => {
-  return (
-    <>
-      <div className="flex   gap-5 max-sm:gap-2">
-        <img className="w-14 h-14 object-cover rounded-full" src="https://cdn.pixabay.com/photo/2023/02/19/08/39/man-7799486_1280.jpg" alt="dp" />
-        <div className="w-10/12 border-2 border-neutral-300 rounded-md py-3 px-5">
-          <div className="flex justify-between">
-            <p className="text-neutral-600 font-medium">Johnny Nitro</p>
-            <HiDotsHorizontal />
-          </div>
-          <p className="text-neutral-400 text-xs">2hr</p>
-          <p className="text-sm text-neutral-900 mt-2">
-            Thanks for having me as the first participant. Really looking forward to debating Roberta Green on Israel Palestine War!
-          </p>
-        </div>
-      </div>
-      <div className="flex justify-end pr-7 max-sm:text-xs max-sm:pr-2 gap-10 mt-2">
-        <p className="flex items-center gap-2">
-          <FaArrowUp color={`#404040`} />
-          448
-          <FaArrowDown color="#D4D4D4" />
-        </p>
-        <p className="flex items-center gap-2">
-          <CgMailReply size={24} color={`#404040`} />
-          Reply
-        </p>
-      </div>
-    </>
-  )
-}
-
-export default CommunityProfileCommentBox
diff --git a/src/components/communityProfile/CommunityProfileContainer.tsx b/src/components/communityProfile/CommunityProfileContainer.tsx
index 22d493cc..4ba61cc8 100644
--- a/src/components/communityProfile/CommunityProfileContainer.tsx
+++ b/src/components/communityProfile/CommunityProfileContainer.tsx
@@ -1,53 +1,135 @@
 'use client'
 import React, { useState } from 'react'
 import CommunityProfileOption from './CommunityProfileOption'
-import CommunityProfilePost from './CommunityProfilePost'
 import CommunityProfileSettings from './CommunityProfileSettings/CommunityProfileSettings'
 import { valueType } from './communityProfileOptionEnum'
+import Post from '../Timeline/Post'
+import { ModalContentType } from '@/types/global'
+import Modal from '../Timeline/Modal'
+import ConnectionsModal from '../Timeline/Modals/ConnectionsModal'
+import PollModal from '../Timeline/Modals/PollModal'
+import ReplyModal from '../Timeline/Modals/ReplyModal'
 
-const dummyData = [
+const comments = [
   {
-    dp: 'https://cdn.pixabay.com/photo/2023/02/19/08/39/man-7799486_1280.jpg',
-    content: 'Law Debate Club will have its first debate starting next week Feb 19, 2024! Any participants interested send me a DM.',
-    name: 'Kathryn Murphy',
+    id: 1,
+    user: 'Johnny Nitro',
+    text: "Yeah give me a second I'll try to solve it and send the solution over your DMs.",
+    date: '5d',
+    avatar: '/timeline/avatar.png',
+    likes: 4,
   },
 ]
 
-const dummyMediaData = [
-  {
-    dp: 'https://cdn.pixabay.com/photo/2023/02/19/08/39/man-7799486_1280.jpg',
-    content: 'Beautiful building landscapes in the japanese skyline.',
-    name: 'Kathryn Murphy',
-    media: 'https://cdn.pixabay.com/photo/2016/04/07/18/36/architecture-1314416_1280.jpg',
-  },
-]
-
-const dummySavedData = [
-  {
-    dp: 'https://cdn.pixabay.com/photo/2023/02/19/08/39/man-7799486_1280.jpg',
-    content: 'Beautiful building landscapes in the japanese skyline.',
-    name: 'Kathryn Murphy',
-    saved: true,
-  },
-]
+const roberta = {
+  avatarUrl: '/timeline/avatar2.png',
+  userAvatarUrl: '/timeline/avatar.png',
+  name: 'Roberta Green',
+  comment: 'Sorry that was a strange thing to ask.',
+  replyingTo: 'Johnny Nitro and Kathryn Murphy',
+}
 
 const CommunityProfileContainer = () => {
   const [selectedOption, setSelectedOption] = useState('Posts')
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalContentType, setModalContentType] = useState<ModalContentType>()
+
+  const modalContent = (modalContentType: string) => {
+    switch (modalContentType) {
+      case 'ConnectionsModal':
+        return <ConnectionsModal />
+      case 'PollModal':
+        return <PollModal />
+      case 'ReplyModal':
+        return <ReplyModal {...roberta} setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} />
+      default:
+        return null
+    }
+  }
+
   return (
-    <div className="w-1/2 max-md:w-9/12 max-sm:w-11/12 border-2 rounded-lg border-[#737373] max-h-max ">
-      <CommunityProfileOption selectedOption={selectedOption} setSelectedOption={setSelectedOption} />
-      {selectedOption == valueType.Posts ? (
-        <CommunityProfilePost data={dummyData} />
-      ) : selectedOption == valueType.Media ? (
-        <CommunityProfilePost data={dummyMediaData} />
-      ) : selectedOption == valueType.Saved ? (
-        <CommunityProfilePost data={dummySavedData} />
-      ) : selectedOption == valueType.Settings ? (
-        <CommunityProfileSettings />
-      ) : (
-        <CommunityProfilePost data={dummyData} />
-      )}
-    </div>
+    <>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        {modalContentType && modalContent(modalContentType)}
+      </Modal>
+
+      <div className="w-1/2 max-md:w-9/12 max-sm:w-11/12 border-2 rounded-lg border-[#737373] max-h-max ">
+        <CommunityProfileOption selectedOption={selectedOption} setSelectedOption={setSelectedOption} />
+        {selectedOption == valueType.Posts ? (
+          <Post
+            user="Kathryn Murphy"
+            university="Nagoya University"
+            year="2nd Yr. Graduate"
+            text="Law Debate Club will have its first debate starting next week Feb 19, 2024! Any participants interested send me a DM."
+            date="9:31 PM · Feb 11, 2024"
+            avatar="/timeline/avatar.png"
+            likes={50}
+            comments={3}
+            reposts={2}
+            shares={1}
+            userComments={comments}
+            setModalContentType={setModalContentType}
+            setIsModalOpen={setIsModalOpen}
+            isUserProfile={true}
+          />
+        ) : selectedOption == valueType.Media ? (
+          <Post
+            user="Kathryn Murphy"
+            university="Nagoya University"
+            year="2nd Yr. Graduate"
+            text="Beautiful building landscapes in the japanese skyline."
+            date="9:31 PM · Feb 11, 2024"
+            avatar="/timeline/avatar.png"
+            likes={50}
+            comments={3}
+            reposts={2}
+            shares={1}
+            userComments={comments}
+            setModalContentType={setModalContentType}
+            setIsModalOpen={setIsModalOpen}
+            isUserProfile={true}
+            media="https://cdn.pixabay.com/photo/2016/04/07/18/36/architecture-1314416_1280.jpg"
+          />
+        ) : selectedOption == valueType.Saved ? (
+          <Post
+            user="Kathryn Murphy"
+            university="Nagoya University"
+            year="2nd Yr. Graduate"
+            text="Law Debate Club will have its first debate starting next week Feb 19, 2024! Any participants interested send me a DM."
+            date="9:31 PM · Feb 11, 2024"
+            avatar="/timeline/avatar.png"
+            likes={50}
+            comments={3}
+            reposts={2}
+            shares={1}
+            userComments={comments}
+            setModalContentType={setModalContentType}
+            setIsModalOpen={setIsModalOpen}
+            isUserProfile={true}
+            saved={true}
+          />
+        ) : selectedOption == valueType.Settings ? (
+          <CommunityProfileSettings />
+        ) : (
+          <Post
+            user="Kathryn Murphy"
+            university="Nagoya University"
+            year="2nd Yr. Graduate"
+            text="Beautiful building landscapes in the japanese skyline."
+            date="9:31 PM · Feb 11, 2024"
+            avatar="/timeline/avatar.png"
+            likes={50}
+            comments={3}
+            reposts={2}
+            shares={1}
+            userComments={comments}
+            setModalContentType={setModalContentType}
+            setIsModalOpen={setIsModalOpen}
+            isUserProfile={true}
+          />
+        )}
+      </div>
+    </>
   )
 }
 
diff --git a/src/components/communityProfile/CommunityProfilePost.tsx b/src/components/communityProfile/CommunityProfilePost.tsx
deleted file mode 100644
index c8dc86b0..00000000
--- a/src/components/communityProfile/CommunityProfilePost.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react'
-import { HiDotsHorizontal } from 'react-icons/hi'
-import { FaArrowUp, FaArrowDown } from 'react-icons/fa6'
-import { FaComment } from 'react-icons/fa'
-import { CiRepeat } from 'react-icons/ci'
-import { PiPaperPlaneTiltFill } from 'react-icons/pi'
-import { HiMiniGif } from 'react-icons/hi2'
-import { PiImageBold } from 'react-icons/pi'
-import CommunityProfileCommentBox from './CommunityProfileCommentBox'
-import { FaBookmark } from 'react-icons/fa'
-
-const CommunityProfilePost = (data: any) => {
-  // console.log(data.data[0])
-
-  return (
-    <>
-      <div className="py-8 px-12 flex flex-col gap-6">
-        {/* user details  */}
-        <div className="flex justify-between items-center">
-          <div className="flex  gap-4 ">
-            <img className="w-14 h-14 object-cover rounded-full" src={data.data[0].dp} alt="dp" />
-            <div className="">
-              <h3 className="font-medium text-neutral-600">{data.data[0].name}</h3>
-              <p className="text-xs text-neutral-500 mt-1">Nagoya University</p>
-              <p className="text-xs text-neutral-500 ">3rd Yr. Undergraduate</p>
-            </div>
-          </div>
-          <div className="flex gap-2">
-            {data.data[0].saved && <FaBookmark />}
-            <HiDotsHorizontal />
-          </div>
-        </div>
-        {/* content  */}
-        {data.data[0].media && <img className="rounded-lg h-96 object-fill max-sm:object-cover" src={data.data[0].media} alt="" />}
-        <p className="font-medium text-sm text-neutral-900">{data.data[0].content}</p>
-
-        {/* date and club  */}
-        <div className="text-xs font-medium">
-          <span className="text-neutral-500">3:43 PM · Feb 12, 2024 </span>
-          <span className="text-neutral-400">· Post from Law Debate Club at Nagoya University</span>
-        </div>
-      </div>
-      {/* like,views,share,repost  */}
-      <div className="relative text-sm flex justify-between border-y-2 py-2 px-12  border-neutral-300">
-        <p className="flex items-center gap-2 max-sm:gap-1 max-sm:text-xs">
-          <FaArrowUp color={`#404040`} />
-          948
-          <FaArrowDown color="#D4D4D4" />
-        </p>
-        <p className="flex items-center gap-2">
-          <FaComment color={`#D4D4D4`} />
-          48 <span className="max-sm:hidden">Comments</span>
-        </p>
-        <p className="flex items-center gap-2">
-          <CiRepeat color={`#D4D4D4`} />
-          90 <span className="max-sm:hidden">Repost</span>
-        </p>
-        <p className="flex items-center gap-2">
-          <PiPaperPlaneTiltFill color={`#D4D4D4`} />
-          <span className="max-sm:hidden">Share</span>
-        </p>
-      </div>
-      {/* comment input  */}
-      <div className="relative flex gap-2 justify-between py-8 px-12 max-sm:px-8">
-        <img className="w-14 h-14 object-cover rounded-full" src="https://cdn.pixabay.com/photo/2023/02/19/08/39/man-7799486_1280.jpg" alt="dp" />
-        <input className="py-3 px-5 pr-16 border-neutral-300 border-2  w-10/12 rounded-full" type="text" placeholder="Add a comment..." />
-        <div className="absolute flex right-14 max-sm:right-10 top-12 gap-2">
-          <HiMiniGif size={24} />
-          <PiImageBold size={24} />
-        </div>
-      </div>
-      {/* comments  */}
-      <div className=" px-12 max-sm:px-8 pb-10">
-        <div className="flex gap-2 text-sm pb-2">
-          <p className="text-neutral-800">Most Relevant</p> / <p className="text-neutral-500">Most Recent</p>
-        </div>
-        <CommunityProfileCommentBox />
-        <p className="text-sm text-neutral-500 underline text-end pr-7 mt-4">Load More Comments</p>
-      </div>
-    </>
-  )
-}
-
-export default CommunityProfilePost
diff --git a/src/components/communityProfile/CommunityProfileSettings/CommunityProfileAccesibility.tsx b/src/components/communityProfile/CommunityProfileSettings/CommunityProfileAccesibility.tsx
index 2f23adf7..b0a69f01 100644
--- a/src/components/communityProfile/CommunityProfileSettings/CommunityProfileAccesibility.tsx
+++ b/src/components/communityProfile/CommunityProfileSettings/CommunityProfileAccesibility.tsx
@@ -95,7 +95,7 @@ const CommunityProfileAccesibility = () => {
              after:rounded-full after:z-50
                 `}
             ></li>
-            <p className="font-medium pt-4 text-2xl"> Aa</p>
+            <p className="font-medium pt-4 text-2xl ps-4"> Aa</p>
           </ol>
         </div>
       </div>
diff --git a/src/components/communityProfile/CommunityProfileSettings/CommunityProfileAccount.tsx b/src/components/communityProfile/CommunityProfileSettings/CommunityProfileAccount.tsx
index cf73df2a..78ac3cc5 100644
--- a/src/components/communityProfile/CommunityProfileSettings/CommunityProfileAccount.tsx
+++ b/src/components/communityProfile/CommunityProfileSettings/CommunityProfileAccount.tsx
@@ -2,46 +2,50 @@ import React, { useEffect, useState } from 'react'
 import { AiOutlineEye } from 'react-icons/ai'
 import { AiOutlineEyeInvisible } from 'react-icons/ai'
 import CommunityProfileDeactivatePopUp from './CommunityProfileDeactivatePopUp'
-import accountveriImg from "@/assets/Account_Verified.png"
+import accountveriImg from '@/assets/Account_Verified.png'
 
 const CommunityProfileAccount = () => {
   const [showPassword, setShowPassword] = useState(false)
   const [showEmail, setShowEmail] = useState(false)
-const [accountVerified,setAccountVerified] = useState(false)
+  const [accountVerified, setAccountVerified] = useState(false)
   const [showPopUp, setShowPopUp] = useState(false)
 
   useEffect(() => {
     if (showPopUp) {
-      document.body.classList.add('noscroll');
+      document.body.classList.add('noscroll')
     } else {
-      document.body.classList.remove('noscroll');
+      document.body.classList.remove('noscroll')
     }
 
     return () => {
-      document.body.classList.remove('noscroll');
-    };
-  }, [showPopUp]);
+      document.body.classList.remove('noscroll')
+    }
+  }, [showPopUp])
   return (
     <>
       <div className={`py-10 px-12 flex flex-col gap-16 `}>
         <div className="flex flex-col gap-10">
-          <h6 onClick={()=>setAccountVerified(!accountVerified)} className="font-bold text-lg">Account Verification</h6>
-          {
-            !accountVerified ?
+          <h6 onClick={() => setAccountVerified(!accountVerified)} className="font-bold text-lg">
+            Account Verification
+          </h6>
+          {!accountVerified ? (
             <div className="flex flex-col gap-2">
-            <label className="font-medium mb-4">Verify your account with Sheer ID. </label>
-            <input className="border-2 border-[#E5E5E5] w-80 h-10 max-lg:w-10/12 rounded-lg px-3" type="text" placeholder="University Email" />
-            <label className="text-neutral-500 text-sm">Enter your university email. </label>
-          </div>
-          :
-          <div className='flex flex-col gap-6 justify-center items-center'>
-            <img className='w-40' src={accountveriImg.src} alt="acc" />
-            <label className="font-medium mb-4">Your account is verified.</label>
-            <input className="border-2 border-[#E5E5E5] w-80 h-10 max-lg:w-10/12 rounded-lg px-3" type="text" disabled placeholder="unibuzz.college@gmail.com" />
-            
-          </div>
-          }
-         
+              <label className="font-medium mb-4">Verify your account with Sheer ID. </label>
+              <input className="border-2 border-[#E5E5E5] w-80 h-10 max-lg:w-10/12 rounded-lg px-3" type="text" placeholder="University Email" />
+              <label className="text-neutral-500 text-sm">Enter your university email. </label>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-6 justify-center items-center">
+              <img className="w-40" src={accountveriImg.src} alt="acc" />
+              <label className="font-medium mb-4">Your account is verified.</label>
+              <input
+                className="border-2 border-[#E5E5E5] w-80 h-10 max-lg:w-10/12 rounded-lg px-3"
+                type="text"
+                disabled
+                placeholder="unibuzz.college@gmail.com"
+              />
+            </div>
+          )}
         </div>
         {/* change email  */}
         <div className="flex flex-col gap-10">
diff --git a/src/components/communityProfile/CommunityProfileSettings/CommunityProfileBillings.tsx b/src/components/communityProfile/CommunityProfileSettings/CommunityProfileBillings.tsx
index 27912abb..e00d983a 100644
--- a/src/components/communityProfile/CommunityProfileSettings/CommunityProfileBillings.tsx
+++ b/src/components/communityProfile/CommunityProfileSettings/CommunityProfileBillings.tsx
@@ -12,7 +12,7 @@ const CommunityProfileBillings = () => {
         </div>
         <div className="flex flex-col gap-6">
           {/* first Row  */}
-          <div className="flex justify-between max-lg:flex-col">
+          <div className="flex justify-between max-xl:flex-col">
             <div className=" flex flex-col gap-2">
               <label className="font-medium text-sm">Name on your Card</label>
               <input className="border-2 border-[#E5E5E5] w-80 h-10 max-lg:w-10/12 rounded-lg px-3" type="text" placeholder="Name" />
@@ -23,15 +23,15 @@ const CommunityProfileBillings = () => {
             </div>
           </div>
           {/* sec Row  */}
-          <div className="flex justify-between max-lg:flex-col">
+          <div className="flex justify-between max-xl:flex-col">
             <div className="relative flex flex-col gap-2">
               <label className="font-medium text-sm">Credit Card</label>
               <input
-                className="border-2 border-[#E5E5E5] w-80 max-lg:w-10/12 h-10 rounded-lg px-3 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                className="border-2 border-[#E5E5E5] w-80 max-lg:w-10/12 max-sm:w-full h-10 rounded-lg px-3 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                 type="number"
                 placeholder="0000 0000 0000 0000"
               />
-              <div className="absolute pt-9 right-0 max-lg:right-14  pr-3 flex items-center text-sm leading-5">
+              <div className="absolute pt-9 right-0 max-xl:right-1/3 max-lg:right-14 max-sm:right-0  pr-3 flex items-center text-sm leading-5">
                 <LiaCcVisa className="h-5 w-5 text-gray-700 cursor-pointer" />
               </div>
             </div>
diff --git a/src/components/communityProfile/CommunityProfileSettings/Option.tsx b/src/components/communityProfile/CommunityProfileSettings/Option.tsx
index 1989ed8f..78561ab7 100644
--- a/src/components/communityProfile/CommunityProfileSettings/Option.tsx
+++ b/src/components/communityProfile/CommunityProfileSettings/Option.tsx
@@ -4,7 +4,7 @@ import { SettingOptionType } from './optionEnum'
 const option = [
   SettingOptionType.Account,
   SettingOptionType.Accesibility,
-  
+
   SettingOptionType.Notifications,
   SettingOptionType.Security,
   SettingOptionType.Billings,
diff --git a/src/components/communityProfile/SideBar.tsx b/src/components/communityProfile/SideBar.tsx
deleted file mode 100644
index 88eac947..00000000
--- a/src/components/communityProfile/SideBar.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react'
-import { FiEdit } from 'react-icons/fi'
-import { BiSolidGraduation } from 'react-icons/bi'
-import { FaUniversity } from 'react-icons/fa'
-import { FaPhone } from 'react-icons/fa6'
-import { IoLocationSharp } from 'react-icons/io5'
-import { MdEmail } from 'react-icons/md'
-import { HiMiniCake } from 'react-icons/hi2'
-
-const SideBar = () => {
-  return (
-    <div className="w-[20%] h-max min-w-[300px] max-md:w-9/12 overflow-hidden border-2 border-[#737373] rounded-lg">
-      {/* top section  */}
-      <div className="h-40 relative flex justify-center items-end gap-28 max-md:gap-[62%] max-sm:gap-[40%]  ">
-        <img className="absolute bottom-8 -z-10" src="https://cdn.pixabay.com/photo/2017/09/09/18/25/living-room-2732939_1280.jpg" alt="bg" />
-        <img className="w-16 h-16 object-cover rounded-full" src="https://cdn.pixabay.com/photo/2023/02/19/08/39/man-7799486_1280.jpg" alt="dp" />
-        <p className="flex items-center gap-3 text-xs mb-2 text-[#6647FF] cursor-pointer">
-          Edit Profile{' '}
-          <span>
-            <FiEdit />
-          </span>
-        </p>
-      </div>
-      {/* name  */}
-      <div className="flex flex-col gap-1 py-4 px-8">
-        <h3 className="font-bold">Kathryn Murphy</h3>
-        <p className="text-xs text-neutral-500">Junior student major at Law, Nagoya University</p>
-      </div>
-      {/* details  */}
-      <div className="flex flex-col max-md:flex-row max-sm:flex-col gap-2 max-md:gap-8 max-sm:gap-2 py-4 px-8 text-xs font-medium">
-        <div className="flex flex-col gap-2">
-          <p className="flex items-center gap-4">
-            <span>
-              <BiSolidGraduation size={24} />
-            </span>
-            3rd Year, Undergraduate, Law
-          </p>
-          <p className="flex items-center gap-4">
-            <span>
-              <FaUniversity size={24} />
-            </span>
-            Department of Liberal Arts
-          </p>
-          <p className="flex items-center gap-4">
-            <span>
-              <IoLocationSharp size={24} />
-            </span>
-            London, United Kingdom
-          </p>
-        </div>
-        <div className="flex flex-col gap-2">
-          <p className="flex items-center gap-4">
-            <span>
-              <MdEmail size={24} />
-            </span>
-            kathrynmurphy@gmail.com
-          </p>
-          <p className="flex items-center gap-4">
-            <span>
-              <FaPhone size={24} />
-            </span>
-            +44-3028-3239
-          </p>
-          <p className="flex items-center gap-4">
-            <span>
-              <HiMiniCake size={24} />
-            </span>
-            April 3rd, 2002
-          </p>
-        </div>
-      </div>
-      {/* connection  */}
-      <div className="py-4 px-8 flex flex-col gap-2">
-        <p>Connections</p>
-        <div className="w-44 flex text-[#6647FF] text-xs justify-between">
-          <p className="tabular-nums">68 Following</p>
-          <p>21 Followers</p>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default SideBar