Button Component

To create a button component, you can use any HTML element such as button or a tag. However, it is recommended to use the button element for actions and the a tag for navigation. Both elements can be easily styled with CSS or Tailwind CSS.

In this example, we will create a reusable button component. The button component can be customized with different styles and attributes. Here is an example of how to define the button component:

To get started, create a new file at src/app/Lib/PHPX/Components/Button.php and add the following code snippet:

The button component will accept the following attributes, along with any other attributes you wish to pass:

  • variant: Specifies the button's style variant (default, secondary, destructive, outline, ghost, link).
  • size: Specifies the button's size (default, sm, lg, icon).
  • type: Specifies the button's type attribute (button, submit, reset). Defaults to "button" if not provided.
  • class: Custom CSS classes for additional styling.
  • children: The content or text to be displayed within the button.

Note: If the variant or size attributes are not specified, they will default to "default". Similarly, the type attribute defaults to "button" if not provided.

<?php

namespace Lib\PHPX\Components;

use Lib\PHPX\PHPX;

class Button extends PHPX
{
    public function __construct(array $props = [])
    {
        parent::__construct($props);
    }

    /**
     * Combines and returns the CSS classes for the component.
     * 
     * @return string The merged CSS class string.
     */
    private function getComputedClasses(): string
    {
        $variant = $this->props['variant'] ?? 'default';
        $size = $this->props['size'] ?? 'default';

        // Base Tailwind CSS classes
        $baseClass = 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors   focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';

        // Variant classes mapped to Tailwind CSS
        $variantClasses = [
            'default' => 'bg-blue-500 text-white hover:bg-blue-600',
            'destructive' => 'bg-red-500 text-white hover:bg-red-600',
            'outline' => 'border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900',
            'secondary' => 'bg-gray-200 text-gray-800 hover:bg-gray-300',
            'ghost' => 'hover:bg-gray-100 hover:text-gray-900',
            'link' => 'text-blue-500 underline-offset-4 hover:underline',
        ];

        // Size classes
        $sizeClasses = [
            'default' => 'h-10 px-4 py-2',
            'sm' => 'h-9 px-3',
            'lg' => 'h-11 px-8',
            'icon' => 'h-10 w-10',
        ];

        // Merge the classes
        $classes = $this->getMergeClasses(
            $baseClass,
            $variantClasses[$variant] ?? $variantClasses['default'],
            $sizeClasses[$size] ?? $sizeClasses['default']
        );

        return $classes;
    }

    public function render(): string
    {
        $attributes = $this->getAttributes([
            'type' => 'button',
        ]);
        $class = $this->getComputedClasses();

        return <<<HTML
        <button class="$class" $attributes>{$this->children}</button>
        HTML;
    }
}

Now, you can integrate the Button component into your Prisma PHP application by following the example below:

<?php

  use Lib\PHPX\Components\Button;
  
  ?>
  
  <div class="w-screen h-screen grid place-items-center">
      <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-2">
              <Button>Default</Button>
              <Button variant="secondary">Secondary</Button>
              <Button variant="destructive">Destructive</Button>
              <Button variant="outline">Outline</Button>
              <Button variant="ghost">Ghost</Button>
              <Button variant="link">Link</Button>
          </div>
          <div class="flex flex-col gap-2">
              <Button>Default Size</Button>
              <Button variant="secondary" size="sm">Secondary Size sm</Button>
              <Button variant="destructive" size="lg">Destructive Size lg</Button>
              <Button variant="outline" size="icon">
                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
                    <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224   224Z" />
                  </svg>
              </Button>
          </div>
      </div>
  </div>

By following the steps above, you have successfully created a reusable Button component using Prisma PHPX. You can now use this component in your application to display buttons with various styles and sizes.

In the render method, we use the button tag to render the button. You can customize the button by passing different props such as variant and size to achieve the desired look and feel.