Logo
Neura UI
Loading…
Logo
All pages 86

Web Search

Data-driven web-search tool state. Livewire (or any parent) owns the query, sources, and per-source status — the UI only reflects that data.

Livewire / real data

Pass query and sources with a state per item ( pending / loading / done ). Update them as your search job progresses. Listen to web-search-done when every source is done.
php
Searching “JWT auth vulnerabilities”
Example: one done, one loading, one pending — driven by data, not timers. 
<div @web-search-done="\$wire.onSearchDone(\$event.detail)">
    <neura::web-search
        :query="\$query"
        :sources="\$sources"
        :done="\$searchDone"
    />
</div>


public string \$query = 'JWT auth vulnerabilities';
public array \$sources = [
    ['title' => 'JWT verification…', 'url' => 'auth0.com/…', 'state' => 'loading'],
];
public bool \$searchDone = false;

public function onSearchDone(array \$detail): void
{
    \$this->searchDone = true;
}

Static snapshot

blade
Searching “Laravel Livewire Alpine patterns” 
<neura::web-search
    query="Laravel Livewire Alpine patterns"
    :sources="[
        ['title' => 'Livewire docs', 'url' => 'livewire.laravel.com/docs', 'state' => 'done'],
        ['title' => 'Alpine.js handbook', 'url' => 'alpinejs.dev/start-here', 'state' => 'done'],
    ]"
    :done="true"
/>

Demo animation

Optional: auto-play fakes a timed reveal for marketing / docs only.
blade
Searching “JWT auth vulnerabilities and middleware security best practices” 
<neura::web-search
    query="…"
    :sources="[…]"
    :auto-play="true"
    :loop="true"
/>

Props

Prop Type Default Description
query string '' Search string
sources array [] Items: title, url, state (pending|loading|done)
done bool false Force finished UI / emit web-search-done
autoPlay bool false Docs-only timed simulation