huginn/resources/views/livewire/discover/search.blade.php

<div class="mx-auto max-w-5xl px-4 py-8">
    <h1 class="text-2xl font-semibold">Discover competitors</h1>
    <p class="mt-1 text-sm text-neutral-500">
        Find sites by what they sell, where, and what they're built on — e.g. keyword "honey", TLD "es", platform "Shopify".
    </p>

    <div class="mt-6 flex flex-wrap gap-3">
        <input
            type="search"
            wire:model.live.debounce.400ms="keyword"
            placeholder="Keyword, e.g. honey"
            class="w-full max-w-sm rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900"
        >
        <input
            type="text"
            wire:model.live.debounce.400ms="tld"
            placeholder="TLD, e.g. es"
            class="w-full max-w-[10rem] rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900"
        >
        <input
            type="text"
            wire:model.live.debounce.400ms="platform"
            placeholder="Platform, e.g. WordPress"
            class="w-full max-w-[14rem] rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900"
        >
        <input
            type="text"
            wire:model.live.debounce.400ms="language"
            placeholder="Language code, e.g. spa"
            class="w-full max-w-[12rem] rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900"
        >
    </div>

    <div class="mt-6 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
        <table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800">
            <thead class="bg-neutral-50 dark:bg-neutral-900">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Domain</th>
                    <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Title</th>
                    <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Platform</th>
                    <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-neutral-500">Matching pages</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-neutral-200 dark:divide-neutral-800">
                @forelse ($sites as $site)
                    <tr wire:key="site-{{ $site->id }}">
                        <td class="px-4 py-2 text-sm">
                            <a href="{{ route('sites.show', $site) }}" class="font-medium text-blue-600 hover:underline dark:text-blue-400">
                                {{ $site->domain }}
                            </a>
                        </td>
                        <td class="px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400">{{ $site->title ?? '—' }}</td>
                        <td class="px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400">{{ $site->generator ?? $site->powered_by ?? $site->server ?? '—' }}</td>
                        <td class="px-4 py-2 text-right text-sm text-neutral-600 dark:text-neutral-400">{{ $site->matching_pages_count }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-4 py-6 text-center text-sm text-neutral-500">
                            @if ($hasQuery)
                                No matching sites.
                            @else
                                Enter a keyword, TLD, platform, or language to search.
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">
        {{ $sites->links() }}
    </div>
</div>