Skip to content

Commit

Permalink
multiselects
Browse files Browse the repository at this point in the history
  • Loading branch information
@anamontiaga
anamontiaga committed Oct 4, 2023
1 parent 1c78e9a commit a338535
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 15 deletions.
15 changes: 6 additions & 9 deletions src/components/ui/multiselect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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">
Expand Down
59 changes: 53 additions & 6 deletions src/containers/stories-page/list/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';

Expand All @@ -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}>
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@ module.exports = {
200: '#FBE4C9',
400: '#F0B884',
},
cream: {
400: '#F9F7F3',
},
forest: {
200: '#C1ECD2',
400: '#60CBA5',
Expand Down

0 comments on commit a338535

Please sign in to comment.