refactor: extraction du composant SectionTitle dans le design system, suppression du CSS dupliqué entre DailySubject et SubjectSection

app/DailySubject/DailySubject.module.css

@@ -4,15 +4,6 @@
   border-bottom: 1px solid #f0f0f0;
 }
 
-.title {
-  font-family: var(--font-gotham-bold);
-  font-size: 1.2em;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  color: var(--debats-red);
-  margin: 0 0 20px;
-}
-
 .card {
   display: flex;
   flex-direction: column;

app/DailySubject/index.tsx

@@ -3,6 +3,7 @@ import { createSSRSupabaseClient } from '../../infra/supabase/ssr'
 import { createSubjectRepository } from '../../infra/database/subject-repository-supabase'
 import { dailyIndex } from '../../domain/services/daily-pick'
 import ActionLink from '../../components/ui/ActionLink'
+import SectionTitle from '../../components/ui/SectionTitle'
 import FigureAvatarRow from '../../components/figures/FigureAvatarRow'
 import SubjectCounters from '../../components/subjects/SubjectCounters'
 import SubjectTitle from '../../components/subjects/SubjectTitle'
@@ -21,7 +22,7 @@ export default async function DailySubject() {
 
   return (
     <section className={styles.section}>
-      <h2 className={styles.title}>Le sujet du jour</h2>
+      <SectionTitle>Le sujet du jour</SectionTitle>
       <div className={styles.card}>
         <SubjectTitle slug={subject.slug} title={subject.title} as="h3" />
         <p className={styles.presentation}>{subject.presentation}</p>

app/SubjectSection/SubjectSection.module.css

@@ -2,15 +2,6 @@
   margin-bottom: 40px;
 }
 
-.title {
-  font-family: var(--font-gotham-bold);
-  font-size: 1.2em;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  color: var(--debats-red);
-  margin: 0 0 20px;
-}
-
 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -23,10 +14,6 @@
 }
 
 @media (max-width: 768px) {
-  .title {
-    font-size: 1em;
-  }
-
   .grid {
     grid-template-columns: 1fr;
   }

app/SubjectSection/index.tsx

@@ -1,4 +1,5 @@
 import { SubjectActivitySummary } from '../../domain/repositories/subject-repository'
+import SectionTitle from '../../components/ui/SectionTitle'
 import SubjectCardCompact from '../SubjectCardCompact'
 import styles from './SubjectSection.module.css'
 
@@ -10,7 +11,7 @@ interface SubjectSectionProps {
 export default function SubjectSection({ title, subjects }: SubjectSectionProps) {
   return (
     <section className={styles.section}>
-      <h2 className={styles.title}>{title}</h2>
+      <SectionTitle>{title}</SectionTitle>
       {subjects.length === 0 ? (
         <p className={styles.empty}>Aucun sujet pour le moment.</p>
       ) : (

components/ui/SectionTitle/SectionTitle.module.css

@@ -0,0 +1,14 @@
+.title {
+  font-family: var(--font-gotham-bold);
+  font-size: 1.2em;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--debats-red);
+  margin: 0 0 20px;
+}
+
+@media (max-width: 768px) {
+  .title {
+    font-size: 1em;
+  }
+}

components/ui/SectionTitle/index.tsx

@@ -0,0 +1,9 @@
+import styles from './SectionTitle.module.css'
+
+interface SectionTitleProps {
+  children: React.ReactNode
+}
+
+export default function SectionTitle({ children }: SectionTitleProps) {
+  return <h2 className={styles.title}>{children}</h2>
+}