More updates and some refactorings.

github · Sep 20, 2023 · 1a92b94 · 1a92b94
1 parent 67a5509
commit 1a92b94
Show file tree

Hide file tree

Showing 14 changed files with 582 additions and 272 deletions.
diff --git a/components/AddYourProjectButton.tsx b/components/AddYourProjectButton.tsx
@@ -0,0 +1,24 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+
+export const AddYourProjectButton = () => {
+  return (
+    <div style={{paddingLeft: 1202}}>
+      {/* <div style={{color: 'white', fontSize: 16, fontFamily: 'Inter', fontWeight: '600', lineHeight: 24, wordWrap: 'break-word'}}> */}
+      <a
+        className=""
+        href="https://github.com/rubyforgood/happycommits"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{height: 40, paddingLeft: 24, paddingRight: 24, paddingTop: 8, paddingBottom: 8, background: '#604FDD', borderRadius: 8, justifyContent: 'center', alignItems: 'center', gap: 10, display: 'inline-flex'}}
+      >
+              <div style={{color: 'white',  fontFamily: 'Inter', fontWeight: '600'}}>
+              <FontAwesomeIcon icon={faPlus} className="mr-2" />&nbsp;&nbsp;
+                Add your project
+              </div>
+      </a>
+
+      </div>
+
+  );
+};
diff --git a/components/AddYourProjectLinkButton.tsx b/components/AddYourProjectLinkButton.tsx
@@ -1,12 +1,16 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+
 export const AddYourProjectLinkButton = () => {
   return (
-    <div className="pt-6">
+    <div className="d-flex flex-row-reverse">
       <a
-        className="block bg-juniper hover:bg-light_juniper text-ink-400 uppercase rounded-md font-bold text-center px-1 py-3"
-        href="https://github.com/"
+        className="btn btn-primary float-right text-end"
+        href="https://github.com/rubyforgood/happycommits"
         target="_blank"
         rel="noopener noreferrer"
       >
+      <FontAwesomeIcon icon={faPlus} className="mr-2" />
         Add your project
       </a>
     </div>

diff --git a/components/GitHubIcon.tsx b/components/GitHubIcon.tsx
@@ -0,0 +1,10 @@
+import Image from "next/image";
+
+export const GitHubIcon = () => {
+
+  return (
+    <div style={{position: 'relative', paddingLeft: '7.5%', paddingTop: '3%'}}>
+        <Image src="/github.svg" alt="First Issue" width={64} height={62.42} />
+    </div>
+    );
+};
diff --git a/components/HappyCommitsInfo.tsx b/components/HappyCommitsInfo.tsx
@@ -0,0 +1,62 @@
+export const HappyCommitsInfo = () => {
+  return (
+    <div style={{ paddingLeft: "10%", paddingBottom: "3%" }}>
+      <div style={{ width: 541, height: 291, flexDirection: "column" }}>
+        <div
+          style={{
+            color: "white",
+            fontSize: 32,
+            fontFamily: "Inter",
+            fontWeight: "400",
+            wordWrap: "break-word"
+          }}
+        >
+          happy commits
+        </div>
+        <div
+          style={{
+            color: "white",
+            fontSize: 48,
+            fontFamily: "Inter",
+            fontWeight: "400",
+            wordWrap: "break-word"
+          }}
+        >
+          open source
+          <br />
+          social-impact projects
+        </div>
+        <div
+          style={{
+            color: "white",
+            fontSize: 16,
+            fontFamily: "Inter",
+            fontWeight: "400",
+            wordWrap: "break-word",
+            paddingBottom: "3%"
+          }}
+        >
+          Our mission is to curate a list of open source projects with missions that are driven by
+          social impact. Let’s commit to a better future!
+        </div>
+        <div className="flex items-center gap-2 py-2 px-4 w-[26.375rem] rounded-lg border border-[#dbdce2] bg-vanilla-100">
+          <svg
+            width={16}
+            height={16}
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M11.5 6.9999C11.5 7.59084 11.3836 8.17601 11.1574 8.72197C10.9313 9.26794 10.5998 9.76401 10.182 10.1819C9.76407 10.5997 9.268 10.9312 8.72203 11.1574C8.17607 11.3835 7.59091 11.4999 6.99996 11.4999C6.40901 11.4999 5.82385 11.3835 5.27788 11.1574C4.73192 10.9312 4.23584 10.5997 3.81798 10.1819C3.40011 9.76401 3.06865 9.26794 2.8425 8.72197C2.61635 8.17601 2.49996 7.59084 2.49996 6.9999C2.49996 5.80642 2.97406 4.66183 3.81798 3.81792C4.66189 2.974 5.80648 2.4999 6.99996 2.4999C8.19343 2.4999 9.33802 2.974 10.182 3.81792C11.0259 4.66183 11.5 5.80642 11.5 6.9999ZM10.68 11.7399C9.47434 12.6759 7.95733 13.1172 6.43776 12.974C4.91819 12.8309 3.5103 12.114 2.50071 10.9693C1.49111 9.82461 0.955713 8.33819 1.00349 6.81265C1.05128 5.2871 1.67866 3.8371 2.75791 2.75785C3.83717 1.6786 5.28716 1.05122 6.81271 1.00343C8.33826 0.955649 9.82467 1.49105 10.9694 2.50065C12.1141 3.51024 12.831 4.91813 12.9741 6.4377C13.1173 7.95726 12.676 9.47427 11.74 10.6799L14.78 13.7199C14.8537 13.7886 14.9128 13.8714 14.9538 13.9634C14.9948 14.0554 15.0168 14.1547 15.0186 14.2554C15.0204 14.3561 15.0018 14.4561 14.9641 14.5495C14.9264 14.6429 14.8702 14.7277 14.799 14.7989C14.7278 14.8702 14.643 14.9263 14.5496 14.964C14.4562 15.0017 14.3562 15.0203 14.2555 15.0185C14.1548 15.0167 14.0554 14.9947 13.9635 14.9537C13.8715 14.9127 13.7887 14.8536 13.72 14.7799L10.68 11.7399Z"
+              fill="#604FDD"
+            />
+          </svg>
+          <div className="search-1 text-[#24292f] font-['Inter'] leading-[150%]">Search Repositories</div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/HeroContainer.tsx b/components/HeroContainer.tsx
@@ -0,0 +1,18 @@
+import { GitHubIcon } from "./GitHubIcon";
+import { HappyCommitsInfo } from "./HappyCommitsInfo";
+
+export const HeroContainer = () => {
+  return (
+    <>
+      <div
+        style={{
+          background:
+            "linear-gradient(278deg, #26C6D0 10%, #4F5BE3 40%, #604FDD 53%, #4B449A 77%, #3A3A62 98%)"
+        }}
+      >
+        <GitHubIcon />
+        <HappyCommitsInfo />
+      </div>
+    </>
+  );
+};
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,18 +1,13 @@
 import React from "react";
 
-import { Navbar } from "./Navbar";
-import { Sidebar } from "./Sidebar";
-
 type LayoutProps = {
   children: React.ReactNode;
 };
 
 export const Layout = ({ children }: LayoutProps) => (
-  <div className="bg-ink-400 flex flex-col min-h-screen antialiased text-vanilla-300">
-    <Navbar />
-    <main className="flex flex-1">
-      <section className="container max-w-6xl mx-auto flex flex-col md:flex-row">
-        <Sidebar />
+  <div>
+    <main>
+      <section>
         {children}
       </section>
     </main>

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,26 +1,50 @@
-import { useRouter } from "next/router";
-import React from "react";
-
-import { useAppData } from "../hooks/useAppData";
-import { Tag } from "../types";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const Navbar = () => {
-  const router = useRouter();
-  const { tag: path } = router.query;
-  const { languages, topics } = useAppData();
-  const tag = [...languages, ...topics].find((tag: Tag) => tag.id === path);
-
   return (
-    <header className="container max-w-6xl mx-auto flex flex-col md:flex-row my-5 md:my-10 p-6 bg-ink-400">
-      <nav className="flex items-center md:justify-center flex-wrap">
-        <h1 className="text-2xl pt-3 font-bold group-hover:text-juniper">Happy Commits</h1>
-        {path && tag ? (
-          <span className="text-2xl pt-3 cursor-pointer">
-            <span className="font-normal mx-3 text-slate">/</span>
-            <span className="font-semibold text-juniper">{tag?.display}</span>
-          </span>
-        ) : null}
-      </nav>
-    </header>
+    <nav className="flex items-center justify-between flex-wrap bg-slate-700 p-2">
+      <div className="flex items-center flex-shrink-0 text-vanilla-100 mr-6">
+        <svg
+          className="fill-current h-8 w-8 mr-2"
+          width="54"
+          height="54"
+          viewBox="0 0 54 54"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M27 50.5c-1.5 0-3-.6-4.2-1.8L2.3 28.7c-2.3-2.3-2.3-6.1 0-8.5 2.3-2.3 6.1-2.3 8.5 0L27 38.5l16.2-18.3c2.3-2.3 6.1-2.3 8.5 0 2.3 2.3 2.3 6.1 0 8.5L31.2 48.7c-1.2 1.2-2.7 1.8-4.2 1.8z" />
+        </svg>
+        <span className="text-vanilla-100 text-xl">Happy Commits</span>
+      </div>
+      <div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+        <div className="text-sm lg:flex-grow"></div>
+        <div>
+          <a
+            className=""
+            href="https://github.com/rubyforgood/happycommits"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              height: 40,
+              paddingLeft: 24,
+              paddingRight: 24,
+              paddingTop: 8,
+              paddingBottom: 8,
+              background: "#604FDD",
+              borderRadius: 8,
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 10,
+              display: "inline-flex"
+            }}
+          >
+            <div style={{ color: "white", fontFamily: "Inter", fontWeight: "600" }}>
+              <FontAwesomeIcon icon={faPlus} className="mr-2" />
+              &nbsp; Add your project
+            </div>
+          </a>
+        </div>
+      </div>
+    </nav>
   );
 };
diff --git a/components/RepositoryList.tsx b/components/RepositoryList.tsx
@@ -49,24 +49,27 @@ export const RepositoryList = ({ repositories }: RepositoryListProps) => {
   return (
     <main className="grow">
       <div className="p-4 w-full">
+      <div className="flex flex-wrap">
         <input
           type="text"
           value={filter}
           onChange={(e) => setFilter(e.target.value)}
           placeholder="Search Repositories"
-          className="border rounded-sm p-2 mb-4"
+          className="flex-1 mx-2 border rounded-sm p-2 mb-4"
         />
-        <label className="block mb-2">Filter by Language</label>
+        <label className="p-2">Filter by Language</label>
         <Select
           isMulti
           closeMenuOnSelect={false}
-          className="border rounded-sm p-2 mb-4"
+          className="flex-1 mx-2 border rounded-sm p-2 mb-4"
           onChange={(selectedOptions) => {
             setSelectedLanguages(selectedOptions.map((option) => option.value));
           }}
           options={languageOptions}
           classNamePrefix="select"
         />
+      </div>
+
         <InfiniteScroll
           dataLength={items}
           next={() => setItems(items + itemsPerScroll)}

diff --git a/components/SiteLogo.tsx b/components/SiteLogo.tsx
@@ -0,0 +1,6 @@
+export const SiteLogo = () => {
+
+  return (
+    <div style={{color: 'black', fontSize: 16, fontFamily: 'Inter', fontWeight: '700', wordWrap: 'break-word'}}>HC</div>
+  );
+};