Skip to content

Commit

Permalink
finito indices
Browse files Browse the repository at this point in the history
  • Loading branch information
@arnaudambro
arnaudambro committed Jul 20, 2023
1 parent 737d3bd commit 5cc0bd8
Show file tree
Hide file tree
Showing 17 changed files with 711 additions and 436 deletions.
6 changes: 4 additions & 2 deletions frontend/src/components/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,20 @@ import Header from "./dashboard/Header";
import Indicators from "./dashboard/Indicators";
import ModalContext from "utils/ModalContext";
import { useLocalUser } from "hooks/useUser";
import Home from "components/Home";

export default function Dashboard(props) {
const [date, setDate] = useState();
const { setSubscription } = useContext(ModalContext);
const { mutateUser } = useLocalUser();
return (
<div className="relative mb-20 bg-gradient-to-r from-[#d1edff] via-[#f8fafd] to-[#d6eeff] pb-28 sm:mb-40">
<section className="relative mx-auto my-0 px-6 pt-10">
<div className="relative mb-20 sm:mb-40">
<section className="relative mx-auto my-0 bg-gradient-to-r from-[#d1edff] via-[#f8fafd] to-[#d6eeff] px-6 pb-28 pt-10 xl:pt-20 ">
<Header place={props.place} date={date} setDate={setDate} />
<Indicators place={props.place} date={date} />
<EpisodePollution place={props.place} date={date} />
</section>
<Home />
<div className="fixed bottom-0 left-0 right-0 z-50 flex items-center justify-center xl:hidden">
<button
type="button"
Expand Down
176 changes: 176 additions & 0 deletions frontend/src/components/Home.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import React from "react";
import { Link, useStaticQuery, graphql } from "gatsby";

import Newsletter from "components/Newsletter";

import Testimonies from "components/Testimonies";
import Markdown from "components/base/Markdown";

export default function Home() {
const queries = useStaticQuery(
graphql`
query {
dataSource: mdx(fields: { slug: { eq: "data-source" } }) {
body
}
about: mdx(fields: { slug: { eq: "about" } }) {
body
}
}
`
);

return (
<>
<Newsletter />
<Testimonies />
<section className="mx-auto mb-10 max-w-prose px-6 xl:mb-40 xl:max-w-6xl">
<h2>
Nos <strong>articles santé</strong>
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa
aperiam at quod impedit adipisci quae! Qui deleniti itaque
consequuntur, beatae perspiciatis voluptatibus deserunt eligendi autem
commodi aut porro nulla.
</p>
<Link
className="inline font-medium underline decoration-main"
to="/articles"
>
Consultez le catalogue
<CircledArrow />
</Link>
</section>
<section className="mx-auto mb-10 hidden max-w-prose px-6 xl:mb-40 xl:block xl:max-w-6xl">
<h2>
Nos <strong>recommandations</strong>
</h2>
<p>
Vous pouvez consulter le{" "}
<Link to="/recommandations">catalogue des recommandations</Link> sur
la santé environnement constitué dans le cadre de la construction du
service Recosanté et validé par le{" "}
<a
href="https://www.santepubliquefrance.fr/"
target="_blank"
rel="noopener noreferrer"
>
Santé publique France
</a>
.
</p>
<p>
Les recommandations sont classées suivant leur thématique et sont
adaptées à une situation environnementale donnée.
</p>
<Link
className="inline font-medium underline decoration-main"
to="/recommandations"
>
Consultez les recommandations
<CircledArrow />
</Link>
</section>
<section className="mx-auto mb-10 max-w-prose px-6 xl:mb-40 xl:hidden">
<h2>
<strong>En savoir plus</strong> sur Recosanté
</h2>
<details className="border-b border-main py-2 [&_div]:scale-y-0 [&_div]:open:scale-y-100 [&_h2]:hidden [&_h3]:open:mb-4 [&_svg]:open:rotate-180">
<summary className="list-none">
<h3 className="mb-0 flex w-full items-center justify-between text-lg font-medium">
Qui sommes-nous ? <ArrowSummary />
</h3>
</summary>
<div className="origin-top transition-transform">
<Markdown>{queries.about.body}</Markdown>
</div>
</details>
<details className="border-b border-main py-2 [&_div]:scale-y-0 [&_div]:open:scale-y-100 [&_h2]:hidden [&_h3]:open:mb-4 [&_svg]:open:rotate-180">
<summary className="list-none">
<h3 className="mb-0 flex w-full items-center justify-between text-lg font-medium">
D'où viennent les données Recosanté ?<ArrowSummary />
</h3>
</summary>
<div className="origin-top transition-transform">
<Markdown>{queries.dataSource.body}</Markdown>
</div>
</details>
<details className="border-b border-main py-2 [&_div]:scale-y-0 [&_div]:open:scale-y-100 [&_h2]:hidden [&_h3]:open:mb-4 [&_svg]:open:rotate-180">
<summary className="list-none">
<h3 className="mb-0 flex w-full items-center justify-between text-lg font-medium">
Nos recommandations
<ArrowSummary />
</h3>
</summary>
<div className="origin-top transition-transform">
<p>
Vous pouvez consulter le{" "}
<Link to="/recommandations">catalogue des recommandations</Link>{" "}
sur la santé environnement constitué dans le cadre de la
construction du service Recosanté et validé par le{" "}
<a
href="https://www.santepubliquefrance.fr/"
target="_blank"
rel="noopener noreferrer"
>
Santé publique France
</a>
.
</p>
<p>
Les recommandations sont classées suivant leur thématique et sont
adaptées à une situation environnementale donnée.
</p>
<Link
className="mb-4 inline-block font-medium underline decoration-main"
to="/recommandations"
>
Consultez les recommandations
<CircledArrow />
</Link>
</div>
</details>
</section>
<section className="mx-auto mb-10 hidden max-w-prose px-6 xl:mb-40 xl:block xl:max-w-6xl">
<Markdown>{queries.dataSource.body}</Markdown>
</section>
</>
);
}

function CircledArrow() {
return (
<svg
className="ml-1 inline h-4 w-4"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.33334 6.7335V4.9335L9.73334 7.3335L7.33334 9.7335V7.9335H4.93334V6.7335H7.33334ZM7.33334 1.3335C10.6453 1.3335 13.3333 4.0215 13.3333 7.3335C13.3333 10.6455 10.6453 13.3335 7.33334 13.3335C4.02134 13.3335 1.33334 10.6455 1.33334 7.3335C1.33334 4.0215 4.02134 1.3335 7.33334 1.3335ZM7.33334 12.1335C9.98534 12.1335 12.1333 9.9855 12.1333 7.3335C12.1333 4.6815 9.98534 2.5335 7.33334 2.5335C4.68134 2.5335 2.53334 4.6815 2.53334 7.3335C2.53334 9.9855 4.68134 12.1335 7.33334 12.1335Z"
fill="#000091"
/>
</svg>
);
}

function ArrowSummary() {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
className="transform transition-transform duration-300"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.00001 7.29277L11.3 10.5928L12.2427 9.65011L8.00001 5.40744L3.75734 9.65011L4.70001 10.5928L8.00001 7.29277Z"
fill="#000091"
/>
</svg>
);
}
6 changes: 3 additions & 3 deletions frontend/src/components/dashboard/Indicators.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ import VigilanceMeteo from "./indicators/VigilanceMeteo";

export default function Indicators(props) {
return (
<section className="flex flex-col gap-y-6">
<div className="flex flex-col flex-wrap gap-y-6 md:flex-row [&>*]:w-full [&>*]:md:basis-1/2 [&>*]:md:px-6">
<section className="mx-auto flex max-w-6xl flex-col gap-y-6">
<div className="flex flex-col flex-wrap gap-y-6 md:flex-row [&>*]:w-full [&>*]:md:basis-1/2">
<div className="flex flex-col gap-y-6">
<IndiceAtmo place={props.place} date={props.date} />
<IndiceUv place={props.place} date={props.date} />
</div>
<Raep place={props.place} date={props.date} />
</div>
<div className="flex flex-col flex-wrap gap-y-6 md:flex-row [&>*]:w-full [&>*]:md:basis-1/2 [&>*]:md:px-6">
<div className="flex flex-col flex-wrap gap-y-6 md:flex-row [&>*]:w-full [&>*]:md:basis-1/2">
<Baignades place={props.place} />
<div className="flex flex-col gap-y-6">
<VigilanceMeteo place={props.place} date={props.date} />
Expand Down
Loading

0 comments on commit 5cc0bd8

Please sign in to comment.