More cleanup

github · Sep 23, 2023 · a7b17b0 · a7b17b0
1 parent bd24cb9
commit a7b17b0
Show file tree

Hide file tree

Showing 20 changed files with 241 additions and 126 deletions.
diff --git a/components/BinaryCode.tsx b/components/BinaryCode.tsx
@@ -1,8 +1,8 @@
 export const BinaryCode = () => {
   return (
     <div
-      className="opacity-20 text-vanilla-100 font-bold font-['Inter']"
-      style={{ position: "relative",paddingLeft: "70%", top: "-300px" }}
+      className="opacity-20 text-vanilla-100 font-bold font-['Inter'] w-auto float-right -mt-80 text-right"
+      style={{  }}
     ><p style={{fontSize:48}}>
       01111001010111100101
       <br /> 110111010110111100101

diff --git a/components/FilterInfo.tsx b/components/FilterInfo.tsx
@@ -0,0 +1,8 @@
+export const FilterInfo = () => {
+  return (
+<div className="flex-col justify-start items-start gap-2 inline-flex">
+  <div className="text-zinc-900 text-[32px] font-normal font-['Inter']">find a project</div>
+  <div className="text-zinc-900 text-base font-normal font-['Inter'] leading-normal">Filter by language or UN Sustainable Development Goal.</div>
+</div>
+  );
+};
diff --git a/components/GeneralFilter.tsx b/components/GeneralFilter.tsx
@@ -5,6 +5,6 @@ type GeneralFilterProps = {
 
 export const GeneralFilter = ({ filter, setFilter }: GeneralFilterProps) => {
   return (
-    <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Search Repositories" className="flex-1 mx-2 border rounded-sm p-2 mb-4" />
+    <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Search Repositories" className="flex-1  border rounded-sm p-2 mb-4 z-10" />
   );
 };
diff --git a/components/HappyCommitsInfo.tsx b/components/HappyCommitsInfo.tsx
@@ -1,4 +1,10 @@
-export const HappyCommitsInfo = () => {
+import { GeneralFilter } from "./GeneralFilter";
+type FilterProps = {
+  filter: string;
+  setFilter: (filter: string) => void;
+};
+
+export const HappyCommitsInfo = ({filter, setFilter}: FilterProps) => {
   return (
     <div style={{ paddingLeft: "10%" }}>
       <div style={{ width: 541, height: 291, flexDirection: "column" }}>
@@ -39,23 +45,10 @@ export const HappyCommitsInfo = () => {
           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>
+        <GeneralFilter
+          filter={filter}
+          setFilter={setFilter as (filter: string | number | readonly string[] | undefined) => void}
+        />
       </div>
     </div>
   );

diff --git a/components/HeroContainer.tsx b/components/HeroContainer.tsx
@@ -2,7 +2,7 @@ import { GitHubIcon } from "./GitHubIcon";
 import { HappyCommitsInfo } from "./HappyCommitsInfo";
 import { BinaryCode } from "./BinaryCode";
 
-export const HeroContainer = () => {
+export const HeroContainer = ({filter, setFilter}) => {
   return (
     <>
       <div
@@ -13,7 +13,7 @@ export const HeroContainer = () => {
         }}
       >
         <GitHubIcon />
-        <HappyCommitsInfo />
+        <HappyCommitsInfo filter={filter} setFilter={setFilter} />
         <BinaryCode />
       </div>
     </>

diff --git a/components/IssueItem.tsx b/components/IssueItem.tsx
@@ -11,30 +11,31 @@ type IssueCommentNumProps = {
   numIssues: number;
 };
 
-const IssueCommentNum = ({ numIssues }: IssueCommentNumProps) => {
-  return (
-    <div className="flex flex-row items-center justify-end mt-1 w-10">
-      <span className="mr-2 text-sm leading-snug">{numIssues}</span>
-      <FontAwesomeIcon icon={faComment} />
-    </div>
-  );
-};
+// const IssueCommentNum = ({ numIssues }: IssueCommentNumProps) => {
+//   return (
+//     <div className="flex flex-row items-center justify-end mt-1 w-10">
+//       <span className="mr-2 text-sm leading-snug">{numIssues}</span>
+//       <FontAwesomeIcon icon={faComment} />
+//     </div>
+//   );
+// };
 
 export const IssueItem = ({ issue }: IssueItemProps) => {
   return (
-    <li key={issue.url} className="flex flex-row items-start justify-start py-1">
-      <span className="text-slate text-right w-30 px-2 leading-snug">#{issue.number}</span>
+    <li key={issue.url} className="px-6 py-2 bg-white justify-start items-start gap-4 inline-flex">
+      <span className="text-black text-base font-semibold font-['Inter'] leading-normal">#{issue.number}</span>
       <div className="flex items-start flex-row flex-auto">
         <a
-          className="break-all mr-4 leading-snug font-semibold hover:text-juniper text-vanilla-300 block flex-auto"
+          className="grow hover:text-indigo-600 shrink basis-0 text-black text-base font-normal font-['Inter'] leading-normal
+          "
           href={issue.url}
           rel="noopener noreferrer"
           target="_blank"
           title="Open issue on GitHub"
         >
           {issue.title}
         </a>
-        {issue.comments_count > 0 && <IssueCommentNum numIssues={issue.comments_count} />}
+        {/* {issue.comments_count > 0 && <IssueCommentNum numIssues={issue.comments_count} />} */}
       </div>
     </li>
   );

diff --git a/components/IssueList.tsx b/components/IssueList.tsx
@@ -7,10 +7,11 @@ type IssueListProps = {
 
 export const IssuesList = ({ issues }: IssueListProps) => {
   return (
-    <ol className="px-5 py-3 text-base leading-loose border-t border-ink-200">
+    <ol className="w-full py-6 bg-white rounded-bl-lg rounded-br-lg flex-col justify-start items-start inline-flex">
       {issues.map((issue) => (
         <IssueItem issue={issue} key={issue.id} />
       ))}
     </ol>
   );
 };
+
diff --git a/components/LanguageFilter.tsx b/components/LanguageFilter.tsx
@@ -8,8 +8,8 @@ type LanguageFilterProps = {
 export const LanguageFilter = ({ setSelectedLanguages, languageOptions }: LanguageFilterProps) => {
   return (
     <>
-    <label className="p-2">Filter by Language</label>
-    <Select isMulti closeMenuOnSelect={false} className="flex-1 mx-2 rounded-sm p-2 mb-4" onChange={(selectedOptions) => setSelectedLanguages(selectedOptions.map((option) => option.value))} options={languageOptions} classNamePrefix="select" />
+    <label className="">Language</label>
+    <Select isMulti closeMenuOnSelect={false} className="" onChange={(selectedOptions) => setSelectedLanguages(selectedOptions.map((option) => option.value))} options={languageOptions} classNamePrefix="select" />
     </>
   );
 };
diff --git a/components/ProjectHeader.tsx b/components/ProjectHeader.tsx
@@ -0,0 +1,9 @@
+export const ProjectHeader = () => {
+  return (
+    <div className="flex justify-center">
+      <div className="w-[85%] justify-start items-start inline-flex mb-4">
+        <div className="text-zinc-900 text-[32px] font-normal font-['Inter']">Projects</div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/RepositoryDescription.tsx b/components/RepositoryDescription.tsx
@@ -6,8 +6,8 @@ type RepositoryDescriptionProps = {
 
 export const RepositoryDescription = ({ repositoryDescription }: RepositoryDescriptionProps) => {
   return (
-    <div className="flex-row flex text-sm py-1 overflow-auto text-neutral-content">
-      {repositoryDescription}
+    <div className="text-zinc-900 text-base font-normal font-['Inter'] leading-normal mb-2">
+      {repositoryDescription}{" "}
     </div>
   );
 };
diff --git a/components/RepositoryIssueNumberIndicator.tsx b/components/RepositoryIssueNumberIndicator.tsx
@@ -1,21 +1,16 @@
+import { FaChevronDown } from 'react-icons/fa';
+import { FaChevronUp } from 'react-icons/fa';
+
 type RepositoryIssueNumberIndicatorProps = {
   isIssueOpen: boolean;
-  numberOfIssues: number;
 };
 
 export const RepositoryIssueNumberIndicator = ({
-  isIssueOpen,
-  numberOfIssues
+  isIssueOpen
 }: RepositoryIssueNumberIndicatorProps) => {
   return (
-    <span
-      className={`hidden md:inline text-sm border px-3 py-1 ml-2 rounded-full font-semibold ${
-        isIssueOpen ? "text-ink-400 bg-juniper border-transparent" : "text-vanilla-200"
-      }`}
-    >
-      {numberOfIssues}
-      {numberOfIssues >= 10 ? "+" : ""} issue
-      {numberOfIssues > 1 ? "s" : ""}
+    <span>
+      {isIssueOpen ? <FaChevronUp /> : <FaChevronDown />}
     </span>
   );
 };
diff --git a/components/RepositoryItem.tsx b/components/RepositoryItem.tsx
@@ -26,30 +26,40 @@ export const RepositoryItem = ({ repository }: RepositoryItemProps) => {
   const lastModified = useLastModified(repository.last_modified);
 
   return (
-    <div
-      id={`repo-${repository.id}`}
-      className={`select-none border w-full rounded-md mb-4 group ${
-        isIssueOpen ? "border-juniper" : "border-ink-200"
-      }`}
-    >
-      <div className="px-5 py-3 cursor-pointer hover:bg-ink-300" onClick={() => setIsIssueOpen(!isIssueOpen)}>
-        <RepositoryItemTopBar
-          isIssueOpen={isIssueOpen}
-          repositoryHasNewIssues={repository.has_new_issues}
-          repositoryName={repository.name}
-          repositoryNumIssues={repository.issues.length}
-          repositoryOwner={repository.owner}
-          repositoryUrl={repository.url}
-        />
-        <RepositoryDescription repositoryDescription={repository.description} />
-        <RepositoryMetadata
-          isIssueOpen={isIssueOpen}
-          lastModified={lastModified}
-          repositoryLang={repository.language.display}
-          repositoryStars={repository.stars_display}
-        />
+    <div className="flex justify-center">
+      <div
+        id={`repo-${repository.id}`}
+        className="w-[85%] shadow-lg border-t border-r border-gray-300 flex-col justify-start items-start rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg inline-flex border mb-4"
+        onClick={() => setIsIssueOpen(!isIssueOpen)}
+      >
+        <div className="cursor-pointer w-full">
+          <RepositoryItemTopBar
+            isIssueOpen={isIssueOpen}
+            repositoryHasNewIssues={repository.has_new_issues}
+            repositoryName={repository.name}
+            repositoryNumIssues={repository.issues.length}
+            repositoryOwner={repository.owner}
+            repositoryUrl={repository.url}
+            repositoryTopics={repository.topics}
+          />
+          <div
+            className={`px-6 py-4 bg-white w-full rounded-bl-lg rounded-br-lg flex-col justify-start items-start gap-6 flex" ${
+              isIssueOpen ? "bg-indigo-50" : ""
+            }`}
+          >
+            <RepositoryDescription repositoryDescription={repository.description} />
+
+            <RepositoryMetadata
+              isIssueOpen={isIssueOpen}
+              lastModified={lastModified}
+              repositoryLang={repository.language.display}
+              repositoryTopics={repository.topics}
+              repositoryNumIssues={repository.issues.length}
+            />
+          </div>
+        </div>
+        {isIssueOpen && <IssuesList issues={repository.issues} />}
       </div>
-      {isIssueOpen && <IssuesList issues={repository.issues} />}
     </div>
   );
 };
diff --git a/components/RepositoryItemTopBar.tsx b/components/RepositoryItemTopBar.tsx
@@ -1,6 +1,5 @@
 import { Repository } from "../types";
 import { RepositoryIssueNumberIndicator } from "./RepositoryIssueNumberIndicator";
-import { RepositoryLinkTitle } from "./RepositoryLinkTitle";
 
 type RepositoryItemTopBarProps = {
   isIssueOpen: boolean;
@@ -9,32 +8,36 @@ type RepositoryItemTopBarProps = {
   repositoryNumIssues: number;
   repositoryOwner: Repository["owner"];
   repositoryUrl: Repository["url"];
+  repositoryTopics: Repository["topics"];
 };
 
 export const RepositoryItemTopBar = ({
   isIssueOpen,
-  repositoryHasNewIssues,
   repositoryName,
-  repositoryNumIssues,
   repositoryOwner,
   repositoryUrl
 }: RepositoryItemTopBarProps) => {
   return (
-    <div className="flex flex-row">
-      <RepositoryLinkTitle
-        isIssueOpen={isIssueOpen}
-        repositoryName={repositoryName}
-        repositoryOwner={repositoryOwner}
-        repositoryUrl={repositoryUrl}
-      />
-      <div className="flex flex-1 justify-end items-center">
-        <div className={`w-2 h-2 rounded-full ${repositoryHasNewIssues ? "bg-juniper" : ""}`}></div>
-      </div>
-      {repositoryNumIssues > 0 &&
+    <div className="w-full px-6 py-2 bg-violet-100 justify-between items-center inline-flex">
+      <a
+        href={repositoryUrl}
+        rel="noopener noreferrer"
+        target="_blank"
+        title={`Open ${repositoryOwner}/${repositoryName} on GitHub`}
+      >
+        <div className="grow shrink basis-0 flex-col justify-start items-start inline-flex">
+          <div className="hover:text-indigo-600 self-stretch text-zinc-900 text-2xl font-semibold font-['Inter'] leading-[28.80px]">
+            {repositoryName}
+          </div>
+          <div className="hover:text-indigo-600 self-stretch text-zinc-900 text-base font-normal font-['Inter'] leading-normal">
+            {repositoryOwner}
+          </div>
+        </div>
+      </a>
+
       <RepositoryIssueNumberIndicator
         isIssueOpen={isIssueOpen}
-        numberOfIssues={repositoryNumIssues}
-      />}
+      />
     </div>
   );
 };