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

src/App.tsx

@@ -6,6 +6,7 @@ import Loading from "./pages/loading";
 import { Profile } from "./pages/profile";
 import { useAuth } from "./hooks/useAuth";
 import AIPRDescription from "./pages/aiprdescription";
+import Resources from "./pages/resources";
 
 export const RouteContext = createContext<{ page: { name: string, props?: any }, setCurrentPage:(page: RouteKeys, props?: any) => void }>({ page: { name: "loading" }, setCurrentPage: () => {} });
 
@@ -15,6 +16,7 @@ const routes = {
   loading: <Loading />,
   profile: <Profile />,
   aiprdescription: <AIPRDescription />,
+  resources: <Resources />,
 };
 
 type RouteKeys = keyof typeof routes;

src/constants.ts

@@ -23,3 +23,7 @@ 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 DISCUSSIONS = { link: "https://github.com/orgs/open-sauced/discussions", key: "Discussions", displayValue: "Go to feedback Discussions" };
+export const ISSUES = { link: "https://github.com/open-sauced/ai/issues", key: "Issues", displayValue: "Go to our current Issues" };

src/pages/home.tsx

@@ -87,6 +87,16 @@ const Home = () => {
               '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={() => {
+              setCurrentPage("resources");
+            }}
+          >
+            <HiArrowTopRightOnSquare />
+            Resources
+          </button>
         </div>
       </main>
     </div>

src/pages/resources.tsx

@@ -0,0 +1,65 @@
+import { useContext } from "react";
+
+import { FaChevronLeft } from "react-icons/fa";
+import OpenSaucedLogo from "../assets/opensauced-logo.svg";
+import { RouteContext } from "../App";
+import { Toaster } from "react-hot-toast";
+import { DISCUSSIONS, ISSUES } from "../constants";
+import { HiArrowTopRightOnSquare } from "react-icons/hi2";
+
+const externalLinks = [DISCUSSIONS, ISSUES];
+
+const Resources = () => {
+  const { setCurrentPage } = useContext(RouteContext);
+
+  return (
+    <>
+      <Toaster />
+
+      <div className="grid grid-cols-1 divide-y divider-y-center-2 min-w-[320px]">
+        <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={() => {
+                setCurrentPage("home");
+              }}
+            >
+              <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">
+            External Resources:
+          </h3>
+
+          <div className="tools flex flex-col gap-2">
+            {externalLinks.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"
+              >
+                <HiArrowTopRightOnSquare />
+
+                {externalLink.displayValue}
+              </a>
+            ))}
+          </div>
+        </main>
+      </div>
+    </>
+  );
+};
+
+export default Resources;