command page

app/Enums/Example.php

@@ -19,6 +19,7 @@
 use App\Enums\Examples\Form\Upload;
 use App\Enums\Examples\Form\WithoutLivewire;
 use App\Enums\Examples\Others\Alpine;
+use App\Enums\Examples\Others\Command;
 use App\Enums\Examples\Others\Configuration;
 use App\Enums\Examples\Others\Contribution;
 use App\Enums\Examples\Others\DarkTheme;
@@ -77,6 +78,7 @@ enum Example: string
     case ColorPersonalization = ColorPersonalization::class;
     case Configuration = Configuration::class;
     case Contribution = Contribution::class;
+    case Command = Command::class;
     case Date = Date::class;
     case DarkTheme = DarkTheme::class;
     case DebugMode = DebugMode::class;

app/Enums/Examples/Others/Command.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Enums\Examples\Others;
+
+class Command
+{
+    public const FIND_COMPONENT = <<<'HTML'
+    php artisan tallstackui:find-component
+    HTML;
+}

resources/views/components/layout/navigation/index.blade.php

@@ -113,7 +113,7 @@ class="hidden w-full items-center rounded-md pr-3 pl-2 text-sm leading-6 text-sl
                             <x-layout.navigation.link :href="route('documentation.ui.banner')" text="Banner" />
                         </li>
                         <li class="relative ml-4">
-                            <x-layout.navigation.link :href="route('documentation.ui.boolean')" text="Boolean" new />
+                            <x-layout.navigation.link :href="route('documentation.ui.boolean')" text="Boolean" />
                         </li>
                         <li class="relative ml-4">
                             <x-layout.navigation.link :href="route('documentation.ui.button')" text="Button" />
@@ -213,6 +213,9 @@ class="hidden w-full items-center rounded-md pr-3 pl-2 text-sm leading-6 text-sl
                 <li class="relative ml-4">
                     <x-layout.navigation.link :href="route('documentation.configuration')" text="Configurations" />
                 </li>
+                <li class="relative ml-4">
+                    <x-layout.navigation.link :href="route('documentation.command')" text="Commands" new />
+                </li>
                 <li class="relative ml-4">
                     <x-layout.navigation.link :href="route('documentation.translation')" text="Translations" />
                 </li>

resources/views/components/top-bar.blade.php

@@ -1,3 +1,4 @@
-<x-banner :color="['background' => 'bg-pink-900', 'text' => 'text-white']" :until="now()->subDay()">
-    //
+<x-banner :color="['background' => 'bg-pink-900', 'text' => 'text-white']"
+          :until="now()->addWeek()">
+    <b class="underline">Version 1.30.0 is now available!</b> Introduced a useful command to search for component usage.
 </x-banner>

resources/views/documentation/command.blade.php

@@ -0,0 +1,50 @@
+@php
+    foreach (apply_prefix($__data) as $key => $value) $$key = $value;
+@endphp
+
+<x-layout>
+    <x-slot:title>
+        Commands
+    </x-slot:title>
+    <x-slot:description>
+        TallStackUI available commands.
+    </x-slot:description>
+    <x-section title="Introduction" disable-copy>
+        <p>
+            TallStackUI offers several useful commands to help during the development
+            process of your projects that use TallStackUI. On this page we will list
+            all the commands and their references for explanations or details.
+        </p>
+    </x-section>
+    <x-section title="Setup Icons" disable-copy>
+        <p>
+            Command to setup icons. <a class="underline" href="{{ route('documentation.ui.icon') }}">
+                See the details of the command and how to use it by clicking here.
+            </a>
+        </p>
+    </x-section>
+    <x-section title="Setup Prefix" disable-copy>
+        <p>
+            Command to setup prefix. <a class="underline" href="{{ route('documentation.installation').'#component-prefix' }}">
+                See the details of the command and how to use it by clicking here.
+            </a>
+        </p>
+    </x-section>
+    <x-section title="Find Component" disable-copy new>
+        <p>
+            Command used to find component usages in all Blade files.
+        </p>
+        <x-code language="shell" :contents="$findComponent"/>
+        <p>
+            After running the command, you will need to select the component
+            you want to find usages for, and then the command will list all
+            the files that use the selected component, and also the line number
+            where the component is used. When any occurrence is found, the output
+            will be similar to the following:
+        </p>
+        <div class="flex justify-center items-center">
+            <img src="{{ asset('assets/images/find-component-output.png') }}"
+                 alt="Find Component Command Output">
+        </div>
+    </x-section>
+</x-layout>

routes/web.php

@@ -94,6 +94,7 @@
 
         Route::view('/dark-theme', 'documentation.helpers.dark-theme', Example::DarkTheme->variables())->name('dark-theme');
         Route::view('/configuration', 'documentation.configuration', Example::Configuration->variables())->name('configuration');
+        Route::view('/command', 'documentation.command', Example::Command->variables())->name('command');
         Route::view('/translation', 'documentation.translation', Example::Translation->variables())->name('translation');
         Route::view('/without-livewire', 'documentation.without-livewire', Example::WithoutLivewire->variables())->name('without-livewire');
         Route::view('/contribution', 'documentation.contribution', Example::Contribution->variables())->name('contribution');