```blade
<?php
new class extends \Livewire\Component {
    public $filter = 'all';
    public $sort = 'popular';

    #[\Livewire\Attributes\Computed]
    public function questions()
    {
        return collect([
            [
                'user' => 'Confused Developer',
                'user_role' => 'user',
                'is_approved' => true,
                'created_at' => now()->subDays(30),
                'content' => 'If my code works but I don\'t know why, should I tell anyone?',
                'votes' => 42,
                'has_voted' => false,
            ],
            [
                'user' => 'BugHunter5000',
                'user_role' => 'subscriber',
                'is_approved' => false,
                'created_at' => now()->subDays(25),
                'content' => 'Why does my code work perfectly until my manager looks at it?',
                'votes' => 156,
                'has_voted' => true,
            ],
            [
                'user' => 'CoffeeFirst',
                'user_role' => 'user',
                'is_approved' => true,
                'created_at' => now()->subDays(20),
                'content' => 'Is it true that rubber duck debugging works better with a plastic duck?',
                'votes' => 89,
                'has_voted' => false,
            ],
            [
                'user' => 'SemicolonWarrior',
                'user_role' => 'moderator',
                'is_approved' => true,
                'created_at' => now()->subDays(15),
                'content' => 'How many developers does it take to change a light bulb?',
                'votes' => 234,
                'has_voted' => true,
            ],
            [
                'user' => 'GitMaster',
                'user_role' => 'user',
                'is_approved' => true,
                'created_at' => now()->subDays(10),
                'content' => 'If I git push hard enough, will my bugs disappear?',
                'votes' => 167,
                'has_voted' => false,
            ],
            [
                'user' => 'StackOverflowJunkie',
                'user_role' => 'subscriber',
                'is_approved' => true,
                'created_at' => now()->subDays(8),
                'content' => 'Is copying and pasting from Stack Overflow considered exercise?',
                'votes' => 321,
                'has_voted' => true,
            ],
            [
                'user' => 'DeadlineNinja',
                'user_role' => 'user',
                'is_approved' => true,
                'created_at' => now()->subDays(6),
                'content' => 'Can I use AI to attend my standup meetings for me?',
                'votes' => 145,
                'has_voted' => false,
            ],
            [
                'user' => 'BinaryWhisperer',
                'user_role' => 'moderator',
                'is_approved' => true,
                'created_at' => now()->subDays(4),
                'content' => 'If I dream in code, can I commit it directly to production?',
                'votes' => 198,
                'has_voted' => true,
            ],
            [
                'user' => 'CamelCaseHater',
                'user_role' => 'user',
                'is_approved' => true,
                'created_at' => now()->subDays(2),
                'content' => 'Why do we park on driveways but drive on parkways? Also, why is it called camelCase?',
                'votes' => 267,
                'has_voted' => false,
            ],
            [
                'user' => 'ZoomBackground',
                'user_role' => 'subscriber',
                'is_approved' => true,
                'created_at' => now()->subDay(),
                'content' => 'Is it unprofessional to have a meme as my IDE theme?',
                'votes' => 189,
                'has_voted' => true,
            ],
        ]);
    }
}
?>

{{-- This standalone demo keeps its application shell inline. In a production app, move shared navigation into your app layout. --}}

<div>
    <flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 flex items-center">
        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />

        <flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="max-lg:hidden dark:hidden" />
        <flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="max-lg:hidden! hidden dark:flex" />

        <flux:navbar class="-mb-px max-lg:hidden">
            <flux:navbar.item href="#" current>
                Questions
            </flux:navbar.item>

            <flux:navbar.item href="#">
                Leaderboard
            </flux:navbar.item>

            <flux:navbar.item href="#">
                Announcements
            </flux:navbar.item>
        </flux:navbar>

        <flux:spacer />

        <div class="rounded-full bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-500 p-1 flex items-center p-1 pr-2.5 gap-2">
            <flux:avatar src="https://fluxui.dev/img/demo/prime.png" circle badge badge:color="red" badge:circle size="xs" class="shrink-0" />

            <div class="text-sm font-medium text-red-600 dark:text-white">Live</div>
        </div>

        <flux:separator vertical variant="subtle" class="my-4 mx-3"/>

        <flux:dropdown position="top" align="end">
            <flux:profile class="cursor-pointer" avatar="https://fluxui.dev/img/demo/teej.png" />

            <flux:menu>
                <flux:menu.radio.group>
                    <div class="p-0 text-sm font-normal">
                        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                            <flux:avatar src="https://fluxui.dev/img/demo/teej.png" size="sm" class="shrink-0" />

                            <div class="grid flex-1 text-left text-sm leading-tight">
                                <span class="truncate font-semibold">John Doe</span>
                                <span class="truncate text-xs">john@doe.com</span>
                            </div>
                        </div>
                    </div>
                </flux:menu.radio.group>

                <flux:menu.separator />

                <flux:menu.radio.group>
                    <flux:menu.item href="/settings/profile" icon="cog">Settings</flux:menu.item>
                </flux:menu.radio.group>

                <flux:menu.separator />

                <form method="POST" action="#" class="w-full">
                    @csrf
                    <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
                        {{ __('Log Out') }}
                    </flux:menu.item>
                </form>
            </flux:menu>
        </flux:dropdown>
    </flux:header>

    <flux:sidebar collapsible="mobile" sticky class="lg:hidden border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
        <flux:sidebar.header>
            <flux:sidebar.brand href="#" name="Podium">
                <div class="flex aspect-square items-center justify-center rounded-md bg-accent text-accent-foreground p-1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic-vocal">
                        <path d="m11 7.601-5.994 8.19a1 1 0 0 0 .1 1.298l.817.818a1 1 0 0 0 1.314.087L15.09 12"/>
                        <path d="M16.5 21.174C15.5 20.5 14.372 20 13 20c-2.058 0-3.928 2.356-6 2-2.072-.356-2.775-3.369-1.5-4.5"/>
                        <circle cx="16" cy="7" r="5"/>
                    </svg>
                </div>
            </flux:sidebar.brand>

            <flux:sidebar.collapse class="lg:hidden" />
        </flux:sidebar.header>

        <flux:sidebar.nav variant="outline">
            <flux:sidebar.group>
                <flux:sidebar.item href="#" current>
                    Questions
                </flux:sidebar.item>

                <flux:sidebar.item href="#">
                    Leaderboard
                </flux:sidebar.item>

                <flux:sidebar.item href="#">
                    Announcements
                </flux:sidebar.item>
            </flux:sidebar.group>
        </flux:sidebar.nav>

        <flux:sidebar.spacer />
    </flux:sidebar>

    <div>
        <div class="sm:border-b border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800">
            <div class="max-w-7xl px-6 sm:px-8 py-3 mx-auto flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-2">
                <div class="max-sm:hidden flex items-baseline gap-3">
                    <flux:heading size="lg" class="text-lg">Questions</flux:heading>

                    <flux:text>{{ $this->questions->count() }}</flux:text>
                </div>

                <flux:spacer />

                <div class="flex items-center gap-2">
                    <flux:select variant="listbox" wire:model="filter" class="sm:max-w-fit">
                        <x-slot name="trigger">
                            <flux:select.button size="sm">
                                <flux:icon.funnel variant="micro" class="mr-2 text-zinc-400" />
                                <flux:select.selected />
                            </flux:select.button>
                        </x-slot>
                        <flux:select.option value="all">All</flux:select.option>
                        <flux:select.option value="unapproved">Unapproved</flux:select.option>
                        <flux:select.option value="approved">Approved</flux:select.option>
                    </flux:select>

                    <flux:select variant="listbox" wire:model="sort" class="sm:max-w-fit">
                        <x-slot name="trigger">
                            <flux:select.button size="sm">
                                <flux:icon.arrows-up-down variant="micro" class="mr-2 text-zinc-400" />
                                <flux:select.selected />
                            </flux:select.button>
                        </x-slot>
                        <flux:select.option value="popular">Most popular</flux:select.option>
                        <flux:select.option value="newest">Newest</flux:select.option>
                        <flux:select.option value="oldest">Oldest</flux:select.option>
                    </flux:select>
                </div>

                <flux:button size="sm" variant="primary">New question</flux:button>
            </div>
        </div>

        <div class="min-h-4 sm:min-h-10"></div>

        <div class="mx-auto max-w-lg max-sm:px-2">
            @foreach ($this->questions as $idx => $question)
                <div class="p-3 sm:p-4 rounded-lg {{ $question['is_approved'] ? '' : 'bg-zinc-50 dark:bg-zinc-700/50' }}">
                    <div class="flex flex-row sm:items-center gap-2">
                        <flux:avatar src="https://randomuser.me/api/portraits/men/{{ $idx }}.jpg" size="xs" class="shrink-0" />

                        <div class="flex flex-col gap-0.5 sm:gap-2 sm:flex-row sm:items-center">
                            <div class="flex items-center gap-2">
                                <flux:heading>{{ $question['user'] }}</flux:heading>

                                @if ($question['user_role'] === 'moderator')
                                    <flux:badge color="lime" size="sm" icon="check-badge" inset="top bottom">Moderator</flux:badge>
                                @endif
                            </div>

                            <flux:text class="text-sm">{{ $question['created_at']->diffForHumans() }}</flux:text>
                        </div>
                    </div>

                    <div class="min-h-2 sm:min-h-1"></div>

                    <div class="pl-8">
                        <flux:text variant="strong">{{ $question['content'] }}</flux:text>

                        <div class="min-h-2"></div>

                        @if ($question['is_approved'])
                            <div class="flex items-center gap-0">
                                <flux:button wire:click="$js.optimisticVote($el)" variant="ghost" size="sm" inset="left" class="flex items-center gap-2" :loading="false">
                                    @if ($question['has_voted'])
                                        <flux:icon.hand-thumb-up name="hand-thumb-up" variant="solid" class="size-4 text-accent-content" data-animate-wiggle />
                                    @else
                                        <flux:icon.hand-thumb-up name="hand-thumb-up" variant="outline" class="size-4 text-zinc-400 [&_path]:stroke-[2.25]" />
                                    @endif

                                    @if ($question['has_voted'])
                                        <flux:text class="text-sm text-accent-content tabular-nums">{{ $question['votes'] }}</flux:text>
                                    @else
                                        <flux:text class="text-sm text-zinc-500 dark:text-zinc-400 tabular-nums">{{ $question['votes'] }}</flux:text>
                                    @endif
                                </flux:button>

                                <flux:dropdown>
                                    <flux:button icon="ellipsis-horizontal" variant="subtle" size="sm" />

                                    <flux:menu class="min-w-0">
                                        <flux:menu.item icon="pencil-square">Edit</flux:menu.item>
                                        <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
                                    </flux:menu>
                                </flux:dropdown>
                            </div>
                        @else
                            <div class="flex items-center gap-2">
                                <flux:button size="sm">Approve</flux:button>
                                <flux:button size="sm" variant="filled" class="text-red-600! dark:text-red-500!">Delete</flux:button>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

```

