feat: add user location and bio details to profile page

components/molecules/ContributorProfileInfo/contributor-profile-info.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable react/jsx-no-undef */
+import Link from "next/link";
+
+import { AiOutlineGift } from "react-icons/ai";
+import { FiClock, FiTwitter } from "react-icons/fi";
+import { HiOutlineMail } from "react-icons/hi";
+
+import LanguagePill from "components/atoms/LanguagePill/LanguagePill";
+import Title from "components/atoms/Typography/title";
+
+interface ContributorProfileInfoProps {
+  githubName: string;
+  bio?: string;
+  portfolio?: string;
+  twitterUsername?: string;
+  interests?: string;
+  isConnected?: boolean;
+}
+
+const ContributorProfileInfo = ({
+  githubName,
+  twitterUsername,
+  bio,
+  interests,
+  isConnected
+}: ContributorProfileInfoProps) => {
+  const interestArray = interests?.split(",");
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="pb-6 border-b">
+        <Title className="!text-2xl !text-light-slate-12" level={3}>
+          {githubName}
+        </Title>
+        <div className="flex items-center text-sm gap-3">
+          <span className="text-light-slate-11 text-sm">{`@${githubName}`}</span>
+
+          {isConnected && (
+            <>
+              <span className="flex text-light-slate-10 gap-2 items-center">
+                <FiClock className="text-light-slate-9" />
+                UTC +1
+              </span>
+              <span className="flex text-light-slate-10 gap-2 items-center">
+                <AiOutlineGift className="text-light-slate-9" />
+                June 2022
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+      {isConnected && (
+        <>
+          <div className="flex flex-col gap-2 border-b pb-6">
+            <Title className="!text-base !text-light-slate-12" level={5}>
+              About
+            </Title>
+            <p className="text-light-slate-11 text-sm">
+              {bio ||
+                "I am an open source developer with a passion for music and video games. I strive to improve the open source community and am always looking for new ways to contribute."}
+            </p>
+            <div className="flex flex-col text-sm mt-2 text-light-slate-9 gap-2">
+              <span className="flex gap-2 items-center">
+                <FiClock className="text-light-slate-9" /> Local time: 12:32 PM
+              </span>
+
+              <span className="flex gap-2 items-center">
+                <FiTwitter className="text-light-slate-9" />
+                <Link href="#" className="w-max hover:text-orange-500 ">
+                  coming soon...
+                </Link>
+              </span>
+
+              {/* <span className="flex gap-2 items-center">
+                <HiOutlineMail className="text-light-slate-9" />
+                <Link className="w-max hover:text-orange-500 " href="#">
+                  Send a collaboration request
+                </Link>
+              </span> */}
+            </div>
+          </div>
+          {interestArray && interestArray.length > 0 && (
+            <div className="flex  flex-col gap-4 border-b pb-6">
+              <Title className="!text-base !text-light-slate-12" level={5}>
+                Current Interests
+              </Title>
+              <div className="flex gap-2">
+                {interestArray.map((interest, index) => (
+                  <LanguagePill key={index} topic={interest} />
+                ))}
+              </div>
+            </div>
+          )}{" "}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ContributorProfileInfo;

components/organisms/ContributorProfilePage/contributor-profile-page.tsx

@@ -12,6 +12,7 @@ import { useTopicContributorCommits } from "lib/hooks/useTopicContributorCommits
 import { getRelativeDays } from "lib/utils/date-utils";
 import Pill from "components/atoms/Pill/pill";
 import getPercent from "lib/utils/get-percent";
+import ContributorProfileInfo from "components/molecules/ContributorProfileInfo/contributor-profile-info";
 
 const colorKeys = Object.keys(color);
 interface PrObjectType {
@@ -73,21 +74,27 @@ const ContributorProfilePage = ({
   const prsMergedPercentage = getPercent(prTotal, prMerged || 0);
   const isLoaded = !loading && !error;
 
+  // eslint-disable-next-line camelcase
+  const { bio, location, interests, name, twitter_username } = user || {};
+
   return (
     <div className=" w-full">
       {loading && <>Loading...</>}
       {error && <>An error has occured...</>}
       {isLoaded && (
         <>
           <ContributorProfileHeader isConnected={!!user} githubName={githubName} avatarUrl={githubAvatar} />
-          <div className="pt-24 px-4 md:px-10 lg:px-16 flex flex-col lg:flex-row lg:gap-40 w-full overflow-hidden justify-between">
-            <div className="flex flex-col min-w-[270px] gap-4 ">
-              <div className="pb-6 border-b">
-                <Title className="!text-2xl !text-light-slate-12" level={3}>
-                  {githubName}
-                </Title>
-                <span className="text-light-slate-11 text-sm">{`@${githubName}`}</span>
-              </div>
+          <div className="pt-24 px-4 md:px-10  lg:px-16 flex flex-col lg:flex-row lg:gap-40  w-full overflow-hidden  max-w-full justify-between">
+            <div className="flex flex-col w-80 gap-4 ">
+              <ContributorProfileInfo
+                interests={interests}
+                // eslint-disable-next-line camelcase
+                twitterUsername={twitter_username}
+                bio={bio}
+                githubName={githubName}
+                isConnected={!!user}
+              />
+
               <div>
                 <p className="mb-4">Languages</p>
                 <CardHorizontalBarChart withDescription={false} languageList={languageList} />

next-types.d.ts

@@ -120,4 +120,11 @@ interface DbUser {
   readonly is_onboarded: boolean;
   readonly is_waitlisted: boolean;
   readonly role: number;
+  readonly bio: string;
+  readonly twitter_username: string;
+  readonly company: string;
+  readonly location: string;
+  readonly display_local_time: boolean;
+  readonly name: string;
+  readonly interests: string
 }

pages/user/[username].tsx

@@ -5,12 +5,10 @@ import { useSingleContributor } from "lib/hooks/useSingleContributor";
 import ContributorProfilePage from "components/organisms/ContributorProfilePage/contributor-profile-page";
 import { ContributorsProfileType } from "components/molecules/ContributorHoverCard/contributor-hover-card";
 
-import HubPageLayout from "layouts/hub-page";
-import HubLayout from "layouts/hub";
 import ProfileLayout from "layouts/profile";
 import { useFetchUser } from "lib/hooks/useFetchUser";
 
-const Contributor = () => {
+const Contributor = (): JSX.Element => {
   const router = useRouter();
   const { username } = router.query;
   const contributorLogin = username as string;