# Interface and navigation

**Quick summary:** Learn to create reusable components with styling, slots, and customizable properties.

---

## Introduction

This tutorial teaches component creation in Luna Park. A component is a reusable visual element that you can use multiple times throughout your application.

## 1. Project preparation

### Clean the workspace
1. Delete any existing files: right-click → **Delete**
2. Create a new component: right-click → **New** → **Component**

## 2. Basic element: the div

### Fundamental concept
- The **div** is the basic building block (like a brick for construction)
- By default: divs have width and height = 0, making them invisible
- You must add size properties to make them visible

### Create multiple divs
1. Click the **+** to add elements
2. Each new element is a div by default

## 3. Element styling

### Add dimensions
1. Select a div element
2. Go to **Inspector** → **Style** tab → click **+**
3. Choose the **Size** category
4. Set **min-width** and **min-height** (example: 57px)

### Add color
1. In the **Background** category, click **Color**
2. Choose a color (example: red)
3. **Tip**: Use the eye icon to hide unused properties and keep your workspace clean

### Default behavior
- Divs automatically take the full available width of their container
- Elements automatically inherit sizes from similar nearby elements

## 4. Display management with Flexbox

### Problem: elements stack vertically by default
**Solution:** Use **display: flex** on the parent container to arrange elements horizontally

### Flex configuration
1. Select the parent element (container)
2. Add **Display** property → **Flex**
3. Available options:
    - **Direction**: horizontal/vertical
    - **Align items**: perpendicular alignment
    - **Justify content**: main alignment
    - **Gap**: spacing between elements

### Common alignment options
- **Left/Right**: Align elements horizontally to left or right
- **Center**: Center elements in their container
- **Stretch**: Make all elements the same size by stretching

## 5. Creating a button component

### Basic structure
1. Start from a simple div
2. Clear previous styles
3. Define fixed size: **min-width** and **height**

### Add text
1. Click **+** → **Custom Text**
2. Type your desired text
3. **Markdown** is supported (example: use `**bold**` with asterisks to make text bold)

### Button styling
**Background:**
- Color: dark blue

**Text centering:**
- **Display**: flex
- **Align items**: center
- **Justify content**: center

**Spacing:**
- **Padding**: inner space
- **Margin**: outer space

**Borders:**
- **Border** → color, style (solid/dotted), size (2px)
- **Border radius**: rounded corners

## 6. Using components

### Create a page
1. New component with **Type**: Page
2. A page is directly accessible in the application
3. Automatic browser display

### Rename for better organization
- Rename the button component to "color-blocks"
- Rename the page to "my-page"

### Instantiate the component
1. **+** → type change icon
2. **Component** → select "color-blocks"
3. The component appears with its styles

### Reusability
- Duplicate with **+** and selection of the same component
- Modifying the original component updates all its instances

## 7. Slots for dynamic content

### Problem: static content
Currently, all button instances display identical text because the content is hardcoded.

### Solution: Use slots for dynamic content
1. Click **+** → **Slot**
2. The dotted border indicates where content can be inserted
3. **Default content**: This text appears when no custom content is provided

### Using slots in your page
1. Select a component instance in your page
2. Click **+** → **Custom Text** inside the component
3. Your custom text will replace the slot's default content

### Named slots for multiple content areas
**Use case:** When you need multiple customizable areas (example: icon + text)

1. First slot: Set **name** = "emoji"
2. Second slot: Leave as default (no name)
3. Add **gap** property for spacing between elements
4. Each named slot can receive completely different content

### How multiple slots behave
- **Unnamed slots**: Content is duplicated and synchronized across all instances
- **Named slots**: Each has independent, customizable content
- **Important**: Changes to default slot content affect all instances using that slot

## Integrated CSS concepts

### Display modes
- **Block**: full width by default
- **Inline**: content width
- **Flex**: advanced layout control

### Spacing
- **Padding**: inner space (affects apparent size)
- **Margin**: outer space (doesn't affect element size)

### Flexbox
- **Direction**: row (horizontal) / column (vertical)
- **Justify**: main axis alignment
- **Align**: secondary axis alignment
- **Gap**: uniform spacing between children

## Component advantages

- **Reusability**: one component, multiple instances
- **Maintenance**: centralized modification
- **Consistency**: uniform design
- **Flexibility**: slots for customization