-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
List attributes in database page (#215)
Be resilient to API issues for homepage and tools page Remove databases YAML and logos, as they are in the backend now Proper search and highlighting are in another PR
- Loading branch information
1 parent
28ab1bb
commit d2c514b
Showing
32 changed files
with
439 additions
and
400 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
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,83 @@ | ||
| 'use client'; | ||
|
|
||
| import { useState } from 'react'; | ||
| import { useRouter } from 'next/navigation'; | ||
| import SearchBar from '@codegouvfr/react-dsfr/SearchBar'; | ||
| import styles from '@/styles/home.module.scss'; | ||
| import { DiffusionDatabase } from './diffusionDatabase.type'; | ||
| import ImageNext from 'next/image'; | ||
| import Link from 'next/link'; | ||
|
|
||
| function FeaturedDatabases({ dbs }: { dbs: DiffusionDatabase[] }) { | ||
| return ( | ||
| <div className={styles.featuredDatabases}> | ||
| {dbs.map((db) => ( | ||
| <div | ||
| className={styles.featuredDatabases__item} | ||
| title={db.featured_summary || ''} | ||
| key={db.id} | ||
| > | ||
| <ImageNext | ||
| src={db.image_url || ''} | ||
| alt={db.name} | ||
| width="52" | ||
| height="52" | ||
| className={styles.featuredDatabases__item__logo} | ||
| placeholder="empty" | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function DatabaseSearchForm({ | ||
| dbs, | ||
| }: { | ||
| dbs: DiffusionDatabase[]; | ||
| }) { | ||
| const router = useRouter(); | ||
| const [query, setQuery] = useState(''); | ||
|
|
||
| const databaseCount = dbs.length; | ||
| const attributeCount = dbs.reduce((acc, db) => acc + db.attributes.length, 0); | ||
| const featuredDatabases = dbs.filter((db) => db.is_featured); | ||
|
|
||
| const handleSubmit = (text: string) => { | ||
| const search = text.trim(); | ||
| if (search !== '') { | ||
| router.push( | ||
| `/outils-services/rapprochement?search=${encodeURIComponent(search)}`, | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={styles.searchContainer__title}> | ||
| Recherchez parmi {attributeCount} attributs accessibles dans{' '} | ||
| {databaseCount} bases répertoriées | ||
| </div> | ||
| <SearchBar | ||
| label="Rechercher" | ||
| className={styles.searchBar} | ||
| big | ||
| onButtonClick={handleSubmit} | ||
| renderInput={({ className, id, type }) => ( | ||
| <input | ||
| className={className} | ||
| placeholder="Rechercher parmi les attributs répertoriés" | ||
| id={id} | ||
| type={type} | ||
| value={query} | ||
| onChange={(e) => setQuery(e.currentTarget.value)} | ||
| /> | ||
| )} | ||
| /> | ||
| <FeaturedDatabases dbs={featuredDatabases} /> | ||
| <Link href="/outils-services/rapprochement"> | ||
| Voir l'ensemble des bases contenant des ID-RNB | ||
| </Link> | ||
| </> | ||
| ); | ||
| } |
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,24 @@ | ||
| import ImageNext from 'next/image'; | ||
| import pivotIllu from '@/public/images/pivot-sentence.png'; | ||
| import pivotIlluMobile from '@/public/images/pivot-sentence-mobile.png'; | ||
|
|
||
| export default function PivotIllustration() { | ||
| return ( | ||
| <> | ||
| <div className="none md-block"> | ||
| <ImageNext | ||
| className="resp-image" | ||
| src={pivotIllu} | ||
| alt="Illustration d’un pivot" | ||
| /> | ||
| </div> | ||
| <div className="md-none"> | ||
| <ImageNext | ||
| className="resp-image" | ||
| src={pivotIlluMobile} | ||
| alt="Illustration d’un pivot" | ||
| /> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.