<?phpuse Carbon\CarbonImmutable;use Flux\DateRange;use Illuminate\Support\Number;use Livewire\Attributes\Computed;new class extends \Livewire\Component { public string $chartType = 'bar'; public DateRange $dateRange; public function mount(): void { $this->initializeDateRange(); } protected function initializeDateRange(): void { $this->dateRange = DateRange::last7Days(); } #[Computed] public function visitorData(): array { $visitorCounts = [369, 729, 852, 2150, 1250, 1383, 1165, 1875, 852, 729, 1042, 2415, 1250, 909, 1080, 1383, 814, 767, 559, 852, 1165, 767, 1761, 2150, 1165, 1042, 1496, 521, 1998, 1581, 1250]; $startDate = CarbonImmutable::create(2025, 6, 1); $visitorData = []; foreach ($visitorCounts as $index => $visitors) { $visitorData[] = [ 'date' => $startDate->addDays($index)->toDateString(), 'visitors' => $visitors, ]; } return $visitorData; } #[Computed] public function stats(): array { return [ ['label' => 'Visitors', 'value' => '128.6K', 'change' => '24.7%', 'trend' => 'up'], ['label' => 'Page views', 'value' => '389.1K', 'change' => '2.4%', 'trend' => 'down'], ['label' => 'Bounce rate', 'value' => '27.11%', 'change' => '1.7%', 'trend' => 'up'], ['label' => 'Average session', 'value' => '2m 57s', 'change' => '13.0%', 'trend' => 'up'], ]; } #[Computed] public function topPages(): array { return [ ['path' => '/', 'views' => 84600], ['path' => '/features', 'views' => 45800], ['path' => '/pricing', 'views' => 30700], ['path' => '/blog', 'views' => 29900], ['path' => '/docs', 'views' => 21200], ['path' => '/team', 'views' => 11100], ]; } #[Computed] public function topPageScale(): int { return 110000; } #[Computed] public function countries(): array { return [ ['name' => 'United States', 'visitors' => 42900, 'flag' => 'us'], ['name' => 'United Kingdom', 'visitors' => 18800, 'flag' => 'gb'], ['name' => 'Canada', 'visitors' => 12000, 'flag' => 'ca'], ['name' => 'Germany', 'visitors' => 9500, 'flag' => 'de'], ['name' => 'Brazil', 'visitors' => 7700, 'flag' => 'br'], ['name' => 'Sweden', 'visitors' => 5400, 'flag' => 'se'], ]; } #[Computed] public function sources(): array { return [ ['name' => 'Organic search', 'percentage' => 42], ['name' => 'Direct', 'percentage' => 29], ['name' => 'Referral', 'percentage' => 13], ['name' => 'Social', 'percentage' => 9], ['name' => 'Paid search', 'percentage' => 5], ['name' => 'AI referrals', 'percentage' => 2], ]; }}?>{{-- This standalone demo keeps its application shell inline. In a production app, move shared navigation into your app layout. --}}<div> <flux:sidebar sticky collapsible class="border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900"> <flux:sidebar.header> <flux:dropdown class="min-w-0 flex-1"> <flux:sidebar.brand as="button" logo="https://fluxui.dev/img/demo/logo.png" logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png" name="acme.co" icon:trailing="chevron-down" class="w-full" /> <flux:menu class="min-w-56"> <flux:menu.radio.group> <flux:menu.radio value="acme.co" checked>acme.co</flux:menu.radio> <flux:menu.radio value="shop.acme.co">shop.acme.co</flux:menu.radio> <flux:menu.radio value="docs.acme.co">docs.acme.co</flux:menu.radio> </flux:menu.radio.group> <flux:menu.separator /> <flux:menu.item icon="plus">Add property</flux:menu.item> </flux:menu> </flux:dropdown> <flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" /> </flux:sidebar.header> <flux:sidebar.search placeholder="Search..." /> <flux:sidebar.nav> <flux:sidebar.item icon="squares-2x2" href="#" current>Analytics</flux:sidebar.item> <flux:sidebar.item icon="user-group" href="#">Visitors</flux:sidebar.item> <flux:sidebar.item icon="chart-bar" href="#">Traffic</flux:sidebar.item> <flux:sidebar.item icon="document" href="#">Pages</flux:sidebar.item> <flux:sidebar.item icon="calendar-days" href="#">Events</flux:sidebar.item> <flux:sidebar.item icon="clock" href="#">Sessions</flux:sidebar.item> <flux:sidebar.item icon="device-phone-mobile" href="#">Devices</flux:sidebar.item> <flux:sidebar.item icon="sparkles" href="#">Insights</flux:sidebar.item> </flux:sidebar.nav> <flux:sidebar.spacer /> <flux:sidebar.nav> <flux:sidebar.item icon="user-group" href="#">Team</flux:sidebar.item> <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item> </flux:sidebar.nav> </flux:sidebar> <flux:header container class="border-b border-zinc-200 bg-white lg:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900"> <flux:sidebar.toggle class="me-4 lg:hidden" icon="bars-2" inset="left" /> <flux:breadcrumbs class="max-sm:hidden"> <flux:breadcrumbs.item href="#">Analytics</flux:breadcrumbs.item> <flux:breadcrumbs.item>Overview</flux:breadcrumbs.item> </flux:breadcrumbs> <flux:spacer /> <flux:navbar class="me-4"> <flux:navbar.item icon="cog-6-tooth" href="#" label="Settings" aria-label="Settings" /> <flux:navbar.item icon="bell" href="#" label="Notifications" aria-label="Notifications" /> </flux:navbar> <flux:dropdown position="top" align="start"> <flux:profile avatar="https://fluxui.dev/img/demo/user.png" aria-label="Account menu" /> <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:header> <flux:main container> <flux:heading level="1" class="sr-only">Analytics overview</flux:heading> <div class="flex flex-wrap items-center gap-x-2 gap-y-4"> <flux:select class="w-fit" variant="listbox" size="sm" prefix="Compare to"> <flux:select.option selected>Previous period</flux:select.option> <flux:select.option>Previous month</flux:select.option> <flux:select.option>Same period last year</flux:select.option> <flux:select.option>Custom…</flux:select.option> <flux:select.option>No comparison</flux:select.option> </flux:select> <flux:spacer /> <flux:dropdown class="sm:hidden"> <flux:button size="sm" icon="ellipsis-horizontal" aria-label="More actions" /> <flux:menu> <flux:menu.item icon="arrow-up-tray">Export</flux:menu.item> </flux:menu> </flux:dropdown> <flux:date-picker class="min-w-56 max-sm:w-full" mode="range" size="sm" with-presets wire:model="dateRange" /> <flux:button size="sm" icon="arrow-up-tray" class="max-sm:hidden">Export</flux:button> </div> <div class="h-4 sm:h-6"></div> <flux:carousel arrows:position="overlap" track:class="gap-5" fade> @foreach ($this->stats as $stat) <flux:carousel.slide class="min-w-56 grow basis-0"> <flux:card data-trend="{{ $stat['trend'] }}" variant="soft" class="relative min-w-0 py-4"> {{-- Leave room for the absolutely positioned action button. --}} <div class="pr-6"> <flux:text class="truncate font-medium">{{ $stat['label'] }}</flux:text> </div> <div class="absolute top-0 right-0 pt-2 pr-2"> <flux:button variant="subtle" size="sm" icon="ellipsis-horizontal" aria-label="More options for {{ $stat['label'] }}" /> </div> <flux:heading size="xl" class="mt-1">{{ $stat['value'] }}</flux:heading> <div class="mt-1 flex flex-wrap items-center gap-x-1"> <flux:text inline class="flex items-center gap-1 font-medium in-data-[trend=down]:text-red-500 in-data-[trend=up]:text-green-600 dark:in-data-[trend=down]:text-red-500 dark:in-data-[trend=up]:text-green-400"> <flux:icon.arrow-trending-up variant="micro" class="hidden in-data-[trend=up]:block" /> <flux:icon.arrow-trending-down variant="micro" class="hidden in-data-[trend=down]:block" /> {{ $stat['change'] }} </flux:text> <flux:text inline class="whitespace-nowrap">vs last month</flux:text> </div> </flux:card> </flux:carousel.slide> @endforeach </flux:carousel> <div class="h-8 sm:h-12"></div> <flux:card wire:bind:data-chart-type="chartType" class="space-y-6"> <div class="flex items-center justify-between gap-4"> <div class="flex min-w-0 items-center gap-2"> <flux:heading size="lg">Visitors</flux:heading> <flux:badge size="sm" color="zinc" rounded class="max-sm:hidden">Unique visitors</flux:badge> </div> <flux:radio.group wire:model="chartType" variant="segmented" size="sm"> <flux:radio value="bar" aria-label="Bar chart"> <slot name="icon"> <svg class="size-5 shrink-0 text-zinc-500 dark:text-zinc-400 [ui-radio[data-checked]_&]:text-zinc-800 dark:[ui-radio[data-checked]_&]:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" stroke-width="1.25" stroke="currentColor" aria-hidden="true" data-slot="icon"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.50009 2.5 2.49992 17.5H17.5001M15 14.1667V7.5M10.8333 14.1667V4.16667M6.66667 14.1667V11.6667" /> </svg> </slot> </flux:radio> <flux:radio value="line" aria-label="Line chart"> <slot name="icon"> <svg class="size-5 shrink-0 text-zinc-500 dark:text-zinc-400 [ui-radio[data-checked]_&]:text-zinc-800 dark:[ui-radio[data-checked]_&]:text-white" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" stroke-width="1.25" stroke="currentColor" aria-hidden="true" data-slot="icon"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.5 2.5 2.49984 17.5H17.5M5.83333 13.3333 9.16667 7.5 12.5 10 16.6667 4.16667" /> </svg> </slot> </flux:radio> </flux:radio.group> </div> <flux:chart :value="$this->visitorData" class="h-48 sm:h-72"> <flux:chart.svg> <flux:chart.bar field="visitors" class="text-[#2574ff] in-data-[chart-type=line]:hidden" radius="4 0" /> <flux:chart.line field="visitors" class="text-[#2574ff] in-data-[chart-type=bar]:hidden" wire:cloak curve="none" /> <flux:chart.axis axis="x" field="date" tick-count="10"> <flux:chart.axis.tick /> </flux:chart.axis> <flux:chart.axis axis="y"> <flux:chart.axis.grid /> <flux:chart.axis.tick /> </flux:chart.axis> <flux:chart.cursor type="area" /> </flux:chart.svg> <flux:chart.tooltip> <flux:chart.tooltip.heading field="date" :format="['month' => 'short', 'day' => 'numeric']" /> <flux:chart.tooltip.value field="visitors" label="Visitors" :format="['useGrouping' => true]" /> </flux:chart.tooltip> </flux:chart> </flux:card> <div class="h-8 sm:h-12"></div> <div class="grid gap-6 md:grid-cols-3"> <flux:card variant="soft" class="flex min-w-0 flex-col"> <div class="flex items-baseline justify-between gap-4"> <flux:heading>Top pages</flux:heading> <flux:text class="font-medium">Views</flux:text> </div> <div class="mt-6 space-y-4"> @foreach ($this->topPages as $page) <div class="space-y-3"> <div class="flex items-center justify-between gap-4"> <flux:text variant="strong" class="truncate font-medium">{{ $page['path'] }}</flux:text> <flux:text variant="strong" class="shrink-0 font-medium">{{ Number::abbreviate($page['views'], precision: 1) }}</flux:text> </div> <flux:progress :value="$page['views']" :max="$this->topPageScale" aria-label="{{ Number::abbreviate($page['views'], precision: 1) }} views for {{ $page['path'] }}" class="h-1 bg-transparent" color="blue" /> </div> @endforeach </div> <div class="mt-auto pt-6"> <flux:button size="sm" icon:trailing="arrow-right" icon:variant="micro" href="#" class="w-full">View all pages</flux:button> </div> </flux:card> <flux:card variant="soft" class="flex min-w-0 flex-col"> <div class="flex items-baseline justify-between gap-4"> <flux:heading>Countries</flux:heading> <flux:text class="font-medium">Visitors</flux:text> </div> <div class="mt-6 space-y-8"> @foreach ($this->countries as $country) <div class="flex items-center gap-3"> <div class="relative h-5 w-7 shrink-0 overflow-hidden rounded-sm"> <img src="https://fluxui.dev/img/demos/analytics-country-{{ $country['flag'] }}.svg" alt="" class="size-full" /> </div> <flux:text variant="strong" class="min-w-0 flex-1 truncate">{{ $country['name'] }}</flux:text> <flux:text variant="strong" class="shrink-0 font-medium">{{ Number::abbreviate($country['visitors'], precision: 1) }}</flux:text> </div> @endforeach </div> <div class="mt-auto pt-6"> <flux:button size="sm" icon:trailing="arrow-right" icon:variant="micro" href="#" class="w-full">View all countries</flux:button> </div> </flux:card> <flux:card variant="soft" class="flex min-w-0 flex-col"> <div class="flex items-baseline justify-between gap-4"> <flux:heading>Sources</flux:heading> <flux:text class="font-medium">Views</flux:text> </div> <div class="mt-6 space-y-4"> @foreach ($this->sources as $source) <div class="space-y-3"> <div class="flex items-center justify-between gap-4"> <flux:text variant="strong" class="truncate font-medium">{{ $source['name'] }}</flux:text> <flux:text variant="strong" class="shrink-0 font-medium">{{ $source['percentage'] }}%</flux:text> </div> <flux:progress :value="$source['percentage']" aria-label="{{ $source['name'] }}: {{ $source['percentage'] }}%" class="h-1" color="blue" /> </div> @endforeach </div> <div class="mt-auto pt-6"> <flux:button size="sm" icon:trailing="arrow-right" icon:variant="micro" href="#" class="w-full">View all sources</flux:button> </div> </flux:card> </div> </flux:main></div><?phpnew class extends \Livewire\Component {}?>{{-- This standalone demo keeps its application shell inline. In a production app, move shared navigation into your app layout. --}}<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="https://fluxui.dev/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="https://fluxui.dev/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:text class="mt-2">This is how others will see you on the site.</flux:text> </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>[email protected]</flux:select.option> <flux:select.option>[email protected]</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:text class="mt-2">Customize your layout and notification preferences.</flux:text> </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:text class="mt-2">Choose which emails you'd like to get from us.</flux:text> </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><?phpnew class extends \Livewire\Component { #[\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'], ], ], ], ], ]; }}?>{{-- This standalone demo keeps its application shell inline. In a production app, move shared navigation into your app layout. --}}<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="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="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="https://fluxui.dev/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 class="**:ring-white dark:**:ring-zinc-800"> @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:text class="mb-0! mt-2">11 tasks</flux:text> </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><?phpnew class extends \Livewire\Component { 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 transaction', '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\Demo\Order::all(); }}?>{{-- This standalone demo keeps its application shell inline. In a production app, move shared navigation into your app layout. --}}<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:text class="max-md:hidden whitespace-nowrap">compared to</flux:text> <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:text class="whitespace-nowrap">Filter by:</flux:text> <flux:badge as="button" rounded color="zinc" icon="plus" size="lg">Amount</flux:badge> <flux:badge as="button" rounded color="zinc" icon="plus" size="lg" class="max-md:hidden">Status</flux:badge> <flux:badge as="button" rounded 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:text>{{ $stat['title'] }}</flux:text> <flux:heading size="xl" class="mb-2 mt-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><?phpnew 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">[email protected]</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><?phpnew class extends \Livewire\Component {}?>{{-- This standalone demo keeps its application shell inline. In a production app, move shared navigation into your app layout. --}}<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 protected]" /> <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:text class="text-center"> First time around here? <flux:link href="#">Sign up for free</flux:link> </flux:text> </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('https://fluxui.dev/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>