thematiques

app/layout.tsx

@@ -3,6 +3,7 @@ import Head from 'next/head'
 import React from 'react'
 import 'utils/styles.css'
 import 'utils/variables.css'
+import { ParamProvider } from 'components/providers/ParamProvider'
 import Theme from 'components/layout/Theme'
 import Footer from 'components/layout/web/Footer'
 import Header from 'components/layout/web/Header'
@@ -45,7 +46,9 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
         <Theme />
         <Transtack>
           <Header />
-          <main id='contenu'>{children}</main>
+          <ParamProvider>
+            <main id='contenu'>{children}</main>
+          </ParamProvider>
           <Footer />
         </Transtack>
       </body>

app/outils/[slug]/page.tsx

@@ -0,0 +1,73 @@
+import { Metadata, ResolvingMetadata } from 'next'
+import { notFound } from 'next/navigation'
+import React from 'react'
+import { categories } from 'data/categories'
+import Category from 'components/outils/CategoryPage'
+import Outil from 'components/outils/Outil'
+import { devTools, smallTools } from 'components/cards/tools'
+import Suggestion from 'components/layout/web/Suggestion'
+
+const tools = [...devTools, ...smallTools]
+export async function generateStaticParams() {
+  return [
+    ...tools.map((tool) => ({
+      slug: tool.slug,
+    })),
+    ...categories.map((category) => ({ slug: category.slug })),
+  ]
+}
+
+type Props = { params: { slug: string } }
+
+export async function generateMetadata({ params }: Props, parent: ResolvingMetadata): Promise<Metadata> {
+  const tool = tools.find((tool) => tool.slug === params.slug)
+  if (tool) {
+    return {
+      title: `${tool.title} | Impact CO₂`,
+      description: tool.description,
+    }
+  }
+  const category = categories.find((category) => category.slug === params.slug)
+  if (category) {
+    return {
+      title: `${category.name} | Impact CO₂`,
+      description: category.description,
+      openGraph: {
+        creators: 'ADEME',
+        images: `meta/${category.slug}.png`,
+      },
+    }
+  }
+
+  return parent as Metadata
+}
+
+const OutilPage = async ({ params }: Props) => {
+  const tool = tools.find((tool) => tool.slug === params.slug)
+  if (tool) {
+    return (
+      <>
+        <Outil tool={tool} />
+        <Suggestion from={`/outils/${tool.slug}`} fromLabel={tool.title} simulatorName={`de l'outil ${tool.title}`} />
+      </>
+    )
+  }
+
+  const category = categories.find((category) => category.slug === params.slug)
+  if (category) {
+    return (
+      <>
+        <Category category={category} />
+        <Suggestion
+          from={`/outils/${category.slug}`}
+          fromLabel={category.name}
+          simulatorName={`de la thématique ${category.name}`}
+        />
+      </>
+    )
+  }
+
+  return notFound()
+}
+
+export default OutilPage

app/outils/page.tsx

@@ -1,7 +1,13 @@
+import { Metadata } from 'next'
 import React from 'react'
 import Outils from 'components/outils/Outils'
 import Suggestion from 'components/layout/web/Suggestion'
 
+export const metadata: Metadata = {
+  title: 'Outils | Impact CO₂',
+  description: 'Trouver l’outil adapté à votre prochaine publication.',
+}
+
 const OutilsPage = async () => {
   return (
     <>

src/components/base/ClipboardBox.module.css

@@ -0,0 +1,79 @@
+.box {
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: space-between;
+  padding: 0.625rem 0.75rem 0.625rem 1rem;
+  position: relative;
+  text-align: left;
+  width: 100%;
+  border: 1px solid var(--neutral-10);
+  background-color: var(--neutral-10);
+  color: var(--neutral-60);
+
+  .copy {
+    color: var(--primary-50);
+  }
+
+  &:hover {
+    background-color: var(--neutral-00);
+    outline: 1px solid var(--neutral-10);
+
+    .copy {
+      color: var(--primary-70);
+    }
+  }
+
+  &:focus {
+    outline-offset: 2px;
+    outline: 3px solid var(--primary-40);
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+.content {
+  display: inline-block;
+  width: fit-content;
+  word-break: break-word;
+}
+
+.copy {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  justify-content: flex-end;
+  line-height: 1.25rem;
+  right: 1rem;
+  top: calc(50% - 0.5rem);
+
+  svg {
+    margin-left: 0.25rem;
+  }
+}
+
+.copied {
+  color: var(--success-60) !important;
+}
+
+.information {
+  align-items: center;
+  color: var(--neutral-50);
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: 400;
+  gap: 0.5rem;
+  line-height: 1rem;
+  margin-top: 0.5rem;
+
+  svg {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}

src/components/base/ClipboardBox.tsx

@@ -1,35 +1,40 @@
+'use client'
+
+import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
 import React, { useState } from 'react'
 import { track } from 'utils/matomo'
 import { Icon } from '../osezchanger/icons'
-import { Box, Content, Copy, Information } from './ClipboardBox.styles'
+import styles from './ClipboardBox.module.css'
 
-const ClipboardBox = ({ children, colored, tracking }: { children: string; colored?: boolean; tracking: string }) => {
+const ClipboardBox = ({ children, tracking }: { children: string; tracking: string }) => {
   const [copied, setCopied] = useState(false)
   const t = useTranslations('clipboard')
   return (
     <>
-      <Box
-        $colored={colored}
+      <button
+        className={styles.box}
         onClick={() => {
           setCopied(true)
           setTimeout(() => setCopied(false), 500)
           navigator.clipboard.writeText(children)
           track(tracking, 'Copy', children)
         }}>
-        <Content data-testid='clipboard-box'>{children}</Content>
-        <Copy className='clipboard-right-item' $copied={copied}>
+        <div className={styles.content} data-testid='clipboard-box'>
+          {children}
+        </div>
+        <div className={classNames(styles.copy, { [styles.copied]: copied })}>
           {copied ? t('copie') : t('copier')}
           <Icon iconId={copied ? 'check' : 'copy'} />
-        </Copy>
-      </Box>
+        </div>
+      </button>
       {children.startsWith('<script') && (
-        <Information>
+        <div className={styles.information}>
           <Icon iconId='information' />
           {t('information-1')}
           <br />
           {t('information-2')}
-        </Information>
+        </div>
       )}
     </>
   )

src/components/base/Emoji.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import React from 'react'
 import twemoji from 'twemoji'