add collectiv section (#243)

* add collectiv section

* fix button padding

* fix es6 function

* fix media query bug

* remove whitespaces

* resolve comments

* resolve comments

* fix gitlab repo

* fix font for collectiv section

components/Collectiv/CollectivSection.tsx

@@ -0,0 +1,31 @@
+import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export const CollectivSection = () => {
+  return (
+    <div className="pt-6">
+      <h3 className="flex cursor-pointer flex-row items-center text-sm font-bold uppercase tracking-wider text-secondary">
+        Get Help
+      </h3>
+      <p className="py-2 text-sm">
+        Use{" "}
+        <a
+          href="https://chat.collectivai.com/hacktober-fest"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span className="font-bold text-primary transition-all hover:underline">
+            Collectiv
+            <FontAwesomeIcon
+              icon={faUpRightFromSquare}
+              className="mx-1 inline-block h-[12px] w-[12px]"
+            />{" "}
+          </span>{" "}
+        </a>
+        to solve Hacktoberfest issues and{" "}
+        <span className="mb-2 text-sm font-bold tracking-wider text-[#F8F8F8]">win a T-shirt</span>{" "}
+        & other exciting Merch!
+      </p>
+    </div>
+  );
+};

components/Collectiv/RepositoryCollectivButton.tsx

@@ -0,0 +1,32 @@
+import { Repository } from "../../types";
+
+type RepositoryCollectivButtonProps = {
+  repositoryName: Repository["name"];
+  repositoryOwner: Repository["owner"];
+  repositoryUrl: Repository["url"];
+};
+export const RepositoryCollectivButton = ({
+  repositoryName,
+  repositoryOwner,
+  repositoryUrl
+}: RepositoryCollectivButtonProps) => {
+  const ownerAndRepoName = repositoryOwner + "/" + repositoryName;
+  const isGitLabRepo = repositoryUrl.includes("gitlab.com");
+
+  return (
+    <a
+      href={
+        isGitLabRepo
+          ? `https://chat.collectivai.com/contribute?repo-name=${ownerAndRepoName}&gitLab=true`
+          : `https://chat.collectivai.com/contribute?repo-name=${ownerAndRepoName}`
+      }
+      className="m-2 flex items-center  justify-center
+           gap-2  rounded-lg border border-primary p-2 text-sm font-semibold
+           md:m-0 md:ml-2  md:rounded-full md:border-transparent md:bg-primary md:px-3"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Solve with Collectiv
+    </a>
+  );
+};

components/Repository/IssueList.tsx

@@ -1,16 +1,32 @@
-import { Issue } from "../../types";
+import { Issue, Repository } from "../../types";
+import { RepositoryCollectivButton } from "../Collectiv/RepositoryCollectivButton";
+
 import { IssueItem } from "./IssueItem";
 
 type IssueListProps = {
   issues: Issue[];
+  repositoryDetails: {
+    name: Repository["name"];
+    owner: Repository["owner"];
+    url: Repository["url"];
+  };
 };
 
-export const IssuesList = ({ issues }: IssueListProps) => {
+export const IssuesList = ({ issues, repositoryDetails }: IssueListProps) => {
   return (
-    <ol className="border-t border-dark-200 px-5 py-3 text-base leading-loose">
-      {issues.map((issue) => (
-        <IssueItem issue={issue} key={issue.id} />
-      ))}
-    </ol>
+    <>
+      <ol className="border-t border-dark-200 px-5 py-3 text-base leading-loose">
+        {issues.map((issue) => (
+          <IssueItem issue={issue} key={issue.id} />
+        ))}
+      </ol>
+      <div className="md:hidden">
+        <RepositoryCollectivButton
+          repositoryName={repositoryDetails.name}
+          repositoryOwner={repositoryDetails.owner}
+          repositoryUrl={repositoryDetails.url}
+        />
+      </div>
+    </>
   );
 };

components/Repository/RepositoryItem.tsx

@@ -52,7 +52,16 @@ export const RepositoryItem = ({ repository }: RepositoryItemProps) => {
           repositoryStars={repository.stars_display}
         />
       </div>
-      {isIssueOpen && <IssuesList issues={repository.issues} />}
+      {isIssueOpen && (
+        <IssuesList
+          issues={repository.issues}
+          repositoryDetails={{
+            name: repository.name,
+            owner: repository.owner,
+            url: repository.url
+          }}
+        />
+      )}
     </div>
   );
 };

components/Repository/RepositoryItemTopBar.tsx

@@ -1,4 +1,5 @@
 import { Repository } from "../../types";
+import { RepositoryCollectivButton } from "../Collectiv/RepositoryCollectivButton";
 import { RepositoryIssueNumberIndicator } from "./RepositoryIssueNumberIndicator";
 import { RepositoryLinkTitle } from "./RepositoryLinkTitle";
 
@@ -30,6 +31,15 @@ export const RepositoryItemTopBar = ({
       <div className="flex flex-1 items-center justify-end">
         <div className={`h-2 w-2 rounded-full ${repositoryHasNewIssues ? "bg-primary" : ""}`}></div>
       </div>
+      {isIssueOpen && (
+        <div className="hidden md:block">
+          <RepositoryCollectivButton
+            repositoryName={repositoryName}
+            repositoryOwner={repositoryOwner}
+            repositoryUrl={repositoryUrl}
+          />
+        </div>
+      )}
       <RepositoryIssueNumberIndicator
         isIssueOpen={isIssueOpen}
         numberOfIssues={repositoryNumIssues}

components/Repository/RepositoryLinkTitle.tsx

@@ -16,7 +16,7 @@ export const RepositoryLinkTitle = ({
   return (
     <a
       className={`text-xl font-bold transition-all group-hover:text-primary ${
-        isIssueOpen ? "text-primary" : ""
+        isIssueOpen ? "text-primary md:w-[50%] md:truncate" : ""
       }`}
       href={repositoryUrl}
       rel="noopener noreferrer"

components/Sidebar.tsx

@@ -6,6 +6,7 @@ import { useEffect } from "react";
 import { useAppData } from "../hooks/useAppData";
 import { AboutSection } from "./AboutSection";
 import { LinkButton } from "./Button/LinkButton";
+import { CollectivSection } from "./Collectiv/CollectivSection";
 import { NewsletterSection } from "./NewsletterSection";
 import { LanguagePicker } from "./Picker/LanguagePicker";
 import { TagPicker } from "./Picker/TagPicker";
@@ -34,6 +35,7 @@ export const Sidebar = () => {
       <LinkButton href="https://github.com/lucavallin/first-issue#adding-a-new-project">
         Add your project
       </LinkButton>
+      <CollectivSection />
       <NewsletterSection />
       <LanguagePicker
         languages={languages}

components/SponsorsBar.tsx

@@ -9,6 +9,9 @@ export const SponsorsBar = () => (
       <Link href="https://lucavall.in" className="grayscale hover:grayscale-0">
         <Image src="/sponsors/lucavallin.png" alt="lucavallin" width={25} height={25} />
       </Link>
+      <Link href="https://chat.collectivai.com/" className="grayscale hover:grayscale-0">
+        <Image src="/sponsors/collectiv.png" alt="collectiv" width={26} height={26} />
+      </Link>
     </div>
     <Link
       href={`${process.env.NEXT_PUBLIC_SPONSOR_URL}`}