add header and filter section UI

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",

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."
 }

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."
 }

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 }) {

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,
+};