add screenshots

Filament/Blocks/Hero.php

@@ -4,10 +4,14 @@
 
 namespace Modules\UI\Filament\Blocks;
 
-use Filament\Forms\Components\Builder\Block;
-use Filament\Forms\Components\RichEditor;
+use Illuminate\Support\Arr;
 use Filament\Forms\Components\Select;
+use Modules\Xot\Services\FileService;
 use Filament\Forms\Components\TextInput;
+use Filament\Forms\Components\FileUpload;
+use Filament\Forms\Components\RichEditor;
+use Filament\Forms\Components\Builder\Block;
+use Modules\UI\Filament\Forms\Components\RadioImage;
 use Modules\Xot\Actions\View\GetViewsSiblingsAndSelfAction;
 
 class Hero
@@ -18,15 +22,32 @@ public static function make(
     ): Block {
         $view = 'ui::components.blocks.hero.simple';
         $views = app(GetViewsSiblingsAndSelfAction::class)->execute($view);
+        $options = Arr::map($views, function ($view) {
+            return FileService::asset('ui::img/screenshots/'.$view.'.png');
+
+        });
 
         return Block::make($name)
             ->schema(
                 [
                     TextInput::make('title'),
                     RichEditor::make('text'),
+                    FileUpload::make('background')
+                        //->acceptedFileTypes(['application/pdf'])
+                        //->image()
+                        ->directory('blocks')
+                        ->preserveFilenames()
+                        ,
+                    //*
+                    RadioImage::make('_tpl')
+                        ->label('layout')
+                        ->options($options)
+                    //*/
+                    /*
                     Select::make('_tpl')
                         ->label('layout')
                         ->options($views),
+                    //*/
                 ]
             );
     }

Filament/Forms/Components/RadioImage.php

@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Modules\UI\Filament\Forms\Components;
+
+use Filament\Forms\Components\Radio;
+
+class RadioImage extends Radio
+{
+    /**
+     * @var view-string
+     */
+    protected string $view = 'ui::filament.forms.components.radio-image';
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        /*
+        $this->suffixAction(
+            \Filament\Forms\Components\Actions\Action::make('icon')
+            ->icon(fn (?string $state) => $state)
+            // ->modalContent(fn ($record) => view('ui::filament.forms.components.icon-picker', ['record' => $record]))
+            ->form([
+                RadioIcon::make('status')
+                    ->inline()
+                    ->inlineLabel(false)
+                    ->options([
+                        'draft' => 'Dr<b>af</b>t',
+                        'scheduled' => 'Scheduled',
+                        'published' => 'Published',
+                    ]),
+            ])
+        );
+        */
+    }
+}

Providers/UIServiceProvider.php

@@ -32,12 +32,13 @@ public function registerCallback(): void
     {
         // $loader = AliasLoader::getInstance();
         // $loader->alias('ui', UIService::class);
-        $this->registerBladeIcons();
+        //$this->registerBladeIcons(); //moved to XotBaseServiceProvider
     }
 
-    public function registerBladeIcons(): void
-    {
-        Config::set('blade-icons.sets.default.path', 'Modules/UI/Resources/svg');
-        Config::set('blade-icons.sets.default.prefix', 'icon');
-    }
+    //public function registerBladeIcons(): void
+    //{
+    //    parent::registerBladeIcons();
+    //    Config::set('blade-icons.sets.default.path', 'Modules/UI/Resources/svg');
+    //    Config::set('blade-icons.sets.default.prefix', 'icon');
+    //}
 }

Resources/views/components/blocks/hero/simple_centered_with_background_image.blade.php

@@ -1,88 +1,45 @@
+@props(['title', 'text', 'background'])
+
 <div class="bg-gray-900">
-    {{--
-    <header class="absolute inset-x-0 top-0 z-50">
-      <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
-        <div class="flex lg:flex-1">
-          <a href="#" class="-m-1.5 p-1.5">
-            <span class="sr-only">Your Company</span>
-            <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="">
-          </a>
-        </div>
-        <div class="flex lg:hidden">
-          <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400">
-            <span class="sr-only">Open main menu</span>
-            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-            </svg>
-          </button>
-        </div>
-        <div class="hidden lg:flex lg:gap-x-12">
-          <a href="#" class="text-sm font-semibold leading-6 text-white">Product</a>
-          <a href="#" class="text-sm font-semibold leading-6 text-white">Features</a>
-          <a href="#" class="text-sm font-semibold leading-6 text-white">Marketplace</a>
-          <a href="#" class="text-sm font-semibold leading-6 text-white">Company</a>
-        </div>
-        <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-          <a href="#" class="text-sm font-semibold leading-6 text-white">Log in <span aria-hidden="true">&rarr;</span></a>
-        </div>
-      </nav>
-      <!-- Mobile menu, show/hide based on menu open state. -->
-      <div class="lg:hidden" role="dialog" aria-modal="true">
-        <!-- Background backdrop, show/hide based on slide-over state. -->
-        <div class="fixed inset-0 z-50"></div>
-        <div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
-          <div class="flex items-center justify-between">
-            <a href="#" class="-m-1.5 p-1.5">
-              <span class="sr-only">Your Company</span>
-              <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="">
-            </a>
-            <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-400">
-              <span class="sr-only">Close menu</span>
-              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-          <div class="mt-6 flow-root">
-            <div class="-my-6 divide-y divide-gray-500/25">
-              <div class="space-y-2 py-6">
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Product</a>
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Features</a>
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Marketplace</a>
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Company</a>
-              </div>
-              <div class="py-6">
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-white hover:bg-gray-800">Log in</a>
-              </div>
+    <div class="relative isolate overflow-hidden pt-14">
+        <img src="/storage/{{ $background }}" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover">
+        <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+            aria-hidden="true">
+            <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+                style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
             </div>
-          </div>
         </div>
-      </div>
-    </header>
-    --}}
-    <div class="relative isolate overflow-hidden pt-14">
-      <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2830&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover">
-      <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
-        <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
-      </div>
-      <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
-        <div class="hidden sm:mb-8 sm:flex sm:justify-center">
-          <div class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20">
-            Announcing our next round of funding. <a href="#" class="font-semibold text-white"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
-          </div>
+        <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+            {{--  
+            <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+                <div
+                    class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20">
+                    Announcing our next round of funding. <a href="#" class="font-semibold text-white"><span
+                            class="absolute inset-0" aria-hidden="true"></span>Read more <span
+                            aria-hidden="true">&rarr;</span></a>
+                </div>
+            </div>
+			--}}
+            <div class="text-center">
+                <h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">{{ $title }}</h1>
+                @php
+                    $text = str_replace('<p>', '<p class="mt-6 text-lg leading-8 text-gray-300">', $text);
+                @endphp
+                {!! $text !!}
+                <div class="mt-10 flex items-center justify-center gap-x-6">
+                    <a href="#"
+                        class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Get
+                        started</a>
+                    <a href="#" class="text-sm font-semibold leading-6 text-white">Learn more <span
+                            aria-hidden="true">→</span></a>
+                </div>
+            </div>
         </div>
-        <div class="text-center">
-          <h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">Data to enrich your online business</h1>
-          <p class="mt-6 text-lg leading-8 text-gray-300">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
-          <div class="mt-10 flex items-center justify-center gap-x-6">
-            <a href="#" class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Get started</a>
-            <a href="#" class="text-sm font-semibold leading-6 text-white">Learn more <span aria-hidden="true">→</span></a>
-          </div>
+        <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+            aria-hidden="true">
+            <div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+                style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
+            </div>
         </div>
-      </div>
-      <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
-        <div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
-      </div>
     </div>
-  </div>
-
+</div>

Resources/views/filament/forms/components/radio-image.blade.php

@@ -0,0 +1,87 @@
+<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
+    @php
+        $id = $getId();
+        $isDisabled = $isDisabled();
+        $statePath = $getStatePath();
+    @endphp
+
+
+    <ul role="list" class="grid gap-8 xl:grid-cols-4 lg:grid-cols-4">
+
+        @foreach ($getOptions() as $value => $image)
+            @php
+                $shouldOptionBeDisabled = $isDisabled || $isOptionDisabled($value, $image);
+            @endphp
+            <li class="overflow-hidden ">
+                <label class="relative">
+                    <input @disabled($shouldOptionBeDisabled) id="{{ $id }}-{{ $value }}"
+                        name="{{ $id }}" type="radio" value="{{ $value }}" wire:loading.attr="disabled"
+                        {{ $applyStateBindingModifiers('wire:model') }}="{{ $statePath }}" class="rb-image" />
+                    <span class="img-radio-selected"></span>
+                    <div class="img-radio">
+                        <img src="{{ $image }}" alt="{{ $value }}"
+                            class="focus:bg-primary-500 cursor-pointer">
+                    </div>
+                </label>
+            </li>
+        @endforeach
+
+    </ul>
+
+</x-dynamic-component>
+
+<style>
+    input[name="{{ $id }}"]:checked+.img-radio-selected {
+        background-color: rgba(var(--primary-500), var(--tw-bg-opacity));
+        transform: rotate(0.8648rad);
+
+        width: 110px;
+        height: 20px;
+
+        position: absolute;
+        top: 15px;
+        right: -30px;
+        z-index: 99999;
+    }
+
+    .rb-image {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .img-radio {
+        border: 1px solid #dee2e6;
+        max-width: 100%;
+        border-radius: 5px;
+        cursor: pointer;
+        display: block;
+        height: auto;
+        margin: auto;
+        padding: 5px;
+        position: relative;
+        width: 100%;
+    }
+
+    .img-radio:hover img {
+        -o-object-position: bottom;
+        object-position: bottom;
+    }
+
+    .img-radio img {
+        height: 150px;
+        -o-object-fit: cover;
+        object-fit: cover;
+        -o-object-position: top;
+        object-position: top;
+        transform-origin: 50% 50%;
+        transition-duration: .1s;
+        transition: all 2s ease;
+        width: 100%;
+    }
+
+    .overflow-hidden {
+        overflow: hidden;
+    }
+</style>