# Create your first page

**Quick summary:** Use widgets from the interface library and create reactive properties for dynamic components.

---
## Introduction to Widgets

Instead of building everything from basic divs, we'll explore **widgets** - pre-built components from Luna Park's interface library that save you time and ensure consistency.

## 1. Basic Card widget

### Creating your first widget
1. Create a new component
2. Choose **Widget** instead of a basic div
3. By default, you get a **Card** widget
4. Add text: "Hello World"
5. Notice how a stylized background appears automatically - no manual styling needed!

### Card properties

**Depth property:**
- `-1`: Matches the background color (subtle, less visible)
- `0`: Default appearance
- `1`: Lighter appearance
- **Use case:** Create visual hierarchy when nesting cards at different levels

**Type property:**
- **Default**: Standard card styling
- **Primary**: Highlighted with blue accent color
- **Outline**: Shows only a border, no background fill
- **Transparent**: Completely see-through background

## 2. Alert widget

### Setting up alerts
1. Select **Widget** → **Alert**
2. You'll see alert-specific properties:
    - **Status**: Choose from success, warning, error, etc.
    - **Icon**: Icons are automatically matched to the status type

### Customizing icons
1. Click on the icon field to open the icon picker
2. Use the search to find icons quickly
3. Example: Type "plane" to find airplane-related icons

## 3. Text Animation widget

### Features
1. **Widget** → **Text Animation**
2. No visible children: content defined in properties
3. **content** property: "Hello from Luna Park"
4. Animation triggers each time the element appears

### Testing the animation
Switch between **Builder** and **Preview** modes to trigger and watch the text animation repeat each time.

## 4. Create custom properties

### The challenge: making widgets dynamic
Right now, all widget content is hardcoded. How can we make the content change based on data from other components?

### Solution: reactive properties
1. In your component, click to add a new **Property**
2. Set **Name**: "text"
3. Set **Type**: String  
4. Set **Default value**: "Hello World"

### Common property types
- **String**: Text content (letters, words, sentences)
- **Number**: Numeric values (integers, decimals)
- **Boolean**: True/false switches
- **Note**: More advanced types will be covered in later episodes

## 5. Use reactive properties

### Understanding input modes
**Equal icon (=):** Static value - you type the content directly
**Lightning icon (⚡):** Dynamic value - automatically connects to available properties and updates when they change

### Making Text Animation dynamic
1. Find the widget's **content** property
2. Click the lightning bolt icon to switch to reactive mode
3. Select your "text" property from the dropdown
4. Now the content will update automatically when the property changes!

## 6. Display properties in text

### Displaying properties in text
1. Add a **Custom Text** element with: "The content of my property is:"
2. Create a placeholder variable using braces: `{display}`
3. A "display" property will automatically appear in the inspector
4. Switch to lightning mode → select your "text" property
5. Result: "The content of my property is: Hello World"

### With direct variables
Use the variable directly in text to display the value.

## 7. Usage in a page

### Instantiate the component
1. Create a new **Page**: "My Page"
2. Add the created component
3. The "text" property appears in the inspector

### Customizing each instance
1. Change the property value to: "Hello from Luna Park"
2. The change updates automatically wherever this property is used
3. **Key benefit**: Each component instance can have its own unique property values

## Widget advantages

### Ready-to-use interface
- Components styled by default
- Automatic visual consistency
- Avoids recreating common elements

### Time saving
- No need to style from scratch
- Pre-configured properties
- Integrated animations and interactions

### Flexibility
- Customization via properties
- Adaptation to desired design
- Possible combination with custom elements

## Key concepts

### Reactive properties
- **Dynamic binding** between components
- **Automatic update** of values
- **Reusability** with different contents

### Widgets vs basic elements
- **Widgets**: integrated advanced features
- **Div/Custom Text**: full control but more work
- **Hybrid**: combine both approaches

### Data types
- **String**: any text or character string
- **Number**: numeric values
- **Boolean**: true/false states