Skip to content

Commit

Permalink
feat: homepage
Browse files Browse the repository at this point in the history
Signed-off-by: Maud Royer <hello@maudroyer.fr>
  • Loading branch information
jillro committed Oct 14, 2024
1 parent d838d6e commit 0f7c99d
Show file tree
Hide file tree
Showing 12 changed files with 275 additions and 24 deletions.
Binary file added public/placeholder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/app/(container)/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { fr } from "@codegouvfr/react-dsfr";

export default function ContainerLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<main className={fr.cx("fr-container", "fr-pt-2w", "fr-pb-8w")}>
{children}
</main>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { afterEach, describe, expect, test } from "vitest";
import { cleanup, screen, within } from "@testing-library/react";
import HTMLParser from "node-html-parser";

import DsfrLeafletSection from "@/app/medicament/[CIS]/DsfrLeafletSection";
import DsfrLeafletSection from "@/app/(container)/medicament/[CIS]/DsfrLeafletSection";
import { renderServerComponent } from "@/testsUtils/renderServerComponent";

describe("DsfrLeafletSection", () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
isEmptyTextNode,
isHtmlElement,
isListItem,
} from "@/app/medicament/[CIS]/leafletUtils";
} from "@/app/(container)/medicament/[CIS]/leafletUtils";
import { getLeafletImage } from "@/db";

async function DsfrLeafletElement({ node }: { node: HTMLElement }) {
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ import { parse as csvParse } from "csv-parse/sync";

import { pdbmMySQL } from "@/db/pdbmMySQL";
import liste_CIS_MVP from "@/liste_CIS_MVP.json";
import DsfrLeafletSection from "@/app/medicament/[CIS]/DsfrLeafletSection";
import { isHtmlElement } from "@/app/medicament/[CIS]/leafletUtils";
import DsfrLeafletSection from "@/app/(container)/medicament/[CIS]/DsfrLeafletSection";
import { isHtmlElement } from "@/app/(container)/medicament/[CIS]/leafletUtils";
import {
dateShortFormat,
displayComposants,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function getAtc(CIS: string) {

const SubstanceResult = ({ item }: { item: SubstanceNom }) => (
<li className={fr.cx("fr-mb-3w")}>
<Link href={`/substance/${item.NomId}`}>
<Link href={`/src/app/substance/${item.NomId}`}>
<ListItemButton sx={{ py: "0.125rem" }}>
<ListItemText
disableTypography
Expand Down Expand Up @@ -115,7 +115,7 @@ const MedicamentGroupResult = async ({
{item.specialites?.map((specialite, i) => (
<li key={i} className={fr.cx("fr-py-0")}>
<Divider sx={{ py: 0 }} />
<Link href={`/medicament/${specialite.SpecId}`}>
<Link href={`/src/app/medicament/${specialite.SpecId}`}>
<ListItemButton sx={{ py: "0.125rem" }}>
<ListItemText
disableTypography
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export default async function Page({
<ul>
{specialites?.map((specialite) => (
<li key={specialite.SpecId}>
<Link href={`/medicament/${specialite.SpecId}`}>
<Link href={`/src/app/medicament/${specialite.SpecId}`}>
{formatSpecName(specialite.SpecDenom01)}
</Link>
</li>
Expand Down
14 changes: 8 additions & 6 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
import { Header } from "@codegouvfr/react-dsfr/Header";
import { Footer } from "@codegouvfr/react-dsfr/Footer";
import { Notice } from "@codegouvfr/react-dsfr/Notice";
import { fr } from "@codegouvfr/react-dsfr";

import { defaultColorScheme } from "@/app/defaultColorScheme";
import { StartDsfr } from "@/app/StartDsfr";

import "@/customIcons/customIcons.css";
import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui";
import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";

export const metadata: Metadata = {
title: "Infomédicament",
title: "Info Médicament",
};

export default function RootLayout({
Expand Down Expand Up @@ -70,11 +70,13 @@ export default function RootLayout({
}}
serviceTitle="" // hack pour que la tagline soit bien affichée
serviceTagline="La référence officielle sur les données des médicaments"
quickAccessItems={[headerFooterDisplayItem]}
/>
{children}
<Footer
accessibility={"non compliant"}
bottomItems={[headerFooterDisplayItem]}
/>
<main className={fr.cx("fr-container", "fr-pt-2w", "fr-pb-8w")}>
{children}
</main>
<Footer accessibility={"non compliant"} />
</MuiDsfrThemeProvider>
</DsfrProvider>
</body>
Expand Down
247 changes: 238 additions & 9 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,246 @@
import Image from "next/image";
import { fr } from "@codegouvfr/react-dsfr";
import AutocompleteSearch from "@/components/AutocompleteSearch";
import Link from "next/link";
import Card from "@codegouvfr/react-dsfr/Card";

export default async function Page() {
return (
<div className={fr.cx("fr-grid-row")}>
<div className={fr.cx("fr-col-12", "fr-col-lg-9", "fr-col-md-10")}>
<form action="/rechercher">
<h1 className={fr.cx("fr-h5")}>
Quel médicament cherchez-vous&nbsp;?
</h1>
<AutocompleteSearch inputName="s" />
</form>
<>
<div className={fr.cx("fr-container", "fr-pt-4w", "fr-pb-4w")}>
<div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
<div className={fr.cx("fr-col-12", "fr-col-lg-9", "fr-col-md-10")}>
<form action="/rechercher">
<h1 className={fr.cx("fr-h4")}>
Comprenez tout sur vos médicaments
</h1>
<AutocompleteSearch inputName="s" className={fr.cx("fr-mb-2w")} />
<p className="fr-text--xs">
<em>
Vous pouvez chercher un médicament, une molécule (ex&nbsp;:
paracétamol), une pathologie (ex&nbsp;: anxiété) ou un type de
médicaments (ex&nbsp;: antibiotique, contraceptif...)
</em>
</p>
</form>
</div>
<div className={fr.cx("fr-col-md-12", "fr-mt-4w")}>
<h2 className={fr.cx("fr-h4")}>
Vos questions sur les médicaments
</h2>
</div>
<div className={fr.cx("fr-col-md-6")}>
<p>
<Link
href="#"
className={fr.cx(
"fr-link",
"fr-link--icon-left",
"fr-icon-arrow-right-line",
)}
>
Je suis enceinte, quelles précautions prendre&nbsp;?
</Link>
</p>
<p>
<Link
href="#"
className={fr.cx(
"fr-link",
"fr-link--icon-left",
"fr-icon-arrow-right-line",
)}
>
Je ne me sens plus malade, est ce que je peux arrêter mon
traitement&nbsp;?
</Link>
</p>
<p>
<Link
href="#"
className={fr.cx(
"fr-link",
"fr-link--icon-left",
"fr-icon-arrow-right-line",
)}
>
Dois-je me faire vacciner contre la grippe saisonnière&nbsp;?
</Link>
</p>
<p>
<Link
href="#"
className={fr.cx(
"fr-link",
"fr-link--icon-left",
"fr-icon-arrow-right-line",
)}
>
Que faire si j&apos;ai des effets indésirables&nbsp;?
</Link>
</p>
<p>
<Link
href="#"
className={fr.cx(
"fr-link",
"fr-link--icon-left",
"fr-icon-arrow-right-line",
)}
>
Numéros d&apos;urgence
</Link>
</p>
</div>
<div
className={fr.cx(
"fr-col-md-6",
"fr-hidden",
"fr-unhidden-xl",
"fr-unhidden-lg",
"fr-unhidden-md",
)}
>
<Image
src="/placeholder.png"
alt="Placeholder"
className={fr.cx("fr-responsive-img")}
width={3000}
height={1695}
/>
</div>
<div className={fr.cx("fr-col-md-12", "fr-mt-4w")}>
<h2 className={fr.cx("fr-h4")}>Dossiers</h2>
</div>
<div className={fr.cx("fr-col-md-6")}>
<Card
enlargeLink
detail="Publié le 13 avril 2025"
title="Pourquoi les antibiotiques ne sont-ils pas automatiques&nbsp;?"
titleAs="h3"
desc="C'est bien connu, les antibiotiques ça ne guérit pas tout. Pour tout savoir..."
linkProps={{ href: "#" }}
/>
</div>
<div className={fr.cx("fr-col-md-6")}>
<Card
enlargeLink
detail="Publié le 13 avril 2025"
title="Que faire pour soulager la douleur&nbsp;?"
titleAs="h3"
desc="De nombreuses possibilités existent pour soulager la douleur&nbsp;: les antalgiques ou médicaments qui agissent directement sur la douleur."
linkProps={{ href: "#" }}
/>
</div>
<div className={fr.cx("fr-col-md-12", "fr-mt-4w")}>
<h2 className={fr.cx("fr-h4")}>Nos missions</h2>
</div>
<div className={fr.cx("fr-col-md-4")}>
<Card
enlargeLink
imageUrl={"/placeholder.png"}
imageAlt="Placeholder"
title="Rendre claires les notices"
titleAs="h3"
desc="Simplifier la compréhension des notices de médicaments"
linkProps={{ href: "#" }}
/>
</div>
<div className={fr.cx("fr-col-md-4")}>
<Card
enlargeLink
imageUrl={"/placeholder.png"}
imageAlt="Placeholder"
title="Mieux informer"
titleAs="h3"
desc="Informer sur les médicaments pour améliorer le suivi des traitements par les patient⋅es"
linkProps={{ href: "#" }}
/>
</div>
<div className={fr.cx("fr-col-md-4")}>
<Card
enlargeLink
imageUrl={"/placeholder.png"}
imageAlt="Placeholder"
title="Partager les données"
titleAs="h3"
desc="Faciliter l’accès à aux données sur les médicaments notamment via une API publique"
linkProps={{ href: "#" }}
/>
</div>
</div>
</div>
</div>
<div
style={{
backgroundColor:
fr.colors.decisions.background.alt.blueFrance.default,
}}
>
<div className={fr.cx("fr-container", "fr-pt-2w", "fr-pb-4w")}>
<div
className={fr.cx(
"fr-grid-row",
"fr-mt-4w",
"fr-pb-8w",
"fr-mb-n8v",
)}
>
<div className={fr.cx("fr-col-md-8")}>
<h2 className={fr.cx("fr-h5")}>Qui sommes-nous&nbsp;?</h2>
<p>
<b>
<Link href="https://infomedicament.beta.gouv.fr">
Info Médicament
</Link>
</b>{" "}
est un service public gratuit proposé par l’État qui vise à
améliorer l’accès à des informations fiables et compréhensibles
sur les médicaments.
</p>
<p>
Ce service répond à plusieurs enjeux cruciaux : la lutte contre
la désinformation, la réduction du mésusage des médicaments et
la responsabilisation des patient·es dans la gestion de leur
santé.
</p>
<p>
<b>
<Link href="https://infomedicament.beta.gouv.fr">
Info Médicament
</Link>
</b>{" "}
est le service numérique de référence d’informations sur les
médicaments et fournit aux patient·es et aux professionnel·les
de santé des données actualisées et validées sur les
médicaments.
</p>
</div>
<div className={fr.cx("fr-col-md-8", "fr-mt-4w")}>
<h2 className={fr.cx("fr-h5")}>L&apos;équipe</h2>
<ul>
<li>
ANSM&nbsp;:{" "}
<Link href="https://infomedicament.beta.gouv.fr">
Info Médicament
</Link>{" "}
est porté par l’Agence Nationale de Sécurité du Médicament et
des produits de santé.
</li>
<li>
<Link href="https://beta.gouv.fr">beta.gouv.fr</Link>&nbsp;:
<Link href="https://infomedicament.beta.gouv.fr">
InfoMedicament.beta.gouv.fr
</Link>{" "}
est une start-up d’État du programme Beta.gouv.fr de la
Direction interministérielle du numérique (DINUM), qui
accompagne les administrations dans la construction de
services numériques.
</li>
</ul>
</div>
</div>
</div>
</div>
</>
);
}
11 changes: 9 additions & 2 deletions src/components/AutocompleteSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,17 +84,24 @@ function SearchInput({
export default function AutocompleteSearch({
inputName,
initialValue,
className: parentClassName,
}: {
inputName: string;
initialValue?: string;
className?: string;
}) {
const router = useRouter();
return (
<SearchBar
label={"Quel médicament cherchez-vous ?"}
onButtonClick={(search: string) => router.push(`/rechercher?s=${search}`)}
renderInput={(props) => (
<SearchInput {...props} name={inputName} initialValue={initialValue} />
renderInput={({ className, ...props }) => (
<SearchInput
{...props}
className={cx(className, parentClassName)}
name={inputName}
initialValue={initialValue}
/>
)}
/>
);
Expand Down

0 comments on commit 0f7c99d

Please sign in to comment.