Divider code

@props([
    'label' => null,
    'vertical' => false,
])

@php
    /*
    | Horizontal rule, optionally with a centered label. Set `vertical` for an
    | inline vertical separator.
    |
    | Usage:
    |   <x-ui.divider />
    |   <x-ui.divider label="OR" />
    */
@endphp

@if ($vertical)
    <span {{ $attributes->merge(['class' => 'inline-block w-px self-stretch bg-gray-200 dark:bg-gray-800']) }}></span>
@elseif ($label)
    <div {{ $attributes->merge(['class' => 'flex items-center gap-3']) }}>
        <span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
        <span class="text-xs font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ $label }}</span>
        <span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
    </div>
@else
    <hr {{ $attributes->merge(['class' => 'border-gray-200 dark:border-gray-800']) }}>
@endif