From 0ff5cb632ef57f1851e6fdea7aded0d09eb7ab5f Mon Sep 17 00:00:00 2001
From: Thomas Starzynski <dcts@google.com>
Date: Fri, 30 Aug 2024 23:47:10 +0200
Subject: [PATCH] add header and filter section UI

---
 src/app/components/NavBar.tsx      |  4 +++
 src/app/state/locales/en/team.json |  1 +
 src/app/state/locales/pt/team.json |  1 +
 src/app/team/page.tsx              | 45 ++++++++++++++++++++++++++----
 src/app/utils/GoogleSheet.ts       | 15 ++++++++++
 5 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 src/app/utils/GoogleSheet.ts

diff --git a/src/app/components/NavBar.tsx b/src/app/components/NavBar.tsx
index 34052a07..64d178f0 100644
--- a/src/app/components/NavBar.tsx
+++ b/src/app/components/NavBar.tsx
@@ -43,6 +43,10 @@ const NavItems: { path: string; title: string }[] = [
     path: "/rewards",
     title: "rewards",
   },
+  {
+    path: "/team",
+    title: "team",
+  },
   {
     path: "/roadmap",
     title: "roadmap",
diff --git a/src/app/state/locales/en/team.json b/src/app/state/locales/en/team.json
index dda76123..910d9b53 100644
--- a/src/app/state/locales/en/team.json
+++ b/src/app/state/locales/en/team.json
@@ -1,4 +1,5 @@
 {
+  "team": "Team",
   "meet_our_contributors": "Meet our contributors",
   "we_have_a_diverse_talented": "We have a diverse, talented pool of contributors from various fields and locations worldwide. Anyone can join. Browse our current active or past members and connect with contributors to collaborate."
 }
diff --git a/src/app/state/locales/pt/team.json b/src/app/state/locales/pt/team.json
index 7931c402..1c2d06f2 100644
--- a/src/app/state/locales/pt/team.json
+++ b/src/app/state/locales/pt/team.json
@@ -1,4 +1,5 @@
 {
+  "team": "Equipe",
   "meet_our_contributors": "Conheça nossos colaboradores",
   "we_have_a_diverse_talented": "Temos um grupo diversificado e talentoso de colaboradores de várias áreas e localizações ao redor do mundo. Qualquer pessoa pode participar. Explore nossos membros atuais ou passados e conecte-se com colaboradores para colaborar."
 }
diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx
index 1bfb8122..b24d7a24 100644
--- a/src/app/team/page.tsx
+++ b/src/app/team/page.tsx
@@ -21,26 +21,61 @@ export default function Rewards() {
 
   return (
     <div className="bg-[#141414] grow flex items-center justify-center">
-      <div>
-        {/* <HeaderComponent /> */}
+      <div className="max-w-[1000px] p-8">
+        <HeaderComponent />
+        <Filters />
         <Contributors />
       </div>
     </div>
   );
 }
 
-function Contributors() {
+function Filters() {
+  return (
+    <div className="text-center text-base mt-8">
+      <p>Activity status</p>
+      <FilterToggle label="Active" />
+      <FilterToggle label="Past" />
+      <FilterToggle label="All" />
+      <p className="!mt-4">Area of work</p>
+      <FilterToggle label="All" />
+      <FilterToggle label="Admin" />
+      <FilterToggle label="Dev" />
+      <FilterToggle label="Design" />
+      <FilterToggle label="Social media" />
+      <FilterToggle label="Testing" />
+    </div>
+  );
+}
+
+function FilterToggle({ label }: { label: string }) {
+  return (
+    <div className="inline-block mx-1 my-3 px-6 py-3 bg-black opacity-25 rounded-badge hover:opacity-100">
+      <p className="uppercase">{label}</p>
+    </div>
+  );
+}
+
+function HeaderComponent() {
   const t = useTranslations();
   return (
-    <div>
+    <div className="text-center">
       <DexterHeading title={t("meet_our_contributors")} />
       <DexterParagraph text={t("we_have_a_diverse_talented")} />
     </div>
   );
 }
 
+function Contributors() {
+  return <div></div>;
+}
+
 function DexterParagraph({ text }: { text: string }) {
-  return <p className="text-sm tracking-wide py-2">{text}</p>;
+  return (
+    <div className="flex items-center justify-center">
+      <p className="max-w-[600px] text-sm tracking-wide py-2">{text}</p>
+    </div>
+  );
 }
 
 function DexterHeading({ title }: { title: string }) {
diff --git a/src/app/utils/GoogleSheet.ts b/src/app/utils/GoogleSheet.ts
new file mode 100644
index 00000000..0f08ac3a
--- /dev/null
+++ b/src/app/utils/GoogleSheet.ts
@@ -0,0 +1,15 @@
+/**
+ * This Service loads data from a google sheet as single string in CSV format
+ */
+const fetchSheet = async (sheetId: string, gic: string) => {
+  const url = `https://docs.google.com/spreadsheets/d/${sheetId}/export?format=csv&gid=${gic}`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.text(); // Getting the CSV data as text
+};
+
+export const GoogleSheet = {
+  fetch: fetchSheet,
+};