🎨 Composants Articles Complets

Guide exhaustif de tous les composants disponibles pour créer des articles riches et structurés dans Modulo RH.

📋 Table des Matières

• Composants de Base
• Tableaux et Données
• Listes et Énumérations
• Callouts et Alertes
• Code et Syntaxe
• Navigation et Liens
• Mise en Forme Avancée
• Composants Interactifs

---

🧱 Composants de Base

Titres et Hiérarchie

Titre H1 - Principal

Titre H2 - Section

Titre H3 - Sous-section

Titre H4 - Détail

Titre H5 - Très détaillé

Titre H6 - Le plus petit

Paragraphes et Texte

Ceci est un paragraphe standard avec du texte normal. Il peut contenir du texte en gras, du texte en italique, et du code inline.

Ceci est une citation ou un bloc de texte important qui se démarque visuellement du reste du contenu.

Séparateurs

---

📊 Tableaux et Données

Tableau Simple

| Colonne 1 | Colonne 2 | Colonne 3 | |-----------|-----------|-----------| | Donnée 1 | Donnée 2 | Donnée 3 | | Donnée 4 | Donnée 5 | Donnée 6 |

Tableau Complexe avec Alignement

| Fonctionnalité | Statut | Priorité | Notes | |:---------------|:------:|----------:|-------| | Authentification | ✅ Implémenté | Haute | OAuth2 + JWT | | Gestion des rôles | 🔄 En cours | Haute | RBAC avancé | | Notifications | ⏳ Planifié | Moyenne | Email + Push | | Rapports | ❌ À faire | Basse | Export PDF/Excel |

Tableau de Comparaison

| Critère | Solution A | Solution B | Solution C | |---------|------------|------------|------------| | Prix | 50€/mois | 100€/mois | 25€/mois | | Fonctionnalités | Basiques | Complètes | Intermédiaires | | Support | Email | 24/7 | Chat | | Intégration | API REST | Webhooks | SDK |

Tableau avec Données Numériques

| Métrique | Q1 2024 | Q2 2024 | Q3 2024 | Q4 2024 | |----------|---------|---------|---------|---------| | Utilisateurs actifs | 1,250 | 1,450 | 1,680 | 1,890 | | Temps de session | 12.5 min | 14.2 min | 15.8 min | 16.3 min | | Taux de conversion | 3.2% | 3.8% | 4.1% | 4.5% | | Revenus | 45,000€ | 52,000€ | 58,000€ | 65,000€ |

---

📝 Listes et Énumérations

Liste à Puces Simple

• Premier élément de la liste
• Deuxième élément avec texte en gras
• Troisième élément avec texte en italique
• Quatrième élément avec code inline

Liste Numérotée

1. Étape 1 : Préparation de l'environnement
2. Étape 2 : Installation des dépendances
3. Étape 3 : Configuration de la base de données
4. Étape 4 : Tests et validation

Liste Imbriquée

• Catégorie principale
  • Sous-catégorie A
    • Détail 1
    • Détail 2
  • Sous-catégorie B
    • Détail 3
• Autre catégorie
  • Élément simple
  • Élément avec code

Liste de Tâches (Checklist)

• [x] Tâche terminée - Configuration initiale
• [x] Tâche terminée - Tests unitaires
• [ ] Tâche en cours - Documentation
• [ ] Tâche à faire - Déploiement

---

💡 Callouts et Alertes

Callout Info

Callout Succès

Callout Avertissement

Callout Erreur

Callout Note

---

💻 Code et Syntaxe

Bloc de Code Simple

function helloWorld() {
  console.log("Hello, World!");
  return "Success";
}

Bloc de Code avec Langage Spécifique

interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

const createUser = (userData: Partial<User>): User => {
  return {
    id: Date.now(),
    name: userData.name || 'Anonymous',
    email: userData.email || '',
    role: userData.role || 'user'
  };
};

Bloc de Code avec Numérotation

# Calcul de la moyenne des salaires
def calculate_average_salary(salaries):
    if not salaries:
        return 0
    
    total = sum(salaries)
    count = len(salaries)
    average = total / count
    
    return round(average, 2)

# Exemple d'utilisation
salaries = [35000, 42000, 38000, 45000, 41000]
avg_salary = calculate_average_salary(salaries)
print(f"Le salaire moyen est de {avg_salary}€")

Code Inline

Utilisez console.log() pour déboguer votre code JavaScript.

Différences de Code

- const oldFunction = () => {
-   console.log("Ancienne version");
- };
+ const newFunction = () => {
+   console.log("Nouvelle version améliorée");
+   return true;
+ };

---

🔗 Navigation et Liens

Liens Externes

• Documentation officielle Next.js
• Guide Tailwind CSS
• MDX Documentation

Liens Internes

• Page d'accueil
• Blog
• À propos

Liens avec Description

Modulo RH - Solution de gestion RH complète

Plateforme moderne pour la gestion des ressources humaines

---

🎨 Mise en Forme Avancée

Texte avec Émojis

🚀 Démarrage rapide - Commencez en 5 minutes ⚡ Performance - Chargement ultra-rapide 🛡️ Sécurité - Protection des données 📱 Responsive - Compatible mobile

Citations Avancées

Citation célèbre :

"La simplicité est la sophistication ultime."

— Leonardo da Vinci

Blocs de Contenu

Grilles et Layouts

---

🎯 Composants Interactifs

FAQ Interactive

Timeline Interactive

Comparaison Interactive

---

📋 Code à Copier-Coller - Tableaux et Données

Tableau Simple

| Colonne 1 | Colonne 2 | Colonne 3 |
|-----------|-----------|-----------|
| Donnée 1  | Donnée 2  | Donnée 3  |
| Donnée 4  | Donnée 5  | Donnée 6  |

Tableau avec Alignement

| Fonctionnalité | Statut | Priorité | Notes |
|:---------------|:------:|----------:|-------|
| **Authentification** | ✅ Implémenté | Haute | OAuth2 + JWT |
| **Gestion des rôles** | 🔄 En cours | Haute | RBAC avancé |

Tableau de Comparaison

| Critère | Solution A | Solution B | Solution C |
|---------|------------|------------|------------|
| **Prix** | 50€/mois | 100€/mois | 25€/mois |
| **Fonctionnalités** | Basiques | Complètes | Intermédiaires |

---

📋 Code à Copier-Coller - Listes et Énumérations

Liste à Puces

- Premier élément de la liste
- Deuxième élément avec **texte en gras**
- Troisième élément avec *texte en italique*
- Quatrième élément avec `code inline`

Liste Numérotée

1. **Étape 1** : Préparation de l'environnement
2. **Étape 2** : Installation des dépendances
3. **Étape 3** : Configuration de la base de données

Liste Imbriquée

- **Catégorie principale**
  - Sous-catégorie A
    - Détail 1
    - Détail 2
  - Sous-catégorie B
    - Détail 3

---

📋 Code à Copier-Coller - Callouts et Alertes

Callout Info

<Callout type="info" title="Information importante">
Ceci est un callout d'information pour mettre en évidence des détails importants.
</Callout>

Callout Succès

<Callout type="success" title="Opération réussie">
Félicitations ! L'opération s'est déroulée avec succès.
</Callout>

Callout Avertissement

<Callout type="warning" title="Attention requise">
⚠️ Cette action nécessite votre attention.
</Callout>

---

📋 Code à Copier-Coller - Code et Syntaxe

Bloc de Code JavaScript

```javascript
function helloWorld() {
  console.log("Hello, World!");
  return "Success";
}

### Bloc de Code TypeScript

```mdx
```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

### Code Inline

```mdx
Utilisez `console.log()` pour déboguer votre code JavaScript.

---

📋 Code à Copier-Coller - Composants Interactifs Avancés

FAQ

<FAQ
  items={[
    {
      question: "Comment créer un nouvel article ?",
      answer: "Pour créer un nouvel article : 1. Créez un fichier .mdx 2. Ajoutez le front-matter 3. Rédigez votre contenu"
    }
  ]}
/>

Timeline

<Timeline
  title="Évolution du Projet"
  steps={[
    {
      id: "1",
      title: "Lancement initial",
      description: "Première version de Modulo RH.",
      duration: "Q1 2024",
      status: "completed"
    },
    {
      id: "2",
      title: "Module de paie",
      description: "Ajout du module de gestion de la paie.",
      duration: "Q2 2024",
      status: "current"
    }
  ]}
/>

Comparison

<Comparison
  leftTitle="Version Gratuite"
  rightTitle="Version Pro"
  leftSubtitle="0€/mois"
  rightSubtitle="29€/mois"
  features={[
    {
      name: "Nombre d'employés",
      left: "Jusqu'à 5",
      right: "Jusqu'à 50"
    },
    {
      name: "Fonctionnalités",
      left: "Basiques",
      right: "Complètes"
    }
  ]}
/>

---

📊 Tableau Récapitulatif des Composants

| Catégorie | Composant | Utilisation | Complexité | |-----------|-----------|-------------|------------| | Titres | H1-H6 | Hiérarchie du contenu | Basique | | Texte | Paragraphes, Gras, Italique | Contenu principal | Basique | | Citations | Blockquote | Citations importantes | Basique | | Tableaux | Markdown tables | Données structurées | Moyenne | | Listes | UL, OL, Checklist | Énumérations | Basique | | Callouts | Callout | Alertes et notes | Moyenne | | Code | Code blocks, Inline | Exemples de code | Moyenne | | Liens | Liens internes/externes | Navigation | Basique | | FAQ | FAQ | Questions fréquentes | Avancée | | Timeline | Timeline | Chronologie | Avancée | | Comparison | Comparison | Comparaisons | Avancée | | Layout | Grid, Flexbox | Mise en page | Avancée |

---

🎯 Bonnes Pratiques

Structure du Contenu

Utilisation des Tableaux

Callouts et Alertes

---

🚀 Prochaines Étapes

Maintenant que vous maîtrisez tous les composants disponibles, vous pouvez :

1. Créer des articles riches avec une structure claire
2. Utiliser les tableaux pour présenter des données complexes
3. Intégrer des callouts pour guider vos lecteurs
4. Ajouter des composants interactifs pour engager votre audience
5. Optimiser la lisibilité avec une hiérarchie cohérente