# Interface et styling

**Résumé express :** Créer une application type Trello avec Luna Park en utilisant des blocs, styles et composants réutilisables pour gérer listes et cartes.

---

## 1. Création du projet

1. Ouvrir Luna Park et accéder au dashboard
2. Créer un nouveau projet nommé "Trebo"
3. Faire clic droit dans l'explorateur → Créer une nouvelle page "main"

## 2. Configuration du conteneur principal

### Créer le conteneur de base
- Un **bloc** apparaît en bas à gauche (équivalent d'une div HTML)
- Cliquer sur le bloc pour accéder au panel de style à droite
- Ajouter un style avec le bouton "+" :
- **Background** : choisir une couleur temporaire
- **Height** : 100% pour couvrir toute la page
- Renommer le bloc en "Container"

### Définir la palette de couleurs
- Aller dans la palette en haut de l'interface
- Modifier les couleurs primaires et secondaires (style retro wave/violet)
- Les tokens de couleurs se génèrent automatiquement

## 3. Création du header

1. Cliquer sur "+" dans le conteneur pour ajouter un nouveau bloc
2. Renommer ce bloc "Header"
3. Ajouter les styles :
- **Background** : utiliser un token "deepest" de la palette
- **Height** : définir en pixels (ex: 60px)
- **Display** : flex
- **Flex-direction** : column
- **Justify-content** : center
- **Padding** : 16px

### Ajouter le titre
1. Cliquer sur "+" dans le header
2. Transformer le bloc en "Custom text" via l'icône carrée
3. Écrire le texte "Mon Tableau Trebo"
4. Styliser le texte :
- **Font-weight** : bold
- **Font-size** : 1.5rem

## 4. Zone de contenu principal

1. Créer un nouveau bloc sous le header, le nommer "Content"
2. Ajouter un **padding** pour éviter que les cartes touchent les bords
3. Styliser avec :
- **Display** : flex
- **Gap** : 12px (pour espacer les cartes)

## 5. Création des cartes

### Structure d'une carte
1. Dans "Content", créer un bloc nommé "Card"
2. Ajouter les styles de base :
- **Background** : token de la palette
- **Width** : 230px (au lieu de 100%)
- **Padding** : utiliser un token de spacing
- **Border-radius** : 12px
- **Display** : flex
- **Flex-direction** : column

### Ajouter le titre de la carte
1. Créer un "Custom text" dans la carte
2. Écrire "À faire" (par exemple)
3. Ajouter :
- **Padding** : token "s"
- **Font-weight** : bold

### Ajouter des éléments dans la carte
1. Créer plusieurs "Custom text" pour les tâches
2. Copier-coller avec Ctrl+C / Ctrl+V pour dupliquer
3. Styliser chaque élément :
- **Background** : couleur légèrement plus claire
- **Padding** : token "s"
- **Border-radius** : token "s"

## 6. Bouton d'ajout d'élément

### Méthode avec composant wrapper
1. Créer un "Custom text" avec "+ Ajouter une carte"
2. Clic droit → "Wrap a component" pour l'entourer d'un bloc
3. Retirer le "+" du texte
4. Ajouter un **icon** via UI Library :
- Sélectionner l'icône "plus"
- **Font-size** : XL pour l'agrandir
5. Aligner avec :
- **Display** : flex
- **Align-items** : center

### Ajouter l'effet hover
1. Sélectionner l'élément
2. Cliquer sur le bouton "Hover" dans les styles
3. Modifier le **background** avec une couleur plus claire
4. Ajouter **cursor** : pointer

## 7. Duplication et finalisation

### Créer plusieurs cartes
- Sélectionner une carte complète
- Copier avec Ctrl+C
- Coller avec Ctrl+V dans "Content"
- Modifier les textes ("En cours", "Terminé", etc.)

### Bouton global d'ajout
1. Utiliser UI Library → Forms → Button
2. Personnaliser le style selon la charte graphique
3. Texte : "Ajouter une liste"

## Conseils pratiques

- **Toujours nommer** ses blocs et composants
- Utiliser les **tokens** de la palette pour la cohérence
- **Copier-coller** les éléments stylisés pour gagner du temps
- Utiliser **Display flex** et **Gap** pour les alignements
- Ajouter des **effets hover** pour l'interactivité
- La **UI Library** propose des composants pré-faits

---

*Dans le prochain épisode : factorisation du code pour éviter la répétition et améliorer la lisibilité.*