# Modular components

**Express Summary:** Transform static cards into reusable components with customizable properties to improve maintainability and code organization.

---

## Problem: Hard-to-maintain code

With our current structure, we already have several elements that make the application difficult to maintain. If we were to create a larger application, the code would quickly become unreadable. The solution: create **reusable components**.

## What is a component?

Components are small objects that we can reuse multiple times in our application. For example, a card can become a component that we instantiate as many times as necessary.

## 1. Create the Card component

### Creation steps
1. Right-click in the explorer
2. Select **Component**
3. Name the component "Card"
4. Go to the **main** page and copy a complete card (right-click � Copy)
5. Return to the Card component and paste the card

### Clean up the main page
1. Return to the **main** page
2. Delete the two cards created previously
3. Instead, add a new block
4. Transform this block into a **Card** component via the selector

## 2. Add properties to the component

### Problem: identical cards
Currently, all our cards display the same content. To customize them, we need to add **properties**.

### Create a "title" property
1. Go to the **Card** component
2. Create a new property:
    - **Name**: title
    - **Type**: string
3. Double-click on the card title text
4. Replace the text with a variable: `{title}`
5. Close the braces

### Configure the property
1. A property field appears in the inspector
2. Click on the "title variable" field
3. Link it to the **title** property

### Set a default value
By default, the property is empty. To avoid empty titles:
1. In the component, set a default value (e.g., "Hello")
2. This value will be displayed if no property is defined

## 3. Use the component with different properties

### Customize each instance
1. Return to the **main** page
2. Select the first Card component
3. In the properties, set **title**: "To Do"
4. Duplicate the component (Ctrl+C / Ctrl+V)
5. Select the second component
6. Set **title**: "In Progress"

## 4. Create the CreateButton component

### Factor out the add button
1. Create a new component "CreateButton"
2. Copy the button block from the main page
3. Paste into the CreateButton component
4. Delete the old button from the main page
5. Add the CreateButton component in its place

## Advantages of this approach

- **Easier maintenance**: modifying a component updates all its instances
- **More readable code**: clear and organized structure
- **Reusability**: a component can be used anywhere in the application
- **Customization**: each instance can have its own properties

## Preparation for the next episode

In the next episode, we'll see how to make cards even more modular by managing internal elements (tasks) that will be **arrays of objects** rather than simple string properties.

---

*Coming next: Advanced property management and object arrays in components.*