Merge pull request #34 from wri/odp_146

Individual page for topic

deployment/frontend/package.json

@@ -20,6 +20,7 @@
     "@trpc/next": "^10.37.1",
     "@trpc/react-query": "^10.37.1",
     "@trpc/server": "^10.37.1",
+    "class-variance-authority": "^0.7.0",
     "ky": "^1.0.1",
     "mapbox-gl": "^2.15.0",
     "next": "^13.5.4",

deployment/frontend/src/components/Carousel.tsx

@@ -5,13 +5,18 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Swiper } from 'swiper/react';
 import { Navigation } from "swiper/modules";
+import { SwiperOptions } from 'swiper/types';
 
 type CarouselProps = {
   children: React.ReactNode;
   identifier: string;
+  breakpoints?: {
+    [width: number]: SwiperOptions;
+    [ratio: string]: SwiperOptions;
+  };
 }
 
-export default function Carousel({ children, identifier }: CarouselProps) {
+export default function Carousel({ children, identifier, breakpoints }: CarouselProps) {
   const prevEl = `.nav-prev-button${identifier ? '--' + identifier : ''}`;
   const nextEl = `.nav-next-button${identifier ? '--' + identifier : ''}`;
   // const [swiper, setSwiper] = useState<Swiper | null>(null);;
@@ -20,7 +25,7 @@ export default function Carousel({ children, identifier }: CarouselProps) {
       <Swiper
         modules={[Navigation]}
         spaceBetween={identifier.includes("recent") ? 18 : 40}
-        breakpoints={{
+        breakpoints={breakpoints ? breakpoints : {
           1: {
             slidesPerView: 1,
             slidesPerGroup: 1,

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

@@ -0,0 +1,42 @@
+interface Link {
+  label: string;
+  url: string;
+  current: boolean
+}
+export function Breadcrumbs({ links }: { links: Link[]}) {
+  return (
+  <nav className="flex bg-wri-green h-16" aria-label="Breadcrumb">
+      <ol role="list" className="max-w-[1380px] mx-auto flex w-full space-x-4 px-4 sm:px-6 xxl:px-0 font-acumin">
+        <li className="flex">
+          <div className="flex items-center">
+            <a href="/" className="text-white text-[17px] font-semibold hover:text-gray-100 transition">
+              Home
+            </a>
+          </div>
+        </li>
+        {links.map((page) => (
+          <li key={page.label} className="flex">
+            <div className="flex items-center">
+              <svg
+                className="h-5 w-5 flex-shrink-0 text-gray-300"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                aria-hidden="true"
+              >
+                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+              </svg>
+              <a
+                href={page.url}
+                className="ml-4 text-white text-[17px] font-semibold hover:text-gray-100 transition"
+                aria-current={page.current ? 'page' : undefined}
+              >
+                {page.label}
+              </a>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  )
+
+}

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

@@ -0,0 +1,53 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import classNames from "@/utils/classnames"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-amber-400 text-stone-900 text-base font-bold font-acumin",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border bg-none hover:bg-amber-400 hover:text-black border-amber-400 font-semibold",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-11 px-6 py-4 rounded-[3px]",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-[60px] px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    return (
+      <button
+        className={classNames(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

deployment/frontend/src/components/search/Pagination.tsx → deployment/frontend/src/components/_shared/Pagination.tsx

@@ -5,7 +5,7 @@ export default function Pagination() {
     <div className="flex items-center justify-between bg-white py-3">
       <div className="flex sm:flex-1 sm:items-center sm:justify-between mx-auto">
         <div>
-          <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+          <nav className="isolate inline-flex -space-x-px rounded-md" aria-label="Pagination">
             <a
               href="#"
               className="relative inline-flex items-center rounded-l-md px-2 py-2 text-black  ring-inset  hover:bg-gray-50 focus:z-20 focus:outline-offset-0"

deployment/frontend/src/components/topics/Hero.tsx

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import { Button } from "../_shared/Button";
+import { ChevronLeftIcon } from "@heroicons/react/20/solid";
+import { useState } from "react";
+import { ClipboardDocumentIcon } from "@heroicons/react/24/outline";
+
+export function Hero() {
+  return (
+    <div className="mx-auto mb-8 mt-10 grid max-w-[1440px] max-h-[18.5rem] font-acumin lg:mb-16 lg:grid-cols-5">
+      <div className="relative h-[18.5rem] lg:col-span-2">
+        <Image alt="Topic name" fill={true} src="/images/topics/1.png" />
+        <div className="absolute bottom-0 z-10 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>
+      <div className="flex flex-col gap-y-1 px-6 py-6 lg:col-span-3">
+        <div className="text-[33px] font-bold text-black">Topic 1</div>
+        <div className="max-w-[578.85px] text-lg font-light text-black">
+          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.
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="text-base font-light text-black">363 Datasets</div>
+          <div className="h-[18px] w-[1px] border border-black"></div>
+          <div className="text-base font-light text-black">6 Subtopics</div>
+        </div>
+        <CopyLink />
+      </div>
+    </div>
+  );
+}
+
+function CopyLink() {
+  const [clicked, setClicked] = useState(false);
+  return (
+    <>
+      {clicked ? (
+        <Button
+          onClick={() => setClicked(!clicked)}
+          variant="outline"
+          className="mr-auto mt-3"
+        >
+          Share Topic
+        </Button>
+      ) : (
+        <button
+          onClick={() => setClicked(!clicked)}
+          className="flex h-auto max-w-[578px] gap-2 rounded-sm border border-amber-400 px-5 py-3 mt-3"
+        >
+          <ClipboardDocumentIcon className="h-6 w-6 text-gray-800" />
+          <div className="max-w-[30rem]">
+            <p className="font-semibold text-black text-start text-sm">Link copied to clipboard</p>
+            <p className="font-light text-start text-sm">
+              Make sure that the users who you are sharing the collection with,
+              have permissions to see it.
+            </p>
+          </div>
+        </button>
+      )}
+    </>
+  );
+}

deployment/frontend/src/components/topics/SubtopicCard.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Image from 'next/image'
+
+export interface SubtopicProps {
+  title: string,
+  numOfDatasets: number,
+  img: string
+}
+
+export default function SubtopicCard({ subtopic }: { subtopic: SubtopicProps }) {
+  return (
+    <div className='flex flex-col w-full font-acumin gap-1'>
+      <div className='relative w-full md:w-56 h-44'>
+        <Image src={`${subtopic.img}`} alt="higlight" fill />
+      </div>
+      <div className="text-black text-lg font-normal">{subtopic.title}</div>
+      <div className="text-black text-sm font-normal">{subtopic.numOfDatasets} Datasets</div>
+    </div>
+  )
+}

deployment/frontend/src/components/topics/Subtopics.tsx

@@ -0,0 +1,115 @@
+import { SwiperSlide } from "swiper/react";
+import Carousel from "../Carousel";
+import SubtopicCard from "./SubtopicCard";
+import CarouselNavButton from "../_shared/CarouselNavButton";
+
+const subtopics = [
+  {
+    title: "Subtopic 1",
+    numOfDatasets: 163,
+    img: "/images/topics/2.png",
+  },
+  {
+    title: "Subtopic 2",
+    numOfDatasets: 163,
+    img: "/images/topics/3.png",
+  },
+  {
+    title: "Subtopic 3",
+    numOfDatasets: 163,
+    img: "/images/topics/4.png",
+  },
+  {
+    title: "Subtopic 4",
+    numOfDatasets: 163,
+    img: "/images/topics/5.png",
+  },
+  {
+    title: "Subtopic 5",
+    numOfDatasets: 163,
+    img: "/images/topics/6.png",
+  },
+  {
+    title: "Subtopic 6",
+    numOfDatasets: 163,
+    img: "/images/topics/7.png",
+  },
+  {
+    title: "Subtopic 7",
+    numOfDatasets: 163,
+    img: "/images/topics/2.png",
+  },
+  {
+    title: "Subtopic 8",
+    numOfDatasets: 163,
+    img: "/images/topics/3.png",
+  },
+  {
+    title: "Subtopic 9",
+    numOfDatasets: 163,
+    img: "/images/topics/4.png",
+  },
+];
+export default function Subtopics() {
+  return (
+    <section
+      id="subtopics"
+      className=" mx-auto mt-8 flex  max-w-[1380px] flex-col gap-y-6 px-4 font-acumin sm:px-6 lg:mt-16 xxl:px-0"
+    >
+      <h1 className="font-['Acumin Pro SemiCondensed'] truncate whitespace-normal text-2xl font-semibold text-black">
+        Subtopics
+      </h1>
+      <div className="relative">
+        <div className="peer">
+          <Carousel
+            identifier="subtopics"
+            breakpoints={{
+              1: {
+                slidesPerView: 1,
+                slidesPerGroup: 1,
+              },
+              450: {
+                slidesPerView: 2,
+                slidesPerGroup: 2,
+              },
+              720: {
+                slidesPerView: 3,
+                slidesPerGroup: 3,
+              },
+              1024: {
+                slidesPerView: 4,
+                slidesPerGroup: 4,
+              },
+              1240: {
+                slidesPerView: 5,
+                slidesPerGroup: 5,
+              },
+              1440: {
+                slidesPerView: 6,
+                slidesPerGroup: 6,
+              },
+            }}
+          >
+            {subtopics.map((subtopic, index) => {
+              return (
+                <SwiperSlide key={index} className="">
+                  <SubtopicCard subtopic={subtopic} />
+                </SwiperSlide>
+              );
+            })}
+          </Carousel>
+        </div>
+        <div
+          className={`nav-prev-button--subtopics absolute top-[35%] z-50 ml-[-1.9rem] hidden -translate-y-2/4 opacity-0 transition-all hover:opacity-100 peer-hover:opacity-100 md:left-0 lg:block`}
+        >
+          <CarouselNavButton orientation="left" />
+        </div>
+        <div
+          className={`nav-next-button--subtopics absolute top-[35%] z-50 mr-[-1.9rem] hidden -translate-y-2/4 opacity-0 transition-all hover:opacity-100 peer-hover:opacity-100 md:right-0 lg:block`}
+        >
+          <CarouselNavButton orientation="right" />
+        </div>
+      </div>
+    </section>
+  );
+}

deployment/frontend/src/pages/advanced_search.tsx

@@ -1,10 +1,10 @@
 import Search from "@/components/Search";
 import Footer from "@/components/_shared/Footer";
 import Header from "@/components/_shared/Header";
+import Pagination from "@/components/_shared/Pagination";
 import DatasetHorizontalCard from "@/components/search/DatasetHorizontalCard";
 import FilteredSearchLayout from "@/components/search/FilteredSearchLayout";
 import FiltersSelected from "@/components/search/FiltersSelected";
-import Pagination from "@/components/search/Pagination";
 import SortBy from "@/components/search/SortBy";
 
 export default function SearchPage() {