From a338535c3d3b5fd4cf0f71c635ccf44d63201b04 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Wed, 4 Oct 2023 12:37:22 +0200
Subject: [PATCH] multiselects

---
 src/components/ui/multiselect.tsx          | 15 +++---
 src/containers/stories-page/list/index.tsx | 59 +++++++++++++++++++---
 tailwind.config.js                         |  3 ++
 3 files changed, 62 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/multiselect.tsx b/src/components/ui/multiselect.tsx
index 1e6d9b61..bfd280b3 100644
--- a/src/components/ui/multiselect.tsx
+++ b/src/components/ui/multiselect.tsx
@@ -2,13 +2,11 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { Listbox, Transition } from '@headlessui/react';
 import { HiCheck } from 'react-icons/hi';
+import { HiChevronDown } from 'react-icons/hi2';
 
-import Icon from 'components/icon';
 import Loading from 'components/loading';
 import { cn } from 'utils/cn';
 
-import ARROW_FILLED_DOWN_SVG from 'svgs/ui/arrow-filled-down.svg?sprite';
-
 export interface MultiSelectProps {
   id: string | number;
   className?: string;
@@ -91,7 +89,7 @@ export const MultiSelect = (props: MultiSelectProps): JSX.Element => {
   }, [onSelect]);
 
   return (
-    <div className="w-full max-w-[185px] text-sm text-text">
+    <div className="w-full text-sm text-text">
       <Listbox
         as="div"
         className="space-y-1"
@@ -106,10 +104,9 @@ export const MultiSelect = (props: MultiSelectProps): JSX.Element => {
               <span className="inline-block w-full">
                 <Listbox.Button
                   className={cn({
-                    'relative w-full cursor-pointer rounded-lg border border-accents py-2.5 pl-4 text-left text-base leading-5 transition duration-150 ease-in-out':
+                    'relative w-full cursor-pointer rounded-lg bg-cream-400 py-5 pl-4 text-left text-base leading-5 transition duration-150 ease-in-out':
                       true,
                     'border-grey-0/40 text-grey-0/40 border': disabled,
-                    'bg-transparent': !!open,
                   })}
                 >
                   <span className="block truncate">{SELECTED}</span>
@@ -120,9 +117,9 @@ export const MultiSelect = (props: MultiSelectProps): JSX.Element => {
                       iconClassName="w-3 h-3"
                     />
 
-                    {!loading && open && <Icon icon={ARROW_FILLED_DOWN_SVG} className="h-2 w-3" />}
+                    {!loading && open && <HiChevronDown size={16} className="fill-gray-800" />}
                     {!loading && !open && (
-                      <Icon icon={ARROW_FILLED_DOWN_SVG} className="h-2 w-3 rotate-180" />
+                      <HiChevronDown size={16} className="rotate-180 fill-gray-800" />
                     )}
                   </span>
                 </Listbox.Button>
@@ -138,7 +135,7 @@ export const MultiSelect = (props: MultiSelectProps): JSX.Element => {
               >
                 <Listbox.Options
                   static
-                  className="overflow-y-auto bg-white text-base leading-6 focus:outline-none"
+                  className="overflow-y-auto bg-cream-400 text-base leading-6 focus:outline-none"
                 >
                   {(batchSelectionActive || clearSelectionActive) && (
                     <div className="flex space-x-5 px-5 pt-1 text-sm">
diff --git a/src/containers/stories-page/list/index.tsx b/src/containers/stories-page/list/index.tsx
index 55bab966..03e38550 100644
--- a/src/containers/stories-page/list/index.tsx
+++ b/src/containers/stories-page/list/index.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import useBreakpoint from 'use-breakpoint';
 
-import Hero from 'containers/home/common/hero';
 import StoryCard from 'containers/home/stories/list/story-card';
 import SampleComposition from 'containers/home/stories/samples/sample-composition';
 import Card from 'containers/home/stories/samples/sample-composition/sample-card';
@@ -12,6 +11,7 @@ import Media from 'containers/media';
 import Wrapper from 'containers/wrapper';
 
 import Button from 'components/button';
+import MultiSelect from 'components/ui/multiselect';
 import { IN_VIEW_PROPS } from 'constants/motion';
 import { BREAKPOINTS } from 'styles/styles.config';
 
@@ -20,16 +20,63 @@ import { STORIES } from './constants';
 const List = () => {
   const { minWidth } = useBreakpoint(BREAKPOINTS, 'md');
 
+  const STORY_TYPE_OPTIONS = [
+    { value: 'Factsheets', label: 'Factsheets' },
+    { value: 'News', label: 'News' },
+    { value: 'Stories from the ground', label: 'Stories from the ground' },
+  ];
+
+  const MEDIA_TYPE_OPTIONS = [
+    { value: 'Article', label: 'Article' },
+    { value: 'Clip', label: 'Clip' },
+    { value: 'Video', label: 'Video' },
+  ];
+
+  const COUNTRY_OPTIONS = [
+    { value: 'Dominican Republic', label: 'Dominican Republic' },
+    { value: 'Ghana', label: 'Ghana' },
+    { value: 'Panama', label: 'Panama' },
+    { value: 'Tanzania', label: 'Tanzania' },
+  ];
+
   return (
     <>
       <Media greaterThanOrEqual="md">
-        <div className="bg-gray-900 md:py-28">
+        <div className="bg-beige md:py-28">
           <Wrapper>
-            <div className="py-10 md:pb-28">
-              <Hero className="text-beige" subtitle="Want more examples?" />
-            </div>
-
             <div className="xl:grid xl:grid-cols-12">
+              <div className="flex flex-col space-y-4 xl:col-span-10 xl:col-start-2 mb-12">
+                <p className="text-gray-800 text-base">Filter by:</p>
+                <div className="flex space-x-3">
+                  <div className="xl:w-1/3">
+                    <MultiSelect
+                      id="story_type"
+                      placeholder="Story type"
+                      options={STORY_TYPE_OPTIONS}
+                      // values={filters.type}
+                      // onSelect={(v) => setFilters({ ...filters, pathways: v })}
+                    />
+                  </div>
+                  <div className="xl:w-1/3">
+                    <MultiSelect
+                      id="media_type"
+                      placeholder="Media type"
+                      options={MEDIA_TYPE_OPTIONS}
+                      // values={filters.type}
+                      // onSelect={(v) => setFilters({ ...filters, pathways: v })}
+                    />
+                  </div>
+                  <div className="xl:w-1/3">
+                    <MultiSelect
+                      id="country"
+                      placeholder="Country"
+                      options={COUNTRY_OPTIONS}
+                      // values={filters.type}
+                      // onSelect={(v) => setFilters({ ...filters, pathways: v })}
+                    />
+                  </div>
+                </div>
+              </div>
               <div className="flex flex-col space-y-4 xl:col-span-10 xl:col-start-2">
                 {STORIES.map((s) => (
                   <div key={s.id}>
diff --git a/tailwind.config.js b/tailwind.config.js
index caaf8f86..357dfe26 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -88,6 +88,9 @@ module.exports = {
         200: '#FBE4C9',
         400: '#F0B884',
       },
+      cream: {
+        400: '#F9F7F3',
+      },
       forest: {
         200: '#C1ECD2',
         400: '#60CBA5',