-
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3db5d7b
commit 8547f0d
Showing
5 changed files
with
255 additions
and
225 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
84 changes: 84 additions & 0 deletions
84
resources/views/components/primary-button-dropdown.blade.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| @props([ | ||
| 'centered' => false, | ||
| 'iconOnly' => false, | ||
| 'fat' => false, | ||
| 'loading' => false, | ||
| 'loadingText' => 'Saving...', | ||
| 'action' => '', | ||
| 'noLivewire' => false, | ||
| ]) | ||
|
|
||
| <div @class([ | ||
| 'relative inline-flex', | ||
| 'w-full' => $centered, | ||
| ]) x-data="{ open: false }"> | ||
| <button | ||
| {{ | ||
| $attributes->merge([ | ||
| 'type' => 'button', | ||
| 'class' => | ||
| 'inline-flex items-center flex-grow ' . | ||
| ($iconOnly ? 'px-3.5 py-2' : ($fat ? 'px-8 py-4 text-lg' : 'px-7 py-2.5')) . | ||
| ' bg-primary-900 dark:bg-white dark:hover:bg-gray-200 dark:text-gray-900 border border-transparent ' . | ||
| 'rounded-l-[0.70rem] font-semibold text-sm text-white hover:bg-primary-950 focus:bg-primary-950 ' . | ||
| 'dark:focus:bg-white active:bg-primary-950 dark:active:bg-white focus:outline-none focus:ring-2 ' . | ||
| 'focus:ring-primary-950 focus:ring-offset-2 transition ease-in-out duration-150' . | ||
| ($centered ? ' justify-center' : ''), | ||
| ]) | ||
| }} | ||
| > | ||
| @if (! $noLivewire) | ||
| <div wire:loading wire:target="{{ $action }}"> | ||
| <x-spinner class="mr-2 inline h-4 w-4 text-white dark:text-gray-900" /> | ||
| {{ __($loadingText) }} | ||
| </div> | ||
| <div wire:loading.remove wire:target="{{ $action }}"> | ||
| {{ $slot }} | ||
| </div> | ||
| @else | ||
| {{ $slot }} | ||
| @endif | ||
| </button> | ||
|
|
||
| <button | ||
| type="button" | ||
| @click="open = !open" | ||
| aria-haspopup="true" | ||
| :aria-expanded="open" | ||
| class="inline-flex items-center rounded-r-[0.70rem] border-l border-primary-800 bg-primary-900 px-3 py-2 text-sm text-white transition duration-150 ease-in-out hover:bg-primary-950 focus:bg-primary-950 focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-offset-2 active:bg-primary-950 dark:border-gray-300 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:bg-white dark:active:bg-white" | ||
| > | ||
| <svg | ||
| class="h-5 w-5" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 20 20" | ||
| fill="currentColor" | ||
| aria-hidden="true" | ||
| > | ||
| <path | ||
| fill-rule="evenodd" | ||
| d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" | ||
| clip-rule="evenodd" | ||
| /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| <div | ||
| x-show="open" | ||
| @click.away="open = false" | ||
| x-transition:enter="transition duration-100 ease-out" | ||
| x-transition:enter-start="scale-95 transform opacity-0" | ||
| x-transition:enter-end="scale-100 transform opacity-100" | ||
| x-transition:leave="transition duration-75 ease-in" | ||
| x-transition:leave-start="scale-100 transform opacity-100" | ||
| x-transition:leave-end="scale-95 transform opacity-0" | ||
| class="absolute right-0 z-10 mt-2 w-56 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:divide-gray-700 dark:bg-gray-800" | ||
| style="top: 100%" | ||
| role="menu" | ||
| aria-orientation="vertical" | ||
| tabindex="-1" | ||
| > | ||
| <div class="py-1" role="none"> | ||
| {{ $dropdownContent }} | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
resources/views/components/secondary-button-dropdown.blade.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| @props([ | ||
| 'centered' => false, | ||
| 'iconOnly' => false, | ||
| 'loadingText' => 'Loading...', | ||
| 'action' => '', | ||
| ]) | ||
|
|
||
| <div class="relative inline-block text-left" x-data="{ open: false }"> | ||
| <button | ||
| {{ | ||
| $attributes->merge([ | ||
| 'type' => 'button', | ||
| 'class' => | ||
| 'inline-flex items-center ' . | ||
| ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') . | ||
| ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' . | ||
| 'border border-gray-300 dark:border-gray-600 ' . | ||
| 'rounded-[0.7rem] ' . | ||
| 'font-medium text-sm text-gray-700 dark:text-gray-200 ' . | ||
| 'hover:from-gray-100 hover:to-gray-200 dark:hover:from-gray-700 dark:hover:to-gray-600 ' . | ||
| 'focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ' . | ||
| 'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' . | ||
| 'active:from-gray-200 active:to-gray-300 dark:active:from-gray-600 dark:active:to-gray-500 ' . | ||
| 'disabled:opacity-50 disabled:cursor-not-allowed ' . | ||
| 'transition-all duration-200 ease-in-out ' . | ||
| 'shadow-sm hover:shadow-md ' . | ||
| ($centered ? 'justify-center w-full' : ''), | ||
| 'wire:loading.attr' => 'disabled', | ||
| 'wire:loading.class' => 'opacity-50 cursor-not-allowed', | ||
| 'wire:target' => $action, | ||
| '@click' => 'open = !open', | ||
| ]) | ||
| }} | ||
| > | ||
| @if ($action) | ||
| <div wire:loading wire:target="{{ $action }}" class="flex items-center"> | ||
| <x-spinner class="mr-2 h-4 w-4 text-primary-500 dark:text-primary-400" /> | ||
| <span>{{ __($loadingText) }}</span> | ||
| </div> | ||
| <div wire:loading.remove wire:target="{{ $action }}"> | ||
| {{ $slot }} | ||
| </div> | ||
| @else | ||
| {{ $slot }} | ||
| @endif | ||
|
|
||
| <svg | ||
| class="-mr-1 ml-2 h-5 w-5" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 20 20" | ||
| fill="currentColor" | ||
| aria-hidden="true" | ||
| > | ||
| <path | ||
| fill-rule="evenodd" | ||
| d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" | ||
| clip-rule="evenodd" | ||
| /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| <div | ||
| x-show="open" | ||
| @click.away="open = false" | ||
| x-transition:enter="transition duration-100 ease-out" | ||
| x-transition:enter-start="scale-95 transform opacity-0" | ||
| x-transition:enter-end="scale-100 transform opacity-100" | ||
| x-transition:leave="transition duration-75 ease-in" | ||
| x-transition:leave-start="scale-100 transform opacity-100" | ||
| x-transition:leave-end="scale-95 transform opacity-0" | ||
| class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-[0.70rem] bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800" | ||
| role="menu" | ||
| aria-orientation="vertical" | ||
| aria-labelledby="menu-button" | ||
| tabindex="-1" | ||
| > | ||
| <div class="py-1" role="none"> | ||
| {{ $dropdownContent }} | ||
| </div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.