diff --git a/public/img/map.svg b/public/img/map.svg new file mode 100644 index 000000000..ba9f84bc6 --- /dev/null +++ b/public/img/map.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/page.tsx b/src/app/page.tsx index 354ea9e79..8f512fe76 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,6 +4,7 @@ import { Button } from '@codegouvfr/react-dsfr/Button' import Section from '@/components/Section' import SectionHero from '@/components/SectionHero' import SectionTilesList from '@/components/SectionTilesList' +import SectionSearchBAN from '@/components/SectionSearchBAN' import BlogGrid from '@/components/BlogGrid' import SectionQuotes from '@/components/SectionQuotes' import { getStats } from '@/lib/api-ban' @@ -53,6 +54,8 @@ export default async function Home() {

+ + - Découvrez tous les témoignages - Quelles communes ont mis à jour leur base ? + Découvrez tous les témoignages + Quelles communes ont mis à jour leur base ? ) diff --git a/src/components/SectionSearchBAN/SectionSearchBAN.stories.tsx b/src/components/SectionSearchBAN/SectionSearchBAN.stories.tsx new file mode 100644 index 000000000..d35ffe3c0 --- /dev/null +++ b/src/components/SectionSearchBAN/SectionSearchBAN.stories.tsx @@ -0,0 +1,24 @@ +import type { StoryObj } from '@storybook/react' + +import SectionSearchBAN from './SectionSearchBAN' + +const meta = { + title: 'Layout-Components/SectionSearchBAN', + component: SectionSearchBAN, + parameters: { + layout: 'fullscreen', + }, + tags: ['autodocs'], + argTypes: { + }, + args: { + }, +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + }, +} diff --git a/src/components/SectionSearchBAN/SectionSearchBAN.styles.tsx b/src/components/SectionSearchBAN/SectionSearchBAN.styles.tsx new file mode 100644 index 000000000..ba767256f --- /dev/null +++ b/src/components/SectionSearchBAN/SectionSearchBAN.styles.tsx @@ -0,0 +1,51 @@ +import styled from 'styled-components' + +export const Wrapper = styled.div` + min-height: 18rem; + display: flex; + gap: 3rem; + padding: 2rem 0; + + flex-direction: column; + @media screen and (min-width: 768px) { + flex-direction: row; + } +` + +export const FormWrapper = styled.div` + display: flex; + flex-direction: column; + width: 100%; +` + +export const FormWrapperFooter = styled.footer` + padding: 1.5rem 0 1rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + + flex-direction: column; + align-items: flex-start; + + @media screen and (min-width: 768px) { + flex-direction: row; + align-items: center; + } +` + +export const IntroWrapper = styled.div` + display: block; + text-align: center; + max-width: 25rem; +` + +export const Title = styled.h2` + font-size: 1.5rem; + margin-bottom: 0.2em; +` + +export const FormDescription = styled.div` + font-size: 1rem; + margin-bottom: .5em; +` diff --git a/src/components/SectionSearchBAN/SectionSearchBAN.tsx b/src/components/SectionSearchBAN/SectionSearchBAN.tsx new file mode 100644 index 000000000..a53d2eaf7 --- /dev/null +++ b/src/components/SectionSearchBAN/SectionSearchBAN.tsx @@ -0,0 +1,80 @@ +'use client' + +import { useState } from 'react' +import PropTypes from 'prop-types' +import Image from 'next/image' +import { SearchBar } from '@codegouvfr/react-dsfr/SearchBar' + +import Section from '@/components/Section' + +import { + Wrapper, + FormWrapper, + FormWrapperFooter, + IntroWrapper, + Title, + FormDescription, +} from './SectionSearchBAN.styles' + +interface InputSearchBANProps { + id?: string +} + +function InputSearch() { + const [search, onSearchChange] = useState('') + const [inputElement, setInputElement] = useState(null) + + return ( + <> + ( + onSearchChange(event.currentTarget.value)} + onKeyDown={(event) => { + if (event.key === 'Escape' && inputElement !== null) { + inputElement.blur() + } + }} + /> + )} + /> + {/* + -> Sample of search results : +

Search results for: {search}

+ */} + + + ) +} + +function SectionSearchBAN({ id }: InputSearchBANProps) { + return ( +
+ + + Votre adresse est elle bien renseignée ? + picto map + + + Recherchez dans la base adresse nationale + Saisissez votre adresse, une voie, un lieu-dit ou une commune + + + Consulter directement la carte + J’ai un soucis avec mon adresse, pourquoi ? + + + +
+ ) +} + +SectionSearchBAN.propTypes = {} + +export default SectionSearchBAN diff --git a/src/components/SectionSearchBAN/index.ts b/src/components/SectionSearchBAN/index.ts new file mode 100644 index 000000000..f2adca1e3 --- /dev/null +++ b/src/components/SectionSearchBAN/index.ts @@ -0,0 +1 @@ +export { default } from './SectionSearchBAN'