feat: add highlights to user profile page

components/atoms/Dropdown/dropdown.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { classNames } from "lib/utils/class-names";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={classNames(
+        "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 ",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={classNames(
+      "relative flex cursor-default select-none items-center py-1.5 px-2 text-sm font-medium focus:text-sauced-orange outline-none focus:bg-orange-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+export { DropdownMenu, DropdownMenuItem, DropdownMenuContent, DropdownMenuTrigger };

components/atoms/Tabs/tabs.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { classNames } from "lib/utils/class-names";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={classNames("inline-flex items-center rounded-md px-1 ", className)}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    className={classNames(
+      "inline-flex min-w-[100px] items-center justify-center px-3 py-1.5  text-sm font-medium text-slate-700 transition-all  disabled:pointer-events-none disabled:opacity-50  data-[state=active]:text-slate-900",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content className={classNames("mt-2 rounded-md ", className)} {...props} ref={ref} />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

components/atoms/Textarea/text-area.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { classNames } from "lib/utils/class-names";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={classNames(
+        "flex h-20 w-full rounded-md bg-transparent py-2  text-sm placeholder:text-slate-400    disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

components/molecules/ContributorHighlight/contributor-highlight-card.tsx

@@ -0,0 +1,116 @@
+import Title from "components/atoms/Typography/title";
+import { generateApiPrUrl } from "lib/utils/github";
+import React from "react";
+import PullRequestHighlightCard from "../PullRequestHighlightCard/pull-request-highlight-card";
+import { useFetchGithubPRInfo } from "lib/hooks/useFetchGithubPRInfo";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "components/atoms/Dropdown/dropdown";
+import { HiOutlineEmojiHappy } from "react-icons/hi";
+import { TfiMoreAlt } from "react-icons/tfi";
+import { FiLinkedin, FiTwitter } from "react-icons/fi";
+import { BsLink45Deg } from "react-icons/bs";
+import { FaUserPlus } from "react-icons/fa";
+import { GrFlag } from "react-icons/gr";
+import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
+
+interface ContributorHighlightCardProps {
+  title?: string;
+  desc?: string;
+  prLink: string;
+}
+const ContributorHighlightCard = ({ title, desc, prLink }: ContributorHighlightCardProps) => {
+  const { isValidUrl, apiUrl } = generateApiPrUrl(prLink);
+  const { data, isLoading, isError } = useFetchGithubPRInfo(isValidUrl ? apiUrl : "");
+
+  return (
+    <article className="flex flex-col max-w-[40rem] flex-1 gap-3 lg:gap-6">
+      <div className="flex justify-between items-center">
+        {title && (
+          <Title className="!text-sm lg:!text-xl !text-light-slate-12" level={4}>
+            {title}
+          </Title>
+        )}
+        <div className="flex ml-auto lg:gap-3 gap-3 items-center">
+          <DropdownMenu>
+            <DropdownMenuTrigger className="py-2 px-2 rounded-full data-[state=open]:bg-light-slate-7">
+              <HiOutlineEmojiHappy size={20} />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="flex flex-row gap-2 rounded-3xl" side="left">
+              <DropdownMenuItem className="rounded-full">👍</DropdownMenuItem>
+              <DropdownMenuItem className="rounded-full">👎</DropdownMenuItem>
+              <DropdownMenuItem className="rounded-full">🍕</DropdownMenuItem>
+              <DropdownMenuItem className="rounded-full">😄</DropdownMenuItem>
+              <DropdownMenuItem className="rounded-full">❤️</DropdownMenuItem>
+              <DropdownMenuItem className="rounded-full">🚀</DropdownMenuItem>
+              <DropdownMenuItem className="rounded-full">👀</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <DropdownMenu>
+            <DropdownMenuTrigger className=" py-2 px-2 rounded-full data-[state=open]:bg-light-slate-7">
+              <TfiMoreAlt size={24} />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="rounded-lg flex flex-col py-2 gap-1">
+              <DropdownMenuItem className="rounded-md">
+                <div className="flex gap-2.5 py-1 items-center pl-3 pr-7">
+                  <FiTwitter size={22} />
+                  <span>Share to Twitter</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="rounded-md">
+                <div className="flex gap-2.5 py-1 items-center pl-3 pr-7">
+                  <FiLinkedin size={22} />
+                  <span>Share to Linkedin</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="rounded-md">
+                <div className="flex gap-2.5 py-1 items-center pl-3 pr-7">
+                  <BsLink45Deg size={22} />
+                  <span>Copy link</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="rounded-md">
+                <div className="flex gap-2.5 py-1  items-center pl-3 pr-7">
+                  <FaUserPlus size={22} />
+                  <span>Follow user</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="rounded-md">
+                <div className="flex gap-2.5 py-1  items-center pl-3 pr-7">
+                  <GrFlag size={22} />
+                  <span>Report content</span>
+                </div>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {/* Highlight body section */}
+      <div>
+        <p className="text-light-slate-11 text-sm lg:text-base font-normal">{desc}</p>
+      </div>
+      {/* Highlight Link section */}
+
+      <div>
+        <a href={prLink} className="underline text-sauced-orange cursor-pointer">
+          {prLink}
+        </a>
+      </div>
+
+      {/* Generated OG card section */}
+      {isLoading && <SkeletonWrapper height={250} />}
+      {isError && <>An error occured...</>}
+      {data && (
+        <div>
+          <PullRequestHighlightCard prLink={prLink} />
+        </div>
+      )}
+    </article>
+  );
+};
+
+export default ContributorHighlightCard;

components/molecules/ContributorProfileHeader/contributor-profile-header.tsx

@@ -19,11 +19,14 @@ const ContributorProfileHeader = ({ avatarUrl, githubName, isConnected }: Contri
       )}
 
       <div className="w-full absolute -top-6 px-6 md:px-12 lg:px-16 flex flex-row items-end justify-between py-6">
-        <div className="translate-y-[75px]">
+        <div className="translate-y-[75px] hidden md:inline-flex">
           <Avatar className="" hasBorder avatarURL={avatarUrl} size={184} isCircle />
         </div>
+        <div className="translate-y-[125px] md:hidden ">
+          <Avatar className="" hasBorder avatarURL={avatarUrl} size={120} isCircle />
+        </div>
         {isConnected && (
-          <div className="flex gap-3 flex-col md:flex-row items-center">
+          <div className="flex md:translate-y-0 translate-y-28 gap-3 flex-col md:flex-row items-center">
             <a target="_blank" rel="noopener noreferrer" href={`https://github.com/${githubName}`}>
               <Button className="!px-5 !py-2 !bg-white" type="text">
                 View on GitHub

components/molecules/HighlightInput/highlight-input-form.tsx

@@ -1,13 +1,18 @@
 import Button from "components/atoms/Button/button";
+import { Textarea } from "components/atoms/Textarea/text-area";
+import { createHighlights } from "lib/hooks/createHighlights";
 
+import { ToastTrigger } from "lib/utils/toast-trigger";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
+import PullRequestHighlightCard from "../PullRequestHighlightCard/pull-request-highlight-card";
 
 const HighlightInputForm = (): JSX.Element => {
   const [isDivFocused, setIsDivFocused] = useState(false);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [bodyText, setBodyText] = useState("");
   const [row, setRow] = useState(1);
   const [title, setTitle] = useState("");
+  const [pullrequestLink, setPullRequestLink] = useState("");
   const ref = useRef<HTMLFormElement>(null);
   let rowLomit = 5;
   let messageLastScrollHeight = textAreaRef.current ? textAreaRef.current?.scrollHeight : 50;
@@ -21,12 +26,19 @@ const HighlightInputForm = (): JSX.Element => {
       }
     };
     document.addEventListener("mousedown", checkIfClickedOutside);
+    const pullLink = bodyText.match(/\bhttps?:\/\/\S+/gi);
+    const link = pullLink && new URL(pullLink as unknown as string);
+    if (pullLink && pullLink.length > 0 && link?.hostname === "github.com" && link?.pathname.includes("pull")) {
+      setPullRequestLink(pullLink[0]);
+    } else {
+      setPullRequestLink("");
+    }
 
     return () => {
       // Cleanup the event listener
       document.removeEventListener("mousedown", checkIfClickedOutside);
     };
-  }, [isDivFocused, bodyText]);
+  }, [isDivFocused, bodyText, pullrequestLink]);
 
   const handleTextAreaInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setBodyText(e.target.value);
@@ -35,22 +47,50 @@ const HighlightInputForm = (): JSX.Element => {
     } else if (row > 1 && textAreaRef.current && textAreaRef.current?.scrollHeight < messageLastScrollHeight) {
       setRow((prev) => prev--);
     }
-
     if (!bodyText) setRow(1);
     messageLastScrollHeight = textAreaRef.current?.scrollHeight || 60;
   };
 
   // Handle submit highlights
-  const handlePostHighlight = (e: React.FormEvent<HTMLFormElement>) => {
+  const handlePostHighlight = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setIsDivFocused(false);
+
     // Trigger api call to post highlight
-    setBodyText("");
-    setTitle("");
+    const pullLink = bodyText.match(/\bhttps?:\/\/\S+/gi);
+    const link = pullLink && new URL(pullLink as unknown as string);
+    const [url] = pullLink || [];
+    const highlight = bodyText.replace(url as string, "");
+
+    if (
+      url === null ||
+      url === undefined ||
+      url === "" ||
+      url.length === 0 ||
+      link?.hostname !== "github.com" ||
+      !link?.pathname.includes("pull")
+    ) {
+      ToastTrigger({ message: "A valid Pull request Link is required", type: "error" });
+      return;
+    } else {
+      const res = await createHighlights({
+        highlight,
+        title,
+        url: url || ""
+      });
+      setBodyText("");
+      setTitle("");
+      setIsDivFocused(false);
+
+      if (res) {
+        ToastTrigger({ message: "Highlight uploade success", type: "success" });
+      } else {
+        ToastTrigger({ message: "An error occured!!!", type: "error" });
+      }
+    }
   };
 
   return (
-    <form onSubmit={handlePostHighlight} ref={ref} className="flex flex-col gap-4">
+    <form onSubmit={handlePostHighlight} ref={ref} className="flex flex-1 flex-col gap-4">
       <div
         onClick={() => {
           setIsDivFocused(true);
@@ -64,17 +104,19 @@ const HighlightInputForm = (): JSX.Element => {
           type="text"
           placeholder={isDivFocused ? "Add title (optional)" : "Highlight your merged PRs and provide a link!"}
         />
-        <textarea
-          rows={row}
-          value={bodyText}
-          onChange={(e) => handleTextAreaInputChange(e)}
-          ref={textAreaRef}
+        <Textarea
           className={`resize-none font-normal text-light-slate-11 mb-2 transition focus:outline-none rounded-lg ${
             !isDivFocused ? "hidden" : ""
           }`}
+          ref={textAreaRef}
+          rows={row}
+          value={bodyText}
+          onChange={(e) => handleTextAreaInputChange(e)}
         />
       </div>
 
+      {pullrequestLink && isDivFocused && <PullRequestHighlightCard prLink={pullrequestLink} />}
+
       {isDivFocused && (
         <Button disabled={!bodyText} className="ml-auto" type="primary">
           Post