feat: Resources page to link users to open-sauced feedback/discussions (

#100)
open-sauced · May 23, 2023 · 3d607ae · 3d607ae
1 parent 6f2f310
commit 3d607ae
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 45 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,6 @@ import Loading from "./pages/loading";
 import { useAuth } from "./hooks/useAuth";
 import { goTo } from "react-chrome-extension-router";
 
-
 const App = () => {
   const { isTokenValid } = useAuth();
 

diff --git a/src/constants.ts b/src/constants.ts
@@ -23,3 +23,10 @@ export const GITHUB_PR_COMMENT_EDITOR_SELECTOR = "flex-nowrap d-inline-block mr-
 export const GITHUB_REPO_ACTIONS_SELECTOR = ".pagehead-actions";
 export const GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR = "pull_request[body]";
 export const GITHUB_PR_BASE_BRANCH_SELECTOR = "css-truncate css-truncate-target";
+
+// External Links
+export const EXTERNAL_RESOURCES = [
+    { link: "https://docs.opensauced.pizza/chrome-extension/introduction-to-the-chrome-extension/", key: "Docs" },
+    { link: "https://github.com/open-sauced/ai/issues", key: "Issues" },
+    { link: "https://github.com/orgs/open-sauced/discussions", key: "Discussions" },
+];
diff --git a/src/pages/help.tsx b/src/pages/help.tsx
@@ -0,0 +1,62 @@
+import { FaChevronLeft } from "react-icons/fa";
+import OpenSaucedLogo from "../assets/opensauced-logo.svg";
+import { EXTERNAL_RESOURCES } from "../constants";
+import {
+  HiOutlineBookOpen,
+  HiOutlineChatBubbleLeftRight,
+} from "react-icons/hi2";
+import { goBack } from "react-chrome-extension-router";
+import { VscIssues } from "react-icons/vsc";
+
+const Help = () => (
+  <div className="p-4 bg-slate-800">
+    <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
+      <header className="flex justify-between">
+        <div className="flex items-center gap-2">
+          <button
+            className="rounded-full p-2 bg-slate-700 hover:bg-slate-700/50"
+            onClick={() => {
+              goBack();
+            }}
+          >
+            <FaChevronLeft className="text-osOrange text-white" />
+          </button>
+
+          <img
+            alt="OpenSauced logo"
+            className="w-[100%]"
+            src={OpenSaucedLogo}
+          />
+        </div>
+      </header>
+
+      <main className="main-content text-white">
+        <h3 className="text font-medium text-base leading-10">Help:</h3>
+
+        <div className="tools flex flex-col gap-2">
+          {EXTERNAL_RESOURCES.map((externalLink) => (
+            <a
+              key={externalLink.key}
+              className="flex items-center bg-slate-700 hover:bg-slate-700/70 text-white hover:text-orange no-underline gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+              href={externalLink.link}
+              rel="noreferrer"
+              target="_blank"
+            >
+              {externalLink.key === "Docs" && <HiOutlineBookOpen />}
+
+              {externalLink.key === "Issues" && <VscIssues />}
+
+              {externalLink.key === "Discussions" && (
+                <HiOutlineChatBubbleLeftRight />
+              )}
+
+              {externalLink.key}
+            </a>
+          ))}
+        </div>
+      </main>
+    </div>
+  </div>
+);
+
+export default Help;
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,45 +1,47 @@
-import { HiArrowTopRightOnSquare, HiPencil, HiUserCircle } from "react-icons/hi2";
+import {
+  HiArrowTopRightOnSquare,
+  HiOutlineQuestionMarkCircle,
+  HiPencil,
+  HiUserCircle,
+} from "react-icons/hi2";
 import OpenSaucedLogo from "../assets/opensauced-logo.svg";
 import { useAuth } from "../hooks/useAuth";
 import { useOpensaucedUserCheck } from "../hooks/useOpensaucedUserCheck";
 import { Profile } from "./profile";
 import { goTo } from "react-chrome-extension-router";
 import AIPRDescription from "./aiprdescription";
+import Help from "./help";
 
 const Home = () => {
   const { user } = useAuth();
   const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
 
   return (
-  <div className="p-4 bg-slate-800">
-    <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
-      <header className="flex justify-between">
-        <img
-          alt="OpenSauced logo"
-          className="w-[45%]"
-          src={OpenSaucedLogo}
-        />
+    <div className="p-4 bg-slate-800">
+      <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
+        <header className="flex justify-between">
+          <img alt="OpenSauced logo" className="w-[45%]" src={OpenSaucedLogo} />
 
-        {user && (
-          <button
-            className="flex gap-1 items-center hover:text-orange text-white no-underline"
-            onClick={() => {
-              goTo(Profile, { username: user.user_name });
-            }}
-          >
-            {user.user_name}
+          {user && (
+            <button
+              className="flex gap-1 items-center hover:text-orange text-white no-underline"
+              onClick={() => {
+                goTo(Profile, { username: user.user_name });
+              }}
+            >
+              {user.user_name}
 
-            <img
-              alt="User avatar"
-              className="rounded-full w-6 aspect-square border border-orange"
-              src={`https://github.com/${user.user_name}.png`}
-            />
-          </button>
-        )}
-      </header>
+              <img
+                alt="User avatar"
+                className="rounded-full w-6 aspect-square border border-orange"
+                src={`https://github.com/${user.user_name}.png`}
+              />
+            </button>
+          )}
+        </header>
 
-      <main className="main-content">
-        <h3 className="text font-medium text-base leading-10">Tools:</h3>
+        <main className="main-content">
+          <h3 className="text font-medium text-base leading-10">Tools:</h3>
 
         <div className="tools flex flex-col gap-2">
           <a
@@ -73,25 +75,33 @@ const Home = () => {
           </button>
 
           {currentTabIsOpensaucedUser && (
-            <button
-              className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-              onClick={() => {
-                goTo(Profile, { username: checkedUser });
-              }}
-            >
-              <HiUserCircle />
-              View
-
-{" "}
-
-{checkedUser}
-              &apos;s profile
-            </button>
-          )}
+              <button
+                className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+                onClick={() => {
+                  goTo(Profile, { username: checkedUser });
+                }}
+              >
+                <HiUserCircle />
+                View {checkedUser}
+                &apos;s profile
+              </button>
+            )}
         </div>
-      </main>
+        </main>
+
+        <footer className="tools flex gap-2">
+          <button
+            className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-fit rounded-sm font-medium text-sm"
+            onClick={() => {
+              goTo(Help);
+            }}
+          >
+            <HiOutlineQuestionMarkCircle />
+            Help
+          </button>
+        </footer>
+      </div>
     </div>
-  </div>
   );
 };