@extends('layouts.admin.app')

@section('title', __('pages/admin/components.nav.loaders'))

@section('content')
<x-layouts.admin.component-demo :title="__('pages/admin/components.nav.loaders')">
    <x-utility.card :title="__('pages/admin/components.loaders.skeleton_loaders')">
        <div class="space-y-6">
            <x-feedback.skeleton :lines="3" />
            <x-feedback.skeleton :lines="2" :avatar="true" />
            <x-feedback.skeleton height="h-24" :card="false" />
        </div>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.loaders.button_loading_state')">
        <div class="flex flex-wrap items-center gap-3">
            <x-buttons.primary :loading="true">{{ __('ui.state.saving') }}</x-buttons.primary>
            <x-buttons.secondary :loading="true">{{ __('ui.state.processing') }}</x-buttons.secondary>
            <x-buttons.danger :loading="true">{{ __('ui.state.deleting') }}</x-buttons.danger>
        </div>
    </x-utility.card>
</x-layouts.admin.component-demo>
@endsection