From 89c71c0375e7b9a876f21e969ddc0a0d871f664a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Le=CC=81o?= Date: Thu, 22 Feb 2024 15:42:10 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=93=B1=20Fix=20header=20menu=20&=20di?= =?UTF-8?q?rectory=20filter=20responsive?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layout/HomeHeader.tsx | 84 +++++++++++++++----------- src/components/Search/SearchFacet.tsx | 86 +++++++++++++++------------ src/pages/annuaire/index.tsx | 80 ++++++++++++++----------- 3 files changed, 144 insertions(+), 106 deletions(-) diff --git a/src/components/Layout/HomeHeader.tsx b/src/components/Layout/HomeHeader.tsx index 8340973..031ef47 100644 --- a/src/components/Layout/HomeHeader.tsx +++ b/src/components/Layout/HomeHeader.tsx @@ -1,15 +1,15 @@ -import { Fragment } from 'react' -import { Popover, Transition } from '@headlessui/react' -import { MenuIcon, XIcon } from '@heroicons/react/outline' -import { SearchIcon } from '@heroicons/react/solid' -import { navigationEntries } from './Navbar' -import { Link } from '../Links' -import { PrimaryButton } from '../Buttons' -import { useSearchFichesForm } from '../../utils/hooks' -import { LogoFull, LogoIcon } from '../Logos' +import { Fragment } from 'react'; +import { Popover, Transition } from '@headlessui/react'; +import { MenuIcon, XIcon } from '@heroicons/react/outline'; +import { SearchIcon } from '@heroicons/react/solid'; +import { navigationEntries } from './Navbar'; +import { Link } from '../Links'; +import { PrimaryButton } from '../Buttons'; +import { useSearchFichesForm } from '../../utils/hooks'; +import { LogoFull, LogoIcon } from '../Logos'; const SearchForm = () => { - const { handleSubmit, onChange, value } = useSearchFichesForm() + const { handleSubmit, onChange, value } = useSearchFichesForm(); return (
@@ -33,15 +33,15 @@ const SearchForm = () => { Rechercher
- ) -} + ); +}; export const HomeHeader = () => (
-
+
-
+

- Logo ARS - Logo gouvernement + Logo ARS + Logo gouvernement

@@ -95,17 +101,13 @@ export const HomeHeader = () => ( focus className="absolute top-0 inset-x-0 p-2 transition origin-top-right md:hidden z-10" > -
+
- + Close main menu @@ -131,14 +133,18 @@ export const HomeHeader = () => (

- Ressources
Santé et Précarité{' '} - Auvergne Rhône Alpes + + Ressources
+ Santé et Précarité + {' '} + + Auvergne Rhône Alpes +

-

- Ce site se veut être un outil pratique à destination des professionnels de santé. - Par un système de mots clés, vous serez orientés vers des fiches thématiques. +

+ Ce site se veut être un outil pratique à destination des + professionnels de santé. Par un système de mots clés, vous serez + orientés vers des fiches thématiques.

@@ -147,8 +153,16 @@ export const HomeHeader = () => (

- Logo ARS - Logo gouvernement + Logo ARS + Logo gouvernement

@@ -159,4 +173,4 @@ export const HomeHeader = () => (
-) +); diff --git a/src/components/Search/SearchFacet.tsx b/src/components/Search/SearchFacet.tsx index 9af70ca..efb5307 100644 --- a/src/components/Search/SearchFacet.tsx +++ b/src/components/Search/SearchFacet.tsx @@ -1,31 +1,28 @@ -import { useRefinementList } from 'react-instantsearch-hooks' -import { Fragment } from 'react' -import { Listbox, Transition } from '@headlessui/react' -import { CheckIcon, SelectorIcon } from '@heroicons/react/solid' -import classNames from 'classnames' -import type { RefinementListItem } from 'instantsearch.js/es/connectors/refinement-list/connectRefinementList' -import { ClassNameProp } from '../../types/react' +import { Listbox, Transition } from '@headlessui/react'; +import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'; +import classNames from 'classnames'; +import type { RefinementListItem } from 'instantsearch.js/es/connectors/refinement-list/connectRefinementList'; +import { Fragment } from 'react'; +import { useRefinementList } from 'react-instantsearch-hooks'; +import { ClassNameProp } from '../../types/react'; type SearchFacetProps = { - attribute: string, - label: string, - getItemLabel?: (item: RefinementListItem) => string, - getItemClassName?: (item: RefinementListItem) => string, + attribute: string; + label: string; + getItemLabel?: (item: RefinementListItem) => string; + getItemClassName?: (item: RefinementListItem) => string; } & ClassNameProp; export const SearchFacet = ({ attribute, className, label, - getItemLabel = item => item.label, + getItemLabel = (item) => item.label, getItemClassName = () => 'bg-gray-light text-blue-default', }: SearchFacetProps) => { - const { - items, - refine, - } = useRefinementList({ attribute, limit: 1000 }) + const { items, refine } = useRefinementList({ attribute, limit: 1000 }); - const refinedItems = items.filter(item => item.isRefined) + const refinedItems = items.filter((item) => item.isRefined); return ( {({ open }) => ( @@ -33,22 +30,28 @@ export const SearchFacet = ({ {label}
- - {refinedItems.length - ? refinedItems.map(item => ( + + {refinedItems.length ? ( + refinedItems.map((item) => ( {getItemLabel(item)} - )) : {label}} + )) + ) : ( + {label} + )} - @@ -63,23 +66,32 @@ export const SearchFacet = ({ {items.map((item) => ( classNames( - active - ? getItemClassName(item) - : 'text-gray-900', - 'cursor-default select-none relative py-2 pl-3 pr-9', - )} + className={({ active }) => + classNames( + active ? getItemClassName(item) : 'text-gray-900', + 'cursor-default select-none relative py-2 pl-3 pr-9' + ) + } value={item.value} > - {({ - active, - }) => ( + {({ active }) => ( <>
- + {getItemLabel(item)} - + ({item.count})
@@ -88,7 +100,7 @@ export const SearchFacet = ({
-) +); export default function Annuaire() { return ( @@ -44,27 +47,38 @@ export default function Annuaire() {
-

Annuaire

+

+ Annuaire +

- - +
types[item.value as StructureType].nom} - getItemClassName={item => types[item.value as StructureType].colorClassname} - className="relative w-full bg-white border border-gray-default rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-default focus:border-blue-default sm:text-sm" + getItemLabel={(item) => + types[item.value as StructureType].nom + } + getItemClassName={(item) => + types[item.value as StructureType].colorClassname + } + className="relative w-full bg-white border border-gray-default rounded-md shadow-sm pl-3 md:pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-default focus:border-blue-default sm:text-sm" />
( - } /> + } + /> )} /> @@ -72,13 +86,11 @@ export default function Annuaire() {
- ) + ); } -export const getStaticProps: GetStaticProps = async ({ - preview, -}) => ({ +export const getStaticProps: GetStaticProps = async ({ preview }) => ({ props: { preview: preview || isPreviewForced, }, -}) +}); From 0915c20498cff62a968ca3c456f238b43223fe25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Le=CC=81o?= Date: Thu, 22 Feb 2024 20:08:11 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=93=B1=20Simplify=20review?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layout/HomeHeader.tsx | 2 +- src/components/Search/SearchFacet.tsx | 2 +- src/pages/annuaire/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Layout/HomeHeader.tsx b/src/components/Layout/HomeHeader.tsx index 031ef47..81f0ff0 100644 --- a/src/components/Layout/HomeHeader.tsx +++ b/src/components/Layout/HomeHeader.tsx @@ -41,7 +41,7 @@ export const HomeHeader = () => (
-
+