275 lines
7.9 KiB
Markdown
275 lines
7.9 KiB
Markdown
# 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."
|
|
|
|
```blade
|
|
@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
|
|
|
|
```blade
|
|
@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
|
|
|
|
```blade
|
|
<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
|
|
|
|
```blade
|
|
@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
|
|
|
|
```blade
|
|
@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
|
|
|
|
```blade
|
|
<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
|
|
|
|
```blade
|
|
@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
|
|
|