-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #32 from wri/search_page
Search page
- Loading branch information
Showing
21 changed files
with
2,607 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { Fragment, useState } from 'react' | ||
| import { Listbox, Transition } from '@headlessui/react' | ||
| import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid' | ||
| import classNames from '@/utils/classnames'; | ||
|
|
||
| interface Option { | ||
| id: number; | ||
| label: string; | ||
| } | ||
|
|
||
| export default function Select({options}: {options: Option[]}) { | ||
| const [selected, setSelected] = useState(options[0] ? options[0] : {id: 0, label: ''}) | ||
|
|
||
| return ( | ||
| <Listbox value={selected} onChange={setSelected}> | ||
| {({ open }) => ( | ||
| <> | ||
| <div className="relative"> | ||
| <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1 pl-3 pr-8 text-left shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-wri-green sm:leading-6 text-black text-sm font-normal font-['Acumin Pro SemiCondensed']"> | ||
| <span className="block truncate">{selected.label}</span> | ||
| <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> | ||
| <ChevronUpDownIcon className="h-4 w-4 text-stone-600" aria-hidden="true" /> | ||
| </span> | ||
| </Listbox.Button> | ||
|
|
||
| <Transition | ||
| show={open} | ||
| as={Fragment} | ||
| leave="transition ease-in duration-100" | ||
| leaveFrom="opacity-100" | ||
| leaveTo="opacity-0" | ||
| > | ||
| <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"> | ||
| {options.map((option) => ( | ||
| <Listbox.Option | ||
| key={option.id} | ||
| className={({ active }) => | ||
| classNames( | ||
| active ? 'bg-wri-green text-white' : 'text-gray-900', | ||
| 'relative cursor-default select-none py-2 px-4' | ||
| ) | ||
| } | ||
| value={option} | ||
| > | ||
| {({ selected, active }) => ( | ||
| <> | ||
| <span className={classNames(selected ? 'font-semibold' : 'font-normal', 'block truncate')}> | ||
| {option.label} | ||
| </span> | ||
| </> | ||
| )} | ||
| </Listbox.Option> | ||
| ))} | ||
| </Listbox.Options> | ||
| </Transition> | ||
| </div> | ||
| </> | ||
| )} | ||
| </Listbox> | ||
| ) | ||
| } |
84 changes: 84 additions & 0 deletions
84
deployment/frontend/src/components/search/DatasetHorizontalCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { | ||
| ChartBarIcon, | ||
| ExclamationTriangleIcon, | ||
| GlobeAltIcon, | ||
| TableCellsIcon, | ||
| } from "@heroicons/react/20/solid"; | ||
| import { | ||
| ArrowPathIcon, | ||
| ClockIcon, | ||
| MapPinIcon, | ||
| } from "@heroicons/react/24/outline"; | ||
|
|
||
| export default function DatasetHorizontalCard() { | ||
| return ( | ||
| <div className="grid lg:grid-cols-5 gap-y-3 border-b-2 border-wri-green bg-white p-5 shadow-wri hover:bg-slate-100 transition"> | ||
| <div className="lg:col-span-4 col-span-full"> | ||
| <div className="pr-4"> | ||
| <p className="font-['Acumin Pro SemiCondensed'] text-xs font-bold uppercase leading-none tracking-wide text-wri-green"> | ||
| LAND AND CARBON LAB | ||
| </p> | ||
| <h3 className="font-['Acumin Pro SemiCondensed'] text-xl font-bold text-stone-900 mt-2"> | ||
| Title of the dataset goes here lorem ipsum. | ||
| </h3> | ||
| <p className="font-['Acumin Pro SemiCondensed'] text-base font-light text-stone-900"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta | ||
| sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla | ||
| sed consectetur. Nullam quis risus eget urna mollis ornare vel eu | ||
| leo. | ||
| </p> | ||
| <div className="mt-[0.33rem] flex justify-start gap-x-3"> | ||
| <div className="flex flex-row items-center gap-x-1"> | ||
| <ArrowPathIcon className="h-3 w-3 text-blue-800" /> | ||
| <p className="font-['Acumin Pro SemiCondensed'] text-xs sm:text-sm font-light leading-snug text-stone-900"> | ||
| 2 Feb 2023 | ||
| </p> | ||
| </div> | ||
| <div className="flex items-center gap-x-1"> | ||
| <ClockIcon className="h-3 w-3 text-blue-800" /> | ||
| <p className="font-['Acumin Pro SemiCondensed'] text-xs sm:text-sm font-light leading-snug text-stone-900"> | ||
| 2020 - 2023 | ||
| </p> | ||
| </div> | ||
| <div className="flex items-center gap-x-1"> | ||
| <MapPinIcon className="h-3 w-3 text-blue-800" /> | ||
| <p className="font-['Acumin Pro SemiCondensed'] text-xs sm:text-sm font-light leading-snug text-stone-900"> | ||
| Sub-Regional | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="mt-4 flex justify-start gap-x-3"> | ||
| <div className="border-r border-black pr-3 flex justify-start gap-x-3 | ||
| "> | ||
| <div className="rounded-full bg-stone-100 p-1"> | ||
| <ChartBarIcon className="h-5 w-5 text-blue-700" /> | ||
| </div> | ||
| <div className="rounded-full bg-stone-100 p-1"> | ||
| <GlobeAltIcon className="h-5 w-5 text-emerald-700" /> | ||
| </div> | ||
| <div className="rounded-full bg-stone-100 p-1"> | ||
| <TableCellsIcon className="h-5 w-5 text-green-600" /> | ||
| </div> | ||
| </div> | ||
| <div className="rounded-full bg-stone-100 p-1"> | ||
| <ExclamationTriangleIcon className="h-5 w-5 text-yellow-600" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="lg:col-span-1 col-span-full lg:border-l border-t lg:border-t-0 border-stone-200 w-full"> | ||
| <div className="flex lg:flex-col gap-[5px] lg:pl-5 pt-3 lg:pt-0"> | ||
| <span className="flex h-7 w-fit items-center justify-center rounded-sm bg-wri-light-green px-3 text-center text-xs font-normal text-black"> | ||
| <span className="my-auto">TIFF</span> | ||
| </span> | ||
| <span className="flex h-7 w-fit items-center justify-center rounded-sm bg-wri-light-yellow px-3 text-center text-xs font-normal text-black"> | ||
| <span className="my-auto">CSV</span> | ||
| </span> | ||
| <span className="flex h-7 w-fit items-center justify-center rounded-sm bg-wri-light-blue px-3 text-center text-xs font-normal text-black"> | ||
| <span className="my-auto">GeoJSON</span> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { Disclosure, Transition } from "@headlessui/react"; | ||
| import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid"; | ||
|
|
||
| interface Option { | ||
| value: string; | ||
| label: string; | ||
| } | ||
|
|
||
| export default function Facet({ | ||
| text, | ||
| options, | ||
| }: { | ||
| text: string; | ||
| options: Option[]; | ||
| }) { | ||
| return ( | ||
| <Disclosure as="div" className="border-b border-r border-stone-200 shadow"> | ||
| {({ open }) => ( | ||
| <> | ||
| <Disclosure.Button className="flex h-16 w-full items-center gap-x-2 bg-white px-7 py-6"> | ||
| <div className="flex h-16 w-full items-center gap-x-2"> | ||
| <p className="font-['Acumin Pro SemiCondensed'] text-base font-normal text-black"> | ||
| {text} | ||
| </p> | ||
| <span className="flex h-5 w-5 items-center justify-center rounded-full bg-amber-400 p-1 text-xs font-normal text-black"> | ||
| 2 | ||
| </span> | ||
| </div> | ||
| <ChevronDownIcon | ||
| className={`${ | ||
| open ? "rotate-180 transform transition" : "" | ||
| } h-5 w-5 text-purple-500`} | ||
| /> | ||
| </Disclosure.Button> | ||
| <Transition | ||
| enter="transition duration-100 ease-out" | ||
| enterFrom="transform scale-95 opacity-0" | ||
| enterTo="transform scale-100 opacity-100" | ||
| leave="transition duration-75 ease-out" | ||
| leaveFrom="transform scale-100 opacity-100" | ||
| leaveTo="transform scale-95 opacity-0" | ||
| > | ||
| <Disclosure.Panel className="border-t-2 border-amber-400 bg-white px-7 pb-2 text-sm text-gray-500"> | ||
| <fieldset> | ||
| <div className="mt-2"> | ||
| {options.map((option) => ( | ||
| <div | ||
| key={option.value} | ||
| className="relative flex items-start py-1" | ||
| > | ||
| <div className="mr-3 flex h-6 items-center"> | ||
| <input | ||
| id={`person-${option.value}`} | ||
| name={`person-${option.value}`} | ||
| type="checkbox" | ||
| className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" | ||
| /> | ||
| </div> | ||
| <div className="min-w-0 flex-1 text-sm leading-6"> | ||
| <label | ||
| htmlFor={`option-${option.value}`} | ||
| className="select-none font-medium text-gray-900" | ||
| > | ||
| {option.label} | ||
| </label> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </fieldset> | ||
| </Disclosure.Panel> | ||
| </Transition> | ||
| </> | ||
| )} | ||
| </Disclosure> | ||
| ); | ||
| } |
Oops, something went wrong.