fuel-price/.superdesign/init/components.md

Shared UI Components

Blade Components (Reusable)

1. x-action-message

Path: resources/views/components/action-message.blade.php

Displays a temporary status message that auto-hides after 2 seconds using Alpine.js.

Props:

• on: Event name to listen for (Livewire event)

Features:

• Transition animation with fade-out
• Auto-hide timeout (2000ms)
• Default text: "Saved."

@props([
    'on',
])

<div
    x-data="{ shown: false, timeout: null }"
    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
    x-show.transition.out.opacity.duration.1500ms="shown"
    x-transition:leave.opacity.duration.1500ms
    style="display: none"
    {{ $attributes->merge(['class' => 'text-sm']) }}
>
    {{ $slot->isEmpty() ? __('Saved.') : $slot }}
</div>

---

2. x-app-logo

Path: resources/views/components/app-logo.blade.php

Main app branding component. Renders as flux:brand (header) or flux:sidebar.brand (sidebar variant).

Props:

• sidebar (bool): If true, renders sidebar variant
• Inherits Flux component attributes

Features:

• Dynamic logo rendering based on context (header vs sidebar)
• Uses x-app-logo-icon for icon
• Passes through attributes to Flux components

@props([
    'sidebar' => false,
])

@if($sidebar)
    <flux:sidebar.brand name="Laravel Starter Kit" {{ $attributes }}>
        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
        </x-slot>
    </flux:sidebar.brand>
@else
    <flux:brand name="Laravel Starter Kit" {{ $attributes }}>
        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
        </x-slot>
    </flux:brand>
@endif

---

3. x-app-logo-icon

Path: resources/views/components/app-logo-icon.blade.php

SVG icon for the application logo. Geometric design with fills.

Features:

• Scalable SVG
• Uses currentColor for dynamic styling
• Can be sized with Tailwind classes

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
    <path 
        fill="currentColor" 
        fill-rule="evenodd" 
        clip-rule="evenodd"
        d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
    />
</svg>

---

4. x-auth-header

Path: resources/views/components/auth-header.blade.php

Centered header for authentication pages with title and description.

Props:

• title: Main heading text
• description: Subheading/description text

Features:

• Centered layout
• Uses Flux typography components

@props([
    'title',
    'description',
])

<div class="flex w-full flex-col text-center">
    <flux:heading size="xl">{{ $title }}</flux:heading>
    <flux:subheading>{{ $description }}</flux:subheading>
</div>

---

5. x-auth-session-status

Path: resources/views/components/auth-session-status.blade.php

Displays session status messages (typically success messages after redirect).

Props:

• status: Status message text (if present)
• Passes through attributes

Features:

• Conditional rendering (only shows if status exists)
• Green success styling

@props([
    'status',
])

@if ($status)
    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
        {{ $status }}
    </div>
@endif

---

6. x-desktop-user-menu

Path: resources/views/components/desktop-user-menu.blade.php

User profile dropdown menu with settings and logout options. Uses Flux components.

Features:

• Sidebar profile with dropdown
• Shows user avatar, name, and email
• Menu items: Settings (cog icon), Logout (arrow icon)
• Logout form with CSRF protection
• Data test attributes for testing

<flux:dropdown position="bottom" align="start">
    <flux:sidebar.profile
        :name="auth()->user()->name"
        :initials="auth()->user()->initials()"
        icon:trailing="chevrons-up-down"
        data-test="sidebar-menu-button"
    />

    <flux:menu>
        <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
            <flux:avatar
                :name="auth()->user()->name"
                :initials="auth()->user()->initials()"
            />
            <div class="grid flex-1 text-start text-sm leading-tight">
                <flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
                <flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
            </div>
        </div>
        <flux:menu.separator />
        <flux:menu.radio.group>
            <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
                {{ __('Settings') }}
            </flux:menu.item>
            <form method="POST" action="{{ route('logout') }}" class="w-full">
                @csrf
                <flux:menu.item
                    as="button"
                    type="submit"
                    icon="arrow-right-start-on-rectangle"
                    class="w-full cursor-pointer"
                    data-test="logout-button"
                >
                    {{ __('Log out') }}
                </flux:menu.item>
            </form>
        </flux:menu.radio.group>
    </flux:menu>
</flux:dropdown>

---

7. x-placeholder-pattern

Path: resources/views/components/placeholder-pattern.blade.php

SVG placeholder pattern for skeleton/loading states. Diagonal line pattern.

Props:

• id: Unique pattern ID (auto-generated)

Features:

• Reusable SVG pattern definition
• Can be styled with Tailwind stroke classes
• Used in dashboard placeholder cards

@props([
    'id' => uniqid(),
])

<svg {{ $attributes }} fill="none">
    <defs>
        <pattern id="pattern-{{ $id }}" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
            <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
        </pattern>
    </defs>
    <rect stroke="none" fill="url(#pattern-{{ $id }})" width="100%" height="100%"></rect>
</svg>

---

Flux UI Components Used

Flux v2 components extensively used throughout the application:

• Layout: flux:header, flux:sidebar, flux:main, flux:spacer
• Navigation: flux:navbar, flux:navbar.item, flux:sidebar.nav, flux:sidebar.item, flux:sidebar.group
• Forms: flux:input, flux:select, flux:checkbox, flux:button
• Typography: flux:heading, flux:subheading, flux:text
• Dropdowns/Menus: flux:dropdown, flux:menu, flux:menu.item, flux:menu.separator
• UI Elements: flux:badge, flux:avatar, flux:brand, flux:profile
• Other: flux:tooltip, flux:separator, flux:link

---

Flux Custom Icons

Located in resources/views/flux/icon/:

• layout-grid.blade.php
• folder-git-2.blade.php
• chevrons-up-down.blade.php
• book-open-text.blade.php

These extend Flux's default icon library.

---

Alpine.js Data Objects

stationMap

Path: resources/js/maps/station-map.js

Leaflet map integration for displaying fuel stations:

• Initializes map centered on UK
• Plots colored circle markers for stations
• Color coding: green (current), slate (recent), amber (stale), red (outdated)
• Popup display with station details
• Responsive bounds fitting
• Watches for data changes via Alpine