because of lightbox

src/Components/Lightbox.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace Grafite\Html\Components;
+
+use Grafite\Html\Components\HtmlComponent;
+use Grafite\Html\Tags\Lightbox as LightboxTag;
+
+class Lightbox extends HtmlComponent
+{
+    public $gallery;
+    public $css;
+    public $images = [];
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        $gallery = null,
+        $images = null,
+        $css = null,
+    ) {
+        $this->gallery = $gallery;
+        $this->images = $images;
+        $this->css = $css;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return function (array $data) {
+            return LightboxTag::make()
+                ->items($this->images)
+                ->thumbnailCss($this->css)
+                ->gallery($this->gallery)
+                ->render();
+        };
+    }
+}

src/HtmlProvider.php

@@ -105,6 +105,8 @@ public function boot()
                 'countdown' => Components\Countdown::class,
                 'video' => Components\Video::class,
                 'image-compare' => Components\ImageCompare::class,
+                'parallax' => Components\Parallax::class,
+                'lightbox' => Components\Lightbox::class,
                 ] as $alias => $component
             ) {
                 $blade->component($component, $alias, 'html');

src/Tags/Lightbox.php

@@ -0,0 +1,78 @@
+<?php
+
+namespace Grafite\Html\Tags;
+
+use Illuminate\Support\Str;
+use Grafite\Html\Tags\HtmlComponent;
+
+class Lightbox extends HtmlComponent
+{
+    public static $gallery;
+    public static $thumbnailCss;
+
+    public static function gallery($value)
+    {
+        self::$gallery = $value;
+
+        return new static();
+    }
+
+    public static function thumbnailCss($value)
+    {
+        self::$thumbnailCss = $value;
+
+        return new static();
+    }
+
+    public static function stylesheets()
+    {
+        return [];
+    }
+
+    public static function scripts()
+    {
+        return [
+            '//cdn.jsdelivr.net/npm/[email protected]/index.min.js',
+        ];
+    }
+
+    public static function js()
+    {
+        $id = self::$id;
+        $gallery = self::$gallery;
+
+        return <<<JS
+           document.addEventListener('DOMContentLoaded', (event) => {
+            });
+        JS;
+    }
+
+    public static function styles()
+    {
+        return <<<CSS
+
+        CSS;
+    }
+
+    public static function process()
+    {
+        self::$id = static::$attributes['id'] ?? 'html_' . Str::uuid();
+        self::$gallery = self::$gallery ?? 'lightbox_' . Str::uuid();
+
+        $id = self::$id;
+        $html = '<div id="'.$id.'" class="lightbox-gallery">';
+        $gallery = self::$gallery;
+        $items = self::$items;
+        $thumbnailCss = self::$thumbnailCss;
+
+        foreach ($items as $key => $item) {
+            $html .= "<a class='lightbox-image-container' href='{$item}' data-fslightbox='{$gallery}'>
+                <img class='{$thumbnailCss}' src='{$item}'>
+            </a>";
+        }
+
+        $html .= '</div>';
+
+        self::$html = $html;
+    }
+}