<div><flux:sidebar sticky collapsible="mobile" class="bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700"> <flux:sidebar.header> <flux:sidebar.brand href="#" logo="https://fluxui.dev/img/demo/logo.png" logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." /> <flux:sidebar.collapse class="lg:hidden" /> </flux:sidebar.header> <flux:sidebar.search placeholder="Search..." /> <flux:sidebar.nav> <flux:sidebar.item icon="home" href="#" current>Home</flux:sidebar.item> <flux:sidebar.item icon="inbox" badge="12" href="#">Inbox</flux:sidebar.item> <flux:sidebar.item icon="document-text" href="#">Documents</flux:sidebar.item> <flux:sidebar.item icon="calendar" href="#">Calendar</flux:sidebar.item> <flux:sidebar.group expandable heading="Favorites" class="grid"> <flux:sidebar.item href="#">Marketing site</flux:sidebar.item> <flux:sidebar.item href="#">Android app</flux:sidebar.item> <flux:sidebar.item href="#">Brand guidelines</flux:sidebar.item> </flux:sidebar.group> </flux:sidebar.nav> <flux:sidebar.spacer /> <flux:sidebar.nav> <flux:sidebar.item icon="cog-6-tooth" href="#">Settings</flux:sidebar.item> <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item> </flux:sidebar.nav> <flux:dropdown position="top" align="start" class="max-lg:hidden"> <flux:sidebar.profile avatar="/img/demo/user.png" name="Olivia Martin" /> <flux:menu> <flux:menu.radio.group> <flux:menu.radio checked>Olivia Martin</flux:menu.radio> <flux:menu.radio>Truly Delta</flux:menu.radio> </flux:menu.radio.group> <flux:menu.separator /> <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item> </flux:menu> </flux:dropdown> </flux:sidebar> <flux:header class="lg:hidden"> <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" /> <flux:spacer /> <flux:profile avatar="/img/demo/user.png" /> </flux:header> <flux:main container class="max-w-xl lg:max-w-3xl"> <flux:heading size="xl">Settings</flux:heading> <flux:separator variant="subtle" class="my-8" /> <div class="flex flex-col lg:flex-row gap-4 lg:gap-6"> <div class="w-80"> <flux:heading size="lg">Profile</flux:heading> <flux:subheading>This is how others will see you on the site.</flux:subheading> </div> <div class="flex-1 space-y-6"> <flux:input label="Username" description="This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days." placeholder="calebporzio" /> <flux:select label="Primary email" description:trailing="You can manage verified email addresses in your email settings." placeholder="Select primary email..." > <flux:select.option>lotrrules22@aol.com</flux:select.option> <flux:select.option>phantomatrix@hotmail.com</flux:select.option> </flux:select> <flux:textarea label="Bio" description:trailing="You can @mention other users and organizations to link to them." placeholder="Tell us a little bit about yourself" /> <div class="flex justify-end"> <flux:button type="submit" variant="primary">Save profile</flux:button> </div> </div> </div> <flux:separator variant="subtle" class="my-8" /> <div class="flex flex-col lg:flex-row gap-4 lg:gap-6"> <div class="w-80"> <flux:heading size="lg">Preferences</flux:heading> <flux:subheading>Customize your layout and notification preferences.</flux:subheading> </div> <div class="flex-1 space-y-6"> <flux:checkbox.group label="Sidebar" description="Select the items you want to display in the sidebar."> <flux:checkbox value="recents" label="Recents" checked /> <flux:checkbox value="home" label="Home" checked /> <flux:checkbox value="applications" label="Applications" /> <flux:checkbox value="desktop" label="Desktop" /> </flux:checkbox.group> <flux:separator variant="subtle" class="my-8" /> <flux:radio.group label="Notify me about..."> <flux:radio value="all" label="All new messages" checked /> <flux:radio value="direct" label="Direct messages and mentions" /> <flux:radio value="none" label="Nothing" /> </flux:radio.group> <div class="flex justify-end"> <flux:button type="submit" variant="primary">Save preferences</flux:button> </div> </div> </div> <flux:separator variant="subtle" class="my-8" /> <div class="flex flex-col lg:flex-row gap-4 lg:gap-6 pb-10"> <div class="w-80"> <flux:heading size="lg">Email notifications</flux:heading> <flux:subheading>Choose which emails you'd like to get from us.</flux:subheading> </div> <div class="flex-1 space-y-6"> <flux:fieldset class="space-y-4"> <flux:switch checked label="Communication emails" description="Receive emails about your account activity." /> <flux:separator variant="subtle" /> <flux:switch checked label="Marketing emails" description="Receive emails about new products, features, and more." /> <flux:separator variant="subtle" /> <flux:switch label="Social emails" description="Receive emails for friend requests, follows, and more." /> <flux:separator variant="subtle" /> <flux:switch label="Security emails" description="Receive emails about your account activity and security." /> </flux:fieldset> </div> </div> </flux:main></div><div> <flux:header class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700"> <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" /> <flux:brand href="#" logo="/img/demo/logo.png" name="Acme Inc." class="max-lg:hidden dark:hidden" /> <flux:brand href="#" logo="/img/demo/dark-mode-logo.png" name="Acme Inc." class="max-lg:hidden! hidden dark:flex" /> <flux:navbar class="max-lg:hidden"> <flux:dropdown> <flux:navbar.item icon:trailing="chevron-down">Recent</flux:navbar.item> <flux:navmenu> <flux:navbar.item href="#">Projects</flux:navbar.item> <flux:navbar.item href="#">Tasks</flux:navbar.item> <flux:navbar.item href="#">Files</flux:navbar.item> </flux:navmenu> </flux:dropdown> <flux:dropdown> <flux:navbar.item icon:trailing="chevron-down">Starred</flux:navbar.item> <flux:navmenu> <flux:navbar.item href="#">Users</flux:navbar.item> <flux:navbar.item href="#">Events</flux:navbar.item> <flux:navbar.item href="#">Products</flux:navbar.item> </flux:navmenu> </flux:dropdown> </flux:navbar> <flux:spacer /> <flux:navbar class="mr-4"> <flux:navbar.item square icon="magnifying-glass" href="#" label="Search" /> <flux:navbar.item class="max-lg:hidden" square icon="cog-6-tooth" href="#" label="Settings" /> <flux:navbar.item class="max-lg:hidden" square icon="information-circle" href="#" label="Help" /> </flux:navbar> <flux:profile avatar="/img/demo/user.png" /> </flux:header> <flux:sidebar sticky collapsible="mobile" class="lg:hidden bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700"> <flux:sidebar.header> <flux:sidebar.brand href="#" logo="https://fluxui.dev/img/demo/logo.png" logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." /> <flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" /> </flux:sidebar.header> <flux:sidebar.nav> <flux:sidebar.item icon="home" href="#" current>Home</flux:sidebar.item> <flux:sidebar.item icon="inbox" badge="12" href="#">Inbox</flux:sidebar.item> <flux:sidebar.item icon="document-text" href="#">Documents</flux:sidebar.item> <flux:sidebar.item icon="calendar" href="#">Calendar</flux:sidebar.item> <flux:sidebar.group expandable heading="Favorites" class="grid"> <flux:sidebar.item href="#">Marketing site</flux:sidebar.item> <flux:sidebar.item href="#">Android app</flux:sidebar.item> <flux:sidebar.item href="#">Brand guidelines</flux:sidebar.item> </flux:sidebar.group> </flux:sidebar.nav> <flux:sidebar.spacer /> <flux:sidebar.nav> <flux:sidebar.item icon="cog-6-tooth" href="#">Settings</flux:sidebar.item> <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item> </flux:sidebar.nav> </flux:sidebar> <flux:main> <div class="flex flex-col md:flex-row gap-6 justify-between md:items-center mb-6"> <flux:breadcrumbs> <flux:breadcrumbs.item href="#" divider="slash">Acme Inc.</flux:breadcrumbs.item> <flux:breadcrumbs.item href="#" divider="slash">iOS App V2</flux:breadcrumbs.item> </flux:breadcrumbs> <div class="flex gap-4"> <flux:dropdown position="bottom" align="end"> <flux:button size="sm" variant="filled" icon:trailing="chevron-down">Filters</flux:button> <flux:menu> <flux:menu.item>Archive</flux:menu.item> <flux:menu.item>Delete</flux:menu.item> </flux:menu> </flux:dropdown> <flux:tabs variant="segmented" size="sm" class="-my-px h-auto! max-md:hidden"> <flux:tab name="board" selected>Board</flux:tab> <flux:tab name="list">List</flux:tab> <flux:tab name="timeline">Timeline</flux:tab> </flux:tabs> <flux:separator vertical class="my-2" /> <flux:avatar.group> @foreach (['Caleb Porzio', 'River Porzio', 'Knox Porzio'] as $item) <flux:avatar size="sm" tooltip name="{{ $item }}" src="https://i.pravatar.cc/100?img={{ $loop->index + 12 }}" /> @endforeach <flux:avatar size="sm">3+</flux:avatar> </flux:avatar.group> <flux:button variant="filled" size="sm">Invite</flux:button> </div> </div> <div class="overflow-x-auto -m-6 p-6"> <div class="flex gap-4"> @foreach ($this->columns as $column) <div> <div class="rounded-lg w-80 max-w-80 bg-zinc-400/5 dark:bg-zinc-900"> <div class="px-4 py-4 flex justify-between items-start"> <div> <flux:heading>{{ $column['title'] }}</flux:heading> <flux:subheading class="mb-0!">11 tasks</flux:subheading> </div> <flux:button variant="subtle" icon="ellipsis-horizontal" size="sm" /> </div> <div class="flex flex-col gap-2 px-2"> @foreach ($column['cards'] as $card) <div class="bg-white rounded-lg shadow-xs border border-zinc-200 dark:border-white/10 dark:bg-zinc-800 p-3 space-y-2"> <div class="flex gap-2"> @foreach ($card['badges'] as $badge) <flux:badge :color="$badge['color']" size="sm">{{ $badge['title'] }}</flux:badge> @endforeach </div> <flux:heading>{{ $card['title'] }}</flux:heading> </div> @endforeach </div> <div class="px-2 py-2"> <flux:button variant="subtle" icon="plus" size="sm" class="w-full justify-start!">New task</flux:button> </div> </div> </div> @endforeach </div> </div> </flux:main></div><!-- #[\Livewire\Attributes\Computed] public function columns() { return [ [ 'title' => 'Backlog', 'cards' => [ [ 'title' => 'User Reports Slow Load Times on Profile Page', 'badges' => [ ['title' => 'Bug', 'color' => 'red'], ] ], [ 'title' => 'Inconsistent Button Styles on Settings Page', 'badges' => [ ['title' => 'UI', 'color' => 'blue'], ] ], [ 'title' => 'Investigate Unhandled Exception on Login', 'badges' => [ ['title' => 'Bug', 'color' => 'red'], ['title' => 'High priority', 'color' => 'yellow'], ] ], [ 'title' => 'Database Migration for New Analytics Table', 'badges' => [ ['title' => 'Backend', 'color' => 'green'], ] ], [ 'title' => 'Correct Misalignment of Icons in Footer', 'badges' => [ ['title' => 'UI', 'color' => 'blue'], ] ] ] ], [ 'title' => 'Planned', 'cards' => [ [ 'title' => 'Update Privacy Policy in App', 'badges' => [ ['title' => 'UI', 'color' => 'blue'], ] ], [ 'title' => 'Fix Issue with Search Bar Auto-Suggestions', 'badges' => [ ['title' => 'Bug', 'color' => 'red'], ['title' => 'UI', 'color' => 'blue'], ] ], [ 'title' => 'Improve Loading Spinner Visuals', 'badges' => [ ['title' => 'UI', 'color' => 'blue'], ] ], [ 'title' => 'Fix Date Picker Not Accepting Keyboard Input', 'badges' => [ ['title' => 'Bug', 'color' => 'red'], ] ], [ 'title' => 'Fix Permissions Issue in Admin Panel', 'badges' => [ ['title' => 'Backend', 'color' => 'green'], ['title' => 'Bug', 'color' => 'red'], ] ], [ 'title' => 'Resolve Broken Image Links in Product Gallery', 'badges' => [ ['title' => 'Bug', 'color' => 'red'], ] ] ] ], [ 'title' => 'In Progress', 'cards' => [ [ 'title' => 'Responsive Improvements on Mobile', 'badges' => [ ['title' => 'UI', 'color' => 'blue'], ] ], [ 'title' => 'Fix Issue with Sorting in Data Tables', 'badges' => [ ['title' => 'Bug', 'color' => 'red'], ['title' => 'UI', 'color' => 'blue'], ] ], [ 'title' => 'Update API to Return Consistent Error Codes', 'badges' => [ ['title' => 'Backend', 'color' => 'green'], ] ], [ 'title' => 'Accessibility Audit', 'badges' => [ ['title' => 'UI', 'color' => 'blue'], ] ], [ 'title' => 'UI/UX Exploration for User Dashboard', 'badges' => [ ['title' => 'UI', 'color' => 'blue'], ] ] ] ], [ 'title' => 'In review', 'cards' => [ [ 'title' => 'Resolve Issue with Double-Click on Buttons', 'badges' => [ ['title' => 'Bug', 'color' => 'red'], ['title' => 'UI', 'color' => 'blue'], ] ], [ 'title' => 'Crash on Large File Upload', 'badges' => [ ['title' => 'High priority', 'color' => 'yellow'], ] ], [ 'title' => 'Concurrent Request Handling in API', 'badges' => [ ['title' => 'Backend', 'color' => 'green'], ] ] ] ] ]; }--><div> <flux:header sticky container class="bg-white dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-600"> <flux:sidebar.toggle class="lg:hidden" icon="bars-2" /> <flux:navbar class="max-lg:hidden -mb-px"> <flux:navbar.item href="#" data-current>Dashboard</flux:navbar.item> <flux:navbar.item href="#" badge="32">Orders</flux:navbar.item> <flux:navbar.item href="#">Catalog</flux:navbar.item> <flux:navbar.item href="#">Configuration</flux:navbar.item> </flux:navbar> </flux:header> <flux:sidebar collapsible="mobile" class="lg:hidden bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700"> <flux:sidebar.toggle class="lg:hidden" icon="x-mark" /> <flux:sidebar.nav> <flux:sidebar.item href="#" data-current>Dashboard</flux:sidebar.item> <flux:sidebar.item href="#" badge="32">Orders</flux:sidebar.item> <flux:sidebar.item href="#">Catalog</flux:sidebar.item> <flux:sidebar.item href="#">Configuration</flux:sidebar.item> </flux:sidebar.nav> </flux:sidebar> <flux:main container> <div class="flex justify-between items-center mb-6"> <div class="flex items-center gap-2"> <div class="flex items-center gap-2"> <flux:select size="sm" class=""> <option>Last 7 days</option> <option>Last 14 days</option> <option selected>Last 30 days</option> <option>Last 60 days</option> <option>Last 90 days</option> </flux:select> <flux:subheading class="max-md:hidden whitespace-nowrap">compared to</flux:subheading> <flux:select size="sm" class="max-md:hidden"> <option selected>Previous period</option> <option>Same period last year</option> <option>Last month</option> <option>Last quarter</option> <option>Last 6 months</option> <option>Last 12 months</option> </flux:select> </div> <flux:separator vertical class="max-lg:hidden mx-2 my-2" /> <div class="max-lg:hidden flex justify-start items-center gap-2"> <flux:subheading class="whitespace-nowrap">Filter by:</flux:subheading> <flux:badge as="button" variant="pill" color="zinc" icon="plus" size="lg">Amount</flux:badge> <flux:badge as="button" variant="pill" color="zinc" icon="plus" size="lg" class="max-md:hidden">Status</flux:badge> <flux:badge as="button" variant="pill" color="zinc" icon="plus" size="lg">More filters...</flux:badge> </div> </div> <flux:tabs variant="segmented" class="w-auto! ml-2" size="sm"> <flux:tab icon="list-bullet" icon:variant="outline" /> <flux:tab icon="squares-2x2" icon:variant="outline" /> </flux:tabs> </div> <div class="flex gap-6 mb-6"> @foreach ($this->stats as $stat) <div class="relative flex-1 rounded-lg px-6 py-4 bg-zinc-50 dark:bg-zinc-700 {{ $loop->iteration > 1 ? 'max-md:hidden' : '' }} {{ $loop->iteration > 3 ? 'max-lg:hidden' : '' }}"> <flux:subheading>{{ $stat['title'] }}</flux:subheading> <flux:heading size="xl" class="mb-2">{{ $stat['value'] }}</flux:heading> <div class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-green-600 dark:text-green-400 @else text-red-500 dark:text-red-400 @endif"> <flux:icon :icon="$stat['trendUp'] ? 'arrow-trending-up' : 'arrow-trending-down'" variant="micro" /> {{ $stat['trend'] }} </div> <div class="absolute top-0 right-0 pr-2 pt-2"> <flux:button icon="ellipsis-horizontal" variant="subtle" size="sm" /> </div> </div> @endforeach </div> <flux:table> <flux:table.columns> <flux:table.column></flux:table.column> <flux:table.column class="max-md:hidden">ID</flux:table.column> <flux:table.column class="max-md:hidden">Date</flux:table.column> <flux:table.column class="max-md:hidden">Status</flux:table.column> <flux:table.column><span class="max-md:hidden">Customer</span><div class="md:hidden w-6"></div></flux:table.column> <flux:table.column>Purchase</flux:table.column> <flux:table.column>Revenue</flux:table.column> <flux:table.column></flux:table.column> </flux:table.columns> <flux:table.rows> @foreach ($this->rows as $row) <flux:table.row> <flux:table.cell class="pr-2"><flux:checkbox /></flux:table.cell> <flux:table.cell class="max-md:hidden">#{{ $row['id'] }}</flux:table.cell> <flux:table.cell class="max-md:hidden">{{ $row['date'] }}</flux:table.cell> <flux:table.cell class="max-md:hidden"><flux:badge :color="$row['status_color']" size="sm" inset="top bottom">{{ $row['status'] }}</flux:badge></flux:table.cell> <flux:table.cell class="min-w-6"> <div class="flex items-center gap-2"> <flux:avatar src="https://i.pravatar.cc/48?img={{ $loop->index }}" size="xs" /> <span class="max-md:hidden">{{ $row['customer'] }}</span> </div> </flux:table.cell> <flux:table.cell class="max-w-6 truncate">{{ $row['purchase'] }}</flux:table.cell> <flux:table.cell class="" variant="strong">{{ $row['amount'] }}</flux:table.cell> <flux:table.cell> <flux:dropdown position="bottom" align="end" offset="-15"> <flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom"></flux:button> <flux:menu> <flux:menu.item icon="document-text">View invoice</flux:menu.item> <flux:menu.item icon="receipt-refund">Refund</flux:menu.item> <flux:menu.item icon="archive-box" variant="danger">Archive</flux:menu.item> </flux:menu> </flux:dropdown> </flux:table.cell> </flux:table.row> @endforeach </flux:table.rows> </flux:table> <flux:pagination :paginator="$this->paginator" /> </flux:main></div><!-- use \Livewire\WithPagination; #[\Livewire\Attributes\Computed] public function paginator() { return new \Illuminate\Pagination\LengthAwarePaginator(items: range(1, 50), total: 100, perPage: 10, currentPage: 1); } #[\Livewire\Attributes\Computed] public function stats() { return [ [ 'title' => 'Total revenue', 'value' => '$38,393.12', 'trend' => '16.2%', 'trendUp' => true ], [ 'title' => 'Total transactions', 'value' => '428', 'trend' => '12.4%', 'trendUp' => false ], [ 'title' => 'Total customers', 'value' => '376', 'trend' => '12.6%', 'trendUp' => true ], [ 'title' => 'Average order value', 'value' => '$87.12', 'trend' => '13.7%', 'trendUp' => true ] ]; } #[\Livewire\Attributes\Computed] public function rows() { return \App\Models\Order::all(); }--><div> {{-- Header --}} <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="#" name="Podium" class="max-lg:hidden"> <div class="flex aspect-square items-center justify-center rounded-md bg-accent text-accent-foreground"> <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:brand> <flux:navbar class="-mb-px max-lg:hidden"> <flux:navbar.item href="#">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"> <div class="relative rounded-full size-6"> <img src="https://fluxui.dev/img/demo/prime.png" class="size-full rounded-full" /> <div class="absolute -bottom-px -right-px rounded-full size-2 border-2 border-red-50 dark:border-red-950 bg-red-600 dark:bg-red-500"></div> </div> <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 /> <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full"> Log out </flux:menu.item> </flux:menu> </flux:dropdown> </flux:header> {{-- Mobile sidebar --}} <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> {{-- Main content --}} <div> {{-- Secondary header --}} <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>77</flux:text> </div> <flux:spacer /> <div class="flex items-center gap-2"> <flux:select variant="listbox" 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" selected>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" 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" selected>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 icon="pencil-square" 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"> {{-- Loop: questions... --}} <div class="p-3 sm:p-4 rounded-lg"> <div class="flex flex-row sm:items-center gap-2"> <flux:avatar src="https://randomuser.me/api/portraits/men/1.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>John Doe</flux:heading> <flux:badge color="lime" size="sm" icon="check-badge" inset="top bottom">Moderator</flux:badge> </div> <flux:text class="text-sm">2 days ago</flux:text> </div> </div> <div class="min-h-2 sm:min-h-1"></div> <div class="pl-8"> <flux:text variant="strong">What is the best way to learn Laravel?</flux:text> <div class="min-h-2"></div> <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"> <flux:icon.hand-thumb-up name="hand-thumb-up" variant="outline" class="size-4 text-zinc-400 [&_path]:stroke-[2.25]" /> <flux:text class="text-sm text-zinc-500 dark:text-zinc-400 tabular-nums">12</flux:text> </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> </div> </div> <div class="p-3 sm:p-4 rounded-lg 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/2.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>Sarah Smith</flux:heading> </div> <flux:text class="text-sm">3 days ago</flux:text> </div> </div> <div class="min-h-2 sm:min-h-1"></div> <div class="pl-8"> <flux:text variant="strong">I'm trying to learn Laravel, but I'm not sure where to start. Any advice?</flux:text> <div class="min-h-2"></div> <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> </div> </div> <div class="p-3 sm:p-4 rounded-lg"> <div class="flex flex-row sm:items-center gap-2"> <flux:avatar src="https://randomuser.me/api/portraits/men/3.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>Jane Doe</flux:heading> </div> <flux:text class="text-sm">4 days ago</flux:text> </div> </div> <div class="min-h-2 sm:min-h-1"></div> <div class="pl-8"> <flux:text variant="strong">Where can I find the best tutorials for Laravel?</flux:text> <div class="min-h-2"></div> <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"> <flux:icon.hand-thumb-up name="hand-thumb-up" variant="solid" class="size-4 text-accent-content" data-animate-wiggle /> <flux:text class="text-sm text-accent-content tabular-nums">92</flux:text> </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> </div> </div> <div class="p-3 sm:p-4 rounded-lg"> <div class="flex flex-row sm:items-center gap-2"> <flux:avatar src="https://randomuser.me/api/portraits/men/4.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>Samantha Doe</flux:heading> </div> <flux:text class="text-sm">5 days ago</flux:text> </div> </div> <div class="min-h-2 sm:min-h-1"></div> <div class="pl-8"> <flux:text variant="strong">When is the best time to use Tailwind CSS?</flux:text> <div class="min-h-2"></div> <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"> <flux:icon.hand-thumb-up name="hand-thumb-up" variant="solid" class="size-4 text-accent-content" data-animate-wiggle /> <flux:text class="text-sm text-accent-content tabular-nums">100</flux:text> </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> </div> </div> </div> </div></div><div class="flex min-h-screen"> <div class="flex-1 flex justify-center items-center"> <div class="w-80 max-w-80 space-y-6"> <div class="flex justify-center opacity-50"> <a href="/" class="group flex items-center gap-3"> <div> <svg class="h-4 text-zinc-800 dark:text-white" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <g> <line x1="1" y1="5" x2="1" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line> <line x1="5" y1="1" x2="5" y2="8" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line> <line x1="9" y1="5" x2="9" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line> <line x1="13" y1="1" x2="13" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line> <line x1="17" y1="5" x2="17" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line> </g> </svg> </div> <span class="text-xl font-semibold text-zinc-800 dark:text-white">flux</span> </a> </div> <flux:heading class="text-center" size="xl">Welcome back</flux:heading> <div class="space-y-4"> <flux:button class="w-full"> <x-slot name="icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23.06 12.25C23.06 11.47 22.99 10.72 22.86 10H12.5V14.26H18.42C18.16 15.63 17.38 16.79 16.21 17.57V20.34H19.78C21.86 18.42 23.06 15.6 23.06 12.25Z" fill="#4285F4"/> <path d="M12.4997 23C15.4697 23 17.9597 22.02 19.7797 20.34L16.2097 17.57C15.2297 18.23 13.9797 18.63 12.4997 18.63C9.63969 18.63 7.20969 16.7 6.33969 14.1H2.67969V16.94C4.48969 20.53 8.19969 23 12.4997 23Z" fill="#34A853"/> <path d="M6.34 14.0899C6.12 13.4299 5.99 12.7299 5.99 11.9999C5.99 11.2699 6.12 10.5699 6.34 9.90995V7.06995H2.68C1.93 8.54995 1.5 10.2199 1.5 11.9999C1.5 13.7799 1.93 15.4499 2.68 16.9299L5.53 14.7099L6.34 14.0899Z" fill="#FBBC05"/> <path d="M12.4997 5.38C14.1197 5.38 15.5597 5.94 16.7097 7.02L19.8597 3.87C17.9497 2.09 15.4697 1 12.4997 1C8.19969 1 4.48969 3.47 2.67969 7.07L6.33969 9.91C7.20969 7.31 9.63969 5.38 12.4997 5.38Z" fill="#EA4335"/> </svg> </x-slot> Continue with Google </flux:button> <flux:button class="w-full"> <x-slot name="icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_614_12799)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4642 0C5.84833 0 0.5 5.5 0.5 12.3043C0.5 17.7433 3.92686 22.3473 8.68082 23.9768C9.27518 24.0993 9.4929 23.712 9.4929 23.3863C9.4929 23.101 9.47331 22.1233 9.47331 21.1045C6.14514 21.838 5.45208 19.6378 5.45208 19.6378C4.91723 18.2118 4.12474 17.8453 4.12474 17.8453C3.03543 17.0915 4.20408 17.0915 4.20408 17.0915C5.41241 17.173 6.04645 18.3545 6.04645 18.3545C7.11592 20.2285 8.83927 19.699 9.53257 19.373C9.63151 18.5785 9.94865 18.0285 10.2854 17.723C7.63094 17.4378 4.83812 16.3785 4.83812 11.6523C4.83812 10.3078 5.31323 9.20775 6.06604 8.35225C5.94727 8.04675 5.53118 6.7835 6.18506 5.09275C6.18506 5.09275 7.19527 4.76675 9.47306 6.35575C10.4483 6.08642 11.454 5.9494 12.4642 5.94825C13.4745 5.94825 14.5042 6.091 15.4552 6.35575C17.7332 4.76675 18.7434 5.09275 18.7434 5.09275C19.3973 6.7835 18.981 8.04675 18.8622 8.35225C19.6349 9.20775 20.0904 10.3078 20.0904 11.6523C20.0904 16.3785 17.2976 17.4173 14.6233 17.723C15.0592 18.11 15.4353 18.8433 15.4353 20.0045C15.4353 21.6545 15.4158 22.9788 15.4158 23.386C15.4158 23.712 15.6337 24.0993 16.2278 23.977C20.9818 22.347 24.4087 17.7433 24.4087 12.3043C24.4282 5.5 19.0603 0 12.4642 0Z" fill="currentColor"/> </g> <defs> <clipPath id="clip0_614_12799"> <rect width="24" height="24" fill="white" transform="translate(0.5)"/> </clipPath> </defs> </svg> </x-slot> Continue with GitHub </flux:button> </div> <flux:separator text="or" /> <div class="flex flex-col gap-6"> <flux:input label="Email" type="email" placeholder="email@example.com" /> <flux:field> <div class="mb-3 flex justify-between"> <flux:label>Password</flux:label> <flux:link href="#" variant="subtle" class="text-sm">Forgot password?</flux:link> </div> <flux:input type="password" placeholder="Your password" /> </flux:field> <flux:checkbox label="Remember me for 30 days" /> <flux:button variant="primary" class="w-full">Log in</flux:button> </div> <flux:subheading class="text-center"> First time around here? <flux:link href="#">Sign up for free</flux:link> </flux:subheading> </div> </div> <div class="flex-1 p-4 max-lg:hidden"> <div class="text-white relative rounded-lg h-full w-full bg-zinc-900 flex flex-col items-start justify-end p-16" style="background-image: url('/img/demo/auth_aurora_2x.png'); background-size: cover"> <div class="flex gap-2 mb-4"> <flux:icon.star variant="solid" /> <flux:icon.star variant="solid" /> <flux:icon.star variant="solid" /> <flux:icon.star variant="solid" /> <flux:icon.star variant="solid" /> </div> <div class="mb-6 italic font-base text-3xl xl:text-4xl"> Flux has enabled me to design, build, and deliver apps faster than ever before. </div> <div class="flex gap-4"> <flux:avatar src="https://fluxui.dev/img/demo/caleb.png" size="xl" /> <div class="flex flex-col justify-center font-medium"> <div class="text-lg">Caleb Porzio</div> <div class="text-zinc-300">Creator of Livewire</div> </div> </div> </div> </div></div>