Components

Components are the heart of Quanta. They enable you to build modular, reusable parts of your application, such as headers, navigation bars, footers, or complex widgets. This modular approach ensures that your code remains organized, maintainable, and scalable.

One of the key features of Quanta's component system is the ability to nest components. This means you can render a component inside another component, creating highly flexible and composable layouts.

Create an component with php

class Navbar extends Component {
    public function render($quanta, $data) {
        // Add default values to $data if not set
        $data['navLinks'] = $data['navLinks'] ?? [
            ['label' => 'Home', 'url' => '/home'],
            ['label' => 'About', 'url' => '/about'],
            ['label' => 'Features', 'url' => '/features'],
            ['label' => 'Get Started', 'url' => '/start']
        ];

        $data['brandName'] = $data['brandName'] ?? 'Quanta';  // Default brand name is 'Quanta'

        // Pass the updated $data to the template
        return $quanta->loadTemplate("templates/navbar.php", $data);
    }
}
$quanta->actionHandler->addAction(new Navbar("navbar"));

The navbar.php Template

In the template, you can access the parameters you passed. The $quanta instance is also available, allowing you to access other Quanta features if necessary.

Here’s an example of the navbar.php template:

<nav class="navbar navbar-expand-lg navbar-info bg-info">
    <div class="container-fluid">
        <!-- Dynamic Brand -->
        <a class="navbar-brand" href="https://getquanta.dev"><?php echo $brandName; ?></a>
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <!-- Dynamic Navigation Links -->
                <?php foreach ($navLinks as $link): ?>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="<?php echo $link['url']; ?>">
                            <?php echo $link['label']; ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>
</nav>

Rendering the Navbar Component with Data

Now, you can render the Navbar component with or without custom data. If you don’t pass any data, the default values will be used.

Example 1: Rendering with Custom Data

// Example of custom data passed to the Navbar component
$navLinks = [
    ['label' => 'Start', 'url' => 'https://getquanta.dev/home#hero'],
    ['label' => 'About', 'url' => 'https://getquanta.dev/home#about'],
    ['label' => 'Features', 'url' => 'https://getquanta.dev/home#features'],
    ['label' => 'Get Started', 'url' => 'https://getquanta.dev/home#start']
];

// Render the Navbar component, passing the data
echo $quanta->renderComponent("navbar", [
    'navLinks' => $navLinks,  // Custom nav links
    'brandName' => 'Quanta Framework'  // Custom brand name
]);

In this case, you're passing an array of navigation links and a custom brand name to the component.

Example 2: Rendering with Default Data

// Render the Navbar component without passing any data
echo $quanta->renderComponent("navbar");

In this case, the Navbar component will use the default navLinks and brandName values defined in the component.