fix: user profile interest pill UI fix (#890)

* fix: interest layout break * fix: interest card layout break * feat: add local date implementation
open-sauced · Feb 20, 2023 · 4cbff36 · 4cbff36
1 parent 124b428
commit 4cbff36
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
@@ -8,7 +8,7 @@ import { HiOutlineMail } from "react-icons/hi";
 import LanguagePill from "components/atoms/LanguagePill/LanguagePill";
 import Title from "components/atoms/Typography/title";
 import Badge from "components/atoms/Badge/badge";
-import { getTimezone } from "lib/utils/timezones";
+import { getTimeByTimezone, getTimezone } from "lib/utils/timezones";
 
 interface ContributorProfileInfoProps {
   githubName: string;
@@ -69,16 +69,26 @@ const ContributorProfileInfo = ({
                 "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">
-              {displayLocalTime && <span className="flex gap-2 items-center">
-                <FiClock className="text-light-slate-9" /> Local time: 12:32 PM
-              </span>}
+              {displayLocalTime && (
+                <span className="flex gap-2 items-center">
+                  <FiClock className="text-light-slate-9" /> Local time:
+                  <span> {getTimeByTimezone(timezone ? getTimezone(timezone) : 1)}</span>
+                </span>
+              )}
 
-              {twitterUsername && <span className="flex gap-2 items-center">
-                <FiTwitter className="text-light-slate-9" />
-                <Link href={`https://twitter.com/${twitterUsername}`} target="_blank" rel="noreferrer" className="w-max hover:text-orange-500 ">
-                  {twitterUsername}
-                </Link>
-              </span>}
+              {twitterUsername && (
+                <span className="flex gap-2 items-center">
+                  <FiTwitter className="text-light-slate-9" />
+                  <Link
+                    href={`https://twitter.com/${twitterUsername}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="w-max hover:text-orange-500 "
+                  >
+                    {twitterUsername}
+                  </Link>
+                </span>
+              )}
 
               {/* <span className="flex gap-2 items-center">
                 <HiOutlineMail className="text-light-slate-9" />
@@ -93,7 +103,7 @@ const ContributorProfileInfo = ({
               <Title className="!text-base !text-light-slate-12" level={5}>
                 Current Interests
               </Title>
-              <div className="flex gap-2">
+              <div className="flex gap-1.5 flex-wrap">
                 {interestArray.map((interest, index) => (
                   <LanguagePill key={index} topic={interest} />
                 ))}

diff --git a/lib/utils/timezones.ts b/lib/utils/timezones.ts
@@ -1179,5 +1179,20 @@ export const timezones = [
 ];
 
 export const getTimezone = (timezone: string): number => {
-  return timezones.find(tz => tz.value === timezone)?.offset || +1;
-};
+  return timezones.find((tz) => tz.value === timezone)?.offset || +1;
+};
+
+export const getTimeByTimezone = (offset: number) => {
+  var d = new Date();
+
+  // convert to msec
+  // subtract local time zone offset
+  // get UTC time in msec
+  const utc = d.getTime() + d.getTimezoneOffset() * 60000;
+
+  // create new Date object for different city
+  // using supplied offset
+  const time = new Date(utc + 3600000 * offset);
+
+  return `${time.getHours()}:${time.getMinutes()}${time.getHours() > 11 ? "pm" : "am"}`;
+};