Day 21 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 21

Press ESC to exit

Source

Day 21

Command Palette & File Icons

Global search modal with Cmd+K shortcut and file type icon display

Command Palette

Global search modal with keyboard shortcut (Cmd+K / Ctrl+K) and live filtered results.

Features

Global keyboard shortcut (Cmd+K / Ctrl+K)
Live search with Livewire debounce
File and command suggestions
Keyboard shortcuts display
Backdrop blur and smooth transitions

Try It

Or press Cmd+K / Ctrl+K anywhere

Available Commands

File: New File Ctrl+N

File: New Folder Ctrl+Shift+N

File: Save Ctrl+S

File: Export Project

File Icon / Mime Type

Display appropriate icons based on file extension with color-coded categories.

Features

30+ file extension support
Color-coded by file category
Multiple sizes (xs, sm, md, lg, xl)
Dark mode support
Fallback for unknown extensions

Icon Sizes

File List Example

document.pdf

pdf

2.5 MB

spreadsheet.xlsx

xlsx

156 KB

presentation.pptx

pptx

4.2 MB

report.docx

docx

890 KB

archive.zip

zip

12 MB

image.png

png

1.2 MB

video.mp4

mp4

45 MB

music.mp3

mp3

3.8 MB

script.js

24 KB

styles.css

css

18 KB

component.vue

vue

8 KB

data.json

json

4 KB

config.yaml

yaml

2 KB

notes.txt

txt

1 KB

database.sql

sql

56 KB

Usage Examples

Command Palette Usage

{{-- In your Livewire component --}}
public bool $showCommandPalette = false;
public string $searchQuery = '';
public array $filteredResults = [];
 
public function openCommandPalette(): void
{
    $this->showCommandPalette = true;
}
 
public function closeCommandPalette(): void
{
    $this->showCommandPalette = false;
}
 
{{-- In your Blade view --}}
<x-ui.command-palette
    placeholder="Search..."
>
    {{-- Results content --}}
    @foreach($filteredResults as $result)
        <button wire:click="selectResult(...)">
            {{ $result['title'] }}
        </button>
    @endforeach
</x-ui.command-palette>
 
{{-- Keyboard shortcut opens modal --}}
{{-- Cmd+K / Ctrl+K --}}
 
{{-- Live search with debounce --}}
wire:model.live.debounce.150ms="searchQuery"

File Icon Usage

{{-- Basic usage --}}
<x-ui.file-icon extension="pdf" />
<x-ui.file-icon extension="xlsx" />
<x-ui.file-icon extension="js" />
 
{{-- With size --}}
<x-ui.file-icon extension="png" size="xs" />
<x-ui.file-icon extension="png" size="sm" />
<x-ui.file-icon extension="png" size="md" />
<x-ui.file-icon extension="png" size="lg" />
<x-ui.file-icon extension="png" size="xl" />
 
{{-- Dynamic from variable --}}
<x-ui.file-icon :extension="$file->extension" />
 
{{-- Supported categories --}}
{{-- Documents: pdf, doc, docx, txt, md --}}
{{-- Spreadsheets: xls, xlsx, csv --}}
{{-- Presentations: ppt, pptx --}}
{{-- Images: jpg, png, gif, svg, webp --}}
{{-- Videos: mp4, mov, avi, webm --}}
{{-- Audio: mp3, wav, ogg, flac --}}
{{-- Archives: zip, rar, 7z, tar, gz --}}
{{-- Code: js, ts, php, py, html, css --}}
{{-- Data: json, xml, yaml, yml --}}
{{-- Database: sql, db, sqlite --}}