116 lines
5.1 KiB
PHP
116 lines
5.1 KiB
PHP
@if ($style === 'dropdown')
|
|
<div
|
|
x-data="{ open: false }"
|
|
@click.outside="open = false"
|
|
class="relative"
|
|
>
|
|
{{-- Trigger Button --}}
|
|
<button
|
|
@click="open = !open"
|
|
type="button"
|
|
@class([
|
|
'flex items-center gap-2 rounded-lg transition-colors',
|
|
'px-3 py-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700' => !$compact,
|
|
'px-2 py-1 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-700' => $compact,
|
|
])
|
|
>
|
|
@if ($showFlags && $this->currentCurrency['flag'])
|
|
<span class="text-base">
|
|
@if (in_array($this->currentCurrency['flag'], ['eu']))
|
|
<i class="fa-solid fa-euro-sign"></i>
|
|
@else
|
|
<span class="fi fi-{{ $this->currentCurrency['flag'] }}"></span>
|
|
@endif
|
|
</span>
|
|
@endif
|
|
|
|
<span class="font-medium text-zinc-700 dark:text-zinc-300">
|
|
{{ $this->currentCurrency['symbol'] }}
|
|
@if ($showNames && !$compact)
|
|
<span class="text-zinc-500 dark:text-zinc-400">{{ $this->currentCurrency['code'] }}</span>
|
|
@endif
|
|
</span>
|
|
|
|
<i class="fa-solid fa-chevron-down text-[0.6rem] text-zinc-400 transition-transform" :class="{ 'rotate-180': open }"></i>
|
|
</button>
|
|
|
|
{{-- Dropdown Menu --}}
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@class([
|
|
'absolute z-50 mt-2 w-48 rounded-lg bg-white dark:bg-zinc-800 shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-zinc-700',
|
|
'right-0' => true,
|
|
])
|
|
style="display: none;"
|
|
>
|
|
<div class="py-1">
|
|
@foreach ($this->currencies as $code => $currency)
|
|
<button
|
|
wire:click="selectCurrency('{{ $code }}')"
|
|
@click="open = false"
|
|
@class([
|
|
'w-full flex items-center gap-3 px-4 py-2 text-sm transition-colors',
|
|
'bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-300' => $selected === $code,
|
|
'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700' => $selected !== $code,
|
|
])
|
|
>
|
|
@if ($showFlags && $currency['flag'])
|
|
<span class="w-5 text-center">
|
|
@if ($currency['flag'] === 'eu')
|
|
<i class="fa-solid fa-euro-sign text-blue-500"></i>
|
|
@else
|
|
<span class="fi fi-{{ $currency['flag'] }}"></span>
|
|
@endif
|
|
</span>
|
|
@endif
|
|
|
|
<span class="flex-1 text-left">
|
|
{{ $currency['symbol'] }}
|
|
@if ($showNames)
|
|
<span class="text-zinc-500 dark:text-zinc-400 ml-1">{{ $currency['name'] }}</span>
|
|
@else
|
|
<span class="text-zinc-500 dark:text-zinc-400 ml-1">{{ $code }}</span>
|
|
@endif
|
|
</span>
|
|
|
|
@if ($selected === $code)
|
|
<i class="fa-solid fa-check text-indigo-600 dark:text-indigo-400"></i>
|
|
@endif
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
{{-- Inline Buttons Style --}}
|
|
<div class="flex items-center gap-1">
|
|
@foreach ($this->currencies as $code => $currency)
|
|
<button
|
|
wire:click="selectCurrency('{{ $code }}')"
|
|
@class([
|
|
'px-3 py-1.5 rounded-lg text-sm font-medium transition-colors',
|
|
'bg-indigo-600 text-white' => $selected === $code,
|
|
'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-700' => $selected !== $code,
|
|
])
|
|
title="{{ $currency['name'] }}"
|
|
>
|
|
@if ($showFlags && $currency['flag'])
|
|
<span class="mr-1">
|
|
@if ($currency['flag'] === 'eu')
|
|
<i class="fa-solid fa-euro-sign"></i>
|
|
@else
|
|
<span class="fi fi-{{ $currency['flag'] }}"></span>
|
|
@endif
|
|
</span>
|
|
@endif
|
|
{{ $currency['symbol'] }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
@endif
|