[Odp 147]:Team metadata page implementation [mockup implementation] (#35

)

* [tailwindconfig][s]" add maxwidth

* add icon and image

* Team page implementation

* [TeamHeader][l]: update styling

* group component

* add activity icons

* [ActivityStream][l]: add activity stream components

* [DatasetList][l]: component to list all dataset

* [Teams][xl]: add teams page

* update teams page- move to a subpage

* update vertical space

* Little fixes

---------

Co-authored-by: Luccas Mateus <luccasmmg@gmail.com>

deployment/frontend/src/components/_shared/ActivityStreamCard.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Image from 'next/image'
+
+interface activity {
+  description: string,
+  time: string,
+  icon: string
+}
+
+export default function ActivityStreamCard({ activity }: { activity: activity }) {
+  return (
+    <div className='w-full flex gap-x-4'>
+      <div className=' my-auto'>
+        <Image src={`/icons/${activity.icon}.svg`} alt="update" width={16} height={16} />
+      </div>
+      <div className='flex flex-col'>
+        <p className=' line-clamp-1 font-normal text-base'>someone updated the dataset XYZ Lorem ipsum this will probably be longer</p>
+        <span className='font-normal text-xs text-wri-dark-gray'>1 hour ago</span>
+      </div>
+    </div>
+  )
+}

deployment/frontend/src/components/_shared/ActivityStreamList.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import ActivityStreamCard from './ActivityStreamCard'
+import Pagination from '@/components/_shared/Pagination'
+const activity = [
+  {
+    description: "someone updated the dataset XYZ Lorem ipsum this will probably be longer",
+    time: "1 hour ago",
+    icon: "update"
+  },
+  {
+    description: "someone edited the dataset XYZ Lorem ipsum this will probably be longer",
+    time: "1 hour ago",
+    icon: "edit"
+  },
+  {
+    description: "someone added the dataset XYZ Lorem ipsum this will probably be longer",
+    time: "1 hour ago",
+    icon: "add"
+  },
+  {
+    description: "someone updated the dataset XYZ Lorem ipsum this will probably be longer",
+    time: "1 hour ago",
+    icon: "update"
+  },
+  {
+    description: "someone edited the dataset XYZ Lorem ipsum this will probably be longer",
+    time: "1 hour ago",
+    icon: "edit"
+  },
+  {
+    description: "someone added the dataset XYZ Lorem ipsum this will probably be longer",
+    time: "1 hour ago",
+    icon: "add"
+  },
+  {
+    description: "someone updated the dataset XYZ Lorem ipsum this will probably be longer",
+    time: "1 hour ago",
+    icon: "update"
+  },
+  {
+    description: "someone edited the dataset XYZ Lorem ipsum this will probably be longer",
+    time: "1 hour ago",
+    icon: "edit"
+  },
+  {
+    description: "someone added the dataset XYZ Lorem ipsum this will probably be longer",
+    time: "1 hour ago",
+    icon: "add"
+  },
+
+]
+export default function ActivityStreamList() {
+  return (
+    <section className='w-full px-8 xxl:px-0 max-w-[1317px] xxl:mx-auto flex flex-col gap-y-6 mt-10' id='activitystream'>
+      {
+        activity.map((activity, index) => (
+          <ActivityStreamCard key={index} activity={activity} />
+        ))
+      }
+      <Pagination />
+    </section>
+  )
+}

deployment/frontend/src/components/team/DatasetList.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import DatasetHorizontalCard from '../search/DatasetHorizontalCard'
+import Pagination from '@/components/_shared/Pagination'
+
+export default function DatasetList({ datasets }: { datasets: number[] }) {
+  return (
+    <section id="datasetslist" className='w-full px-8 xxl:px-0 max-w-[1317px] xxl:mx-auto flex flex-col gap-y-2 mt-10'>
+
+      <h1 className=' font-semibold text-[24px] text-center sm:text-start'>Dataset associated with Topic 1 (784)</h1>
+      {
+        datasets.map((dataset, index) => (
+          <DatasetHorizontalCard key={index} />
+        ))
+      }
+      <Pagination />
+    </section>
+  )
+}

deployment/frontend/src/components/team/TeamHeaderCard.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Image from 'next/image'
+import { ChevronLeftIcon } from "@heroicons/react/20/solid";
+import { Button } from "../_shared/Button";
+import { BellAlertIcon } from '@heroicons/react/24/outline';
+
+export default function TeamHeaderCard() {
+  return (
+    <section id="team-header-card" className=" w-full flex flex-col md:flex-row max-w-9xl mx-auto  font-acumin gap-y-4 sm:mt-12">
+      <div className='relative w-full sm:px-6 md:px-0 md:w-[40%] xxl:w-[540px] h-[296px]'>
+        <div className="absolute top-[78%] flex h-[68px] w-56 items-center justify-center rounded-t-[3px] bg-white ">
+          <Button>
+            <ChevronLeftIcon className="mb-1 mr-1 h-6 w-6" />
+            <span>See all topics</span>
+          </Button>
+        </div>
+        <div className='w-full h-full border-b-2 border-b-wri-green  shadow flex justify-center items-center'>
+          <div className=' relative  w-[393px] h-[128px] '>
+            <Image src="/images/penguine.png" alt="Team card" fill />
+          </div>
+        </div>
+      </div>
+      <div className='w-full px-2 md:w-fit flex flex-col justify-center gap-y-3 md:pl-8'>
+        <div className='flex items-center outline-wri-gold outline-1 outline font-bold text-[14px] text-black rounded-md px-6 py-3 gap-x-1 w-fit'>
+          <span className='text-[0.875rem] w-fit'>Follow</span>
+          <BellAlertIcon className='h-5 w-5' />
+        </div>
+        <div className='flex flex-col md:w-[90%] lg:w-[579.33px] gap-y-2 '>
+          <h2 className='font-bold text-[2.063rem]'>Team 1</h2>
+          <p className='  line-clamp-3 font-light text-[1.125rem]'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Ut enim ad minim veniam.</p>
+          <span className=' font-light text-base'>363 Datasets</span>
+        </div>
+      </div>
+    </section>
+  )
+}

deployment/frontend/src/components/team/TeamTab.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { Tab } from '@headlessui/react'
+import DatasetList from './DatasetList'
+import ActivityStreamList from '../_shared/ActivityStreamList'
+
+
+const tabs = [
+  {
+    id: "datasets",
+    content: (
+      <DatasetList datasets={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
+    ),
+    title: "Datasets",
+  },
+  {
+    id: "activity",
+    content: (
+      <ActivityStreamList />
+    ),
+    title: "Activity stream",
+  }
+]
+
+export default function TeamTab() {
+
+  return (
+    <section id='teamtab' className='w-full max-w-9xl xxl:mx-auto mt-10 font-acumin '>
+      <Tab.Group>
+        <Tab.List className="flex max-w-9xl">
+          {tabs.map((tab) => (
+            <Tab key={tab.title} className=" bg-wri-green text-white font-semibold text-[1.063rem] w-[50%] sm:w-[316px]">
+              {({ selected }) => (
+                <div
+                  className={`font-semibold  px-6 py-4 focus:outline-0 w-full  ${selected ? " bg-wri-dark-green" : ""
+                    } `}
+                >
+                  {tab.title}
+                </div>
+              )}
+            </Tab>
+          ))}
+        </Tab.List>
+        <Tab.Panels className='mt-2'>
+          {tabs.map((tab) => (
+            <Tab.Panel key={tab.title} className=''>
+              {tab.content}
+            </Tab.Panel>
+          ))}
+        </Tab.Panels>
+      </Tab.Group>
+    </section>
+  )
+}

deployment/frontend/src/pages/teams/[teamsName].tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Header from '@/components/_shared/Header'
+import TeamHeaderCard from '@/components/team/TeamHeaderCard'
+import TeamTab from '@/components/team/TeamTab'
+import Footer from '@/components/_shared/Footer'
+import { Breadcrumbs } from "@/components/_shared/Breadcrumbs";
+
+
+const links = [
+  { label: "Teams", url: "/teams", current: false },
+  { label: "Team 1", url: "/topics/team1", current: true },
+];
+
+export default function teams() {
+  return (
+    <>
+      <Header />
+      <Breadcrumbs links={links} />
+      <TeamHeaderCard />
+      <TeamTab />
+      <Footer />
+    </>
+  )
+}

deployment/frontend/tailwind.config.ts

@@ -21,15 +21,17 @@ export default {
         "wri-dark-green": "#2B7340",
         "wri-light-green": "#BAE1BD",
         "wri-light-blue": "#B5D6E8",
-        "wri-light-yellow": "#FBE8BE"
+        "wri-light-yellow": "#FBE8BE",
+        "wri-dark-gray": "#666666"
       },
       screens: {
         "4xl": "2048px",
         "3xl": "1920px",
         "xxl": "1440px",
       },
       maxWidth: {
-        "8xl": "1350px"
+        "8xl": "1350px",
+        "9xl": "1440px",
       }
     },
   },