Buttons - LaravelDaily/starter-kit GitHub Wiki

Buttons Component Documentation

Overview

The AdminDash starter kit provides a comprehensive set of button components with various styles, sizes, states, and interactive features. All buttons support dark mode and include accessibility features.

Table of Contents

Basic Usage

Simple Button

<x-button>Click Me</x-button>

Button with Variant

<x-button variant="primary">Primary Button</x-button>
<x-button variant="secondary">Secondary Button</x-button>
<x-button variant="success">Success Button</x-button>

Button Variants

1. Primary Buttons

{{-- resources/views/components/button.blade.php --}}
@props([
    'variant' => 'primary',
    'size' => 'default',
    'disabled' => false,
    'loading' => false,
    'type' => 'button'
])

@php
$baseClasses = 'inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed';

$variantClasses = [
    'primary' => 'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500',
    'secondary' => 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 focus:ring-gray-500',
    'success' => 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500',
    'danger' => 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500',
    'warning' => 'bg-yellow-500 hover:bg-yellow-600 text-white focus:ring-yellow-500',
    'info' => 'bg-indigo-600 hover:bg-indigo-700 text-white focus:ring-indigo-500',
];

$sizeClasses = [
    'xs' => 'px-2.5 py-1.5 text-xs',
    'sm' => 'px-3 py-1.5 text-sm',
    'default' => 'px-4 py-2 text-base',
    'lg' => 'px-5 py-2.5 text-lg',
    'xl' => 'px-6 py-3 text-xl',
];

$classes = $baseClasses . ' ' . $variantClasses[$variant] . ' ' . $sizeClasses[$size];
@endphp

<button
    {{ $attributes->merge(['type' => $type, 'class' => $classes]) }}
    @if($disabled) disabled @endif
>
    @if($loading)
        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
    @endif
    {{ $slot }}
</button>

2. Outline Buttons

{{-- resources/views/components/button-outline.blade.php --}}
@props([
    'variant' => 'primary',
    'size' => 'default',
    'disabled' => false,
    'type' => 'button'
])

@php
$baseClasses = 'inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors border disabled:opacity-50 disabled:cursor-not-allowed';

$variantClasses = [
    'primary' => 'border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 dark:text-blue-400 dark:border-blue-400 focus:ring-blue-500',
    'secondary' => 'border-gray-600 text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:text-gray-400 dark:border-gray-400 focus:ring-gray-500',
    'success' => 'border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 dark:text-green-400 dark:border-green-400 focus:ring-green-500',
    'danger' => 'border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-400 focus:ring-red-500',
    'warning' => 'border-yellow-500 text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-400 focus:ring-yellow-500',
    'info' => 'border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 dark:text-indigo-400 dark:border-indigo-400 focus:ring-indigo-500',
];

$sizeClasses = [
    'xs' => 'px-2.5 py-1.5 text-xs',
    'sm' => 'px-3 py-1.5 text-sm',
    'default' => 'px-4 py-2 text-base',
    'lg' => 'px-5 py-2.5 text-lg',
    'xl' => 'px-6 py-3 text-xl',
];

$classes = $baseClasses . ' ' . $variantClasses[$variant] . ' ' . $sizeClasses[$size];
@endphp

<button
    {{ $attributes->merge(['type' => $type, 'class' => $classes]) }}
    @if($disabled) disabled @endif
>
    {{ $slot }}
</button>

Button Sizes

<!-- Extra Small -->
<x-button size="xs">Extra Small</x-button>

<!-- Small -->
<x-button size="sm">Small</x-button>

<!-- Default -->
<x-button>Default</x-button>

<!-- Large -->
<x-button size="lg">Large</x-button>

<!-- Extra Large -->
<x-button size="xl">Extra Large</x-button>

Button States

3. Loading Button

{{-- resources/views/components/button-loading.blade.php --}}
@props([
    'loading' => false,
    'loadingText' => 'Loading...',
    'variant' => 'primary'
])

<x-button :variant="$variant" :loading="$loading" {{ $attributes }}>
    @if($loading)
        {{ $loadingText }}
    @else
        {{ $slot }}
    @endif
</x-button>

Usage Example:

<x-button-loading
    :loading="$isSubmitting"
    loading-text="Saving..."
    wire:click="save"
    variant="primary"
>
    Save Changes
</x-button-loading>

Icon Buttons

4. Icon Button Component

{{-- resources/views/components/icon-button.blade.php --}}
@props([
    'icon' => null,
    'iconPosition' => 'left',
    'variant' => 'primary',
    'size' => 'default',
    'rounded' => false
])

@php
$roundedClass = $rounded ? 'rounded-full p-2' : 'rounded-md';
$baseClasses = "inline-flex items-center justify-center font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors $roundedClass";

$variantClasses = [
    'primary' => 'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500',
    'secondary' => 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 focus:ring-gray-500',
    'success' => 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500',
    'danger' => 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500',
];

$sizeClasses = [
    'sm' => $rounded ? 'p-1.5' : 'px-2.5 py-1.5 text-sm',
    'default' => $rounded ? 'p-2' : 'px-4 py-2',
    'lg' => $rounded ? 'p-3' : 'px-5 py-2.5 text-lg',
];

$iconSizeClasses = [
    'sm' => 'h-4 w-4',
    'default' => 'h-5 w-5',
    'lg' => 'h-6 w-6',
];

$classes = $baseClasses . ' ' . $variantClasses[$variant] . ' ' . $sizeClasses[$size];
$iconSize = $iconSizeClasses[$size];
@endphp

<button {{ $attributes->merge(['class' => $classes]) }}>
    @if($icon && $iconPosition === 'left')
        @include("icons.{$icon}", ['class' => $iconSize . ($slot->isEmpty() ? '' : ' mr-2')])
    @endif

    {{ $slot }}

    @if($icon && $iconPosition === 'right')
        @include("icons.{$icon}", ['class' => $iconSize . ($slot->isEmpty() ? '' : ' ml-2')])
    @endif
</button>

Icon Button Examples:

<!-- Icon only buttons -->
<x-icon-button icon="plus" variant="primary" rounded />
<x-icon-button icon="x" variant="secondary" rounded />
<x-icon-button icon="check" variant="success" rounded />
<x-icon-button icon="trash" variant="danger" rounded />

<!-- Buttons with icons and text -->
<x-icon-button icon="plus" variant="primary">Add Item</x-icon-button>
<x-icon-button icon="save" variant="success">Save</x-icon-button>
<x-icon-button icon="trash" variant="danger" icon-position="right">Delete</x-icon-button>

Button Groups

5. Button Group Component

{{-- resources/views/components/button-group.blade.php --}}
@props(['vertical' => false])

@php
$classes = $vertical
    ? 'inline-flex flex-col rounded-md shadow-sm'
    : 'inline-flex rounded-md shadow-sm';
@endphp

<div {{ $attributes->merge(['class' => $classes, 'role' => 'group']) }}>
    {{ $slot }}
</div>

6. Button Group Item

{{-- resources/views/components/button-group-item.blade.php --}}
@props([
    'first' => false,
    'last' => false,
    'active' => false,
    'variant' => 'secondary'
])

@php
$baseClasses = 'relative inline-flex items-center px-4 py-2 text-sm font-medium focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500';

$positionClasses = match(true) {
    $first => 'rounded-l-lg border',
    $last => 'rounded-r-lg border-t border-r border-b',
    default => 'border-t border-b border-r'
};

$variantClasses = $active
    ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 border-blue-500'
    : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600';

$classes = $baseClasses . ' ' . $positionClasses . ' ' . $variantClasses;
@endphp

<button {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</button>

Button Group Examples:

<!-- Horizontal Button Group -->
<x-button-group>
    <x-button-group-item first active>Day</x-button-group-item>
    <x-button-group-item>Week</x-button-group-item>
    <x-button-group-item last>Month</x-button-group-item>
</x-button-group>

<!-- Icon Button Group -->
<x-button-group>
    <x-button-group-item first>
        <x-icon name="list" class="h-5 w-5" />
    </x-button-group-item>
    <x-button-group-item>
        <x-icon name="grid" class="h-5 w-5" />
    </x-button-group-item>
    <x-button-group-item last>
        <x-icon name="table" class="h-5 w-5" />
    </x-button-group-item>
</x-button-group>

Social Buttons

7. Social Button Component

{{-- resources/views/components/social-button.blade.php --}}
@props([
    'provider' => 'google',
    'size' => 'default'
])

@php
$baseClasses = 'inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors';

$providerClasses = [
    'facebook' => 'bg-[#1877F2] hover:bg-[#166FE5] text-white focus:ring-[#1877F2]',
    'twitter' => 'bg-[#1DA1F2] hover:bg-[#1A91DA] text-white focus:ring-[#1DA1F2]',
    'google' => 'bg-[#EA4335] hover:bg-[#D73925] text-white focus:ring-[#EA4335]',
    'github' => 'bg-[#333333] hover:bg-[#2B2B2B] text-white focus:ring-[#333333]',
];

$sizeClasses = [
    'sm' => 'px-3 py-1.5 text-sm',
    'default' => 'px-4 py-2',
    'lg' => 'px-6 py-3 text-lg',
];

$classes = $baseClasses . ' ' . $providerClasses[$provider] . ' ' . $sizeClasses[$size];
@endphp

<button {{ $attributes->merge(['class' => $classes]) }}>
    @include("icons.{$provider}", ['class' => 'w-5 h-5 mr-2'])
    {{ $slot ?: ucfirst($provider) }}
</button>

Social Button Examples:

<x-social-button provider="facebook">Sign in with Facebook</x-social-button>
<x-social-button provider="google">Sign in with Google</x-social-button>
<x-social-button provider="github">Sign in with GitHub</x-social-button>
<x-social-button provider="twitter">Sign in with Twitter</x-social-button>

Props & Configuration

Button Component Props

Prop Type Default Description
variant String 'primary' Button style (primary, secondary, success, danger, warning, info)
size String 'default' Button size (xs, sm, default, lg, xl)
disabled Boolean false Disable the button
loading Boolean false Show loading state
type String 'button' HTML button type

Icon Button Props

Prop Type Default Description
icon String null Icon name to display
iconPosition String 'left' Icon position (left, right)
rounded Boolean false Make button fully rounded

Social Button Props

Prop Type Default Description
provider String 'google' Social provider (facebook, twitter, google, github)

Examples

Form Buttons

{{-- resources/views/components/form-buttons.blade.php --}}
<div class="flex justify-end space-x-3">
    <x-button variant="secondary" type="button" onclick="window.history.back()">
        Cancel
    </x-button>

    <x-button variant="secondary" type="button">
        Save as Draft
    </x-button>

    <x-button-loading
        :loading="$isSubmitting"
        loading-text="Creating..."
        type="submit"
        variant="primary"
    >
        Create Product
    </x-button-loading>
</div>

Action Buttons

{{-- Table row actions --}}
<div class="flex justify-end space-x-2">
    <x-icon-button
        icon="eye"
        variant="primary"
        rounded
        size="sm"
        onclick="viewRecord({{ $record->id }})"
        title="View"
    />

    <x-icon-button
        icon="edit"
        variant="secondary"
        rounded
        size="sm"
        onclick="editRecord({{ $record->id }})"
        title="Edit"
    />

    <x-icon-button
        icon="trash"
        variant="danger"
        rounded
        size="sm"
        onclick="deleteRecord({{ $record->id }})"
        title="Delete"
    />
</div>

Modal Buttons

{{-- Modal footer buttons --}}
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
    <x-button
        variant="primary"
        class="w-full sm:ml-3 sm:w-auto"
        onclick="confirmAction()"
    >
        Confirm
    </x-button>

    <x-button
        variant="secondary"
        class="mt-3 w-full sm:mt-0 sm:w-auto"
        onclick="closeModal()"
    >
        Cancel
    </x-button>
</div>

Loading States

{{-- Different loading button examples --}}
<div class="space-y-4">
    <x-button-loading
        :loading="$saving"
        loading-text="Saving..."
        wire:click="save"
    >
        Save Changes
    </x-button-loading>

    <x-button-loading
        :loading="$deleting"
        loading-text="Deleting..."
        variant="danger"
        wire:click="delete"
    >
        Delete Item
    </x-button-loading>

    <x-button-loading
        :loading="$submitting"
        loading-text="Processing..."
        variant="success"
        size="lg"
        wire:click="submit"
    >
        Submit Form
    </x-button-loading>
</div>

Full Design Page

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Product - AdminDash</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        sidebar: {
                            DEFAULT: 'hsl(var(--sidebar-background))',
                            foreground: 'hsl(var(--sidebar-foreground))',
                            accent: 'hsl(var(--sidebar-accent))',
                            'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
                            border: 'hsl(var(--sidebar-border))',
                            ring: 'hsl(var(--sidebar-ring))',
                        },
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer base {
      :root {
        --sidebar-background: 210 20% 98%;
        --sidebar-foreground: 215 25% 27%;
        --sidebar-accent: 217 33% 17%;
        --sidebar-accent-foreground: 210 40% 98%;
        --sidebar-border: 214 32% 91%;
        --sidebar-ring: 221 83% 53%;
      }
      
      .dark {
        --sidebar-background: 217 33% 17%;
        --sidebar-foreground: 210 40% 98%;
        --sidebar-accent: 210 40% 96%;
        --sidebar-accent-foreground: 217 33% 17%;
        --sidebar-border: 215 25% 27%;
        --sidebar-ring: 221 83% 65%;
      }
    }
    
    /* Custom scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(156, 163, 175, 0.5);
      border-radius: 3px;
    }
    
    /* Sidebar width transitions */
    .sidebar-transition {
      transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
    }
    
    .content-transition {
      transition: margin-left 0.3s ease, width 0.3s ease;
    }
    
    /* Custom file input */
    .custom-file-input::-webkit-file-upload-button {
      visibility: hidden;
    }
    .custom-file-input::before {
      content: 'Select files';
      display: inline-block;
      background: #f9fafb;
      border: 1px solid #d1d5db;
      border-radius: 0.375rem;
      padding: 0.375rem 0.75rem;
      outline: none;
      white-space: nowrap;
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 500;
      color: #374151;
    }
    .dark .custom-file-input::before {
      background: #374151;
      border-color: #4b5563;
      color: #e5e7eb;
    }
    .custom-file-input:hover::before {
      border-color: #9ca3af;
    }
    .custom-file-input:active::before {
      background: #e5e7eb;
    }
    .dark .custom-file-input:active::before {
      background: #4b5563;
    }
  </style>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>

<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{ 
        sidebarOpen: window.innerWidth >= 1024,
        darkMode: localStorage.getItem('darkMode') === 'true',
        toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
        toggleDarkMode() {
          this.darkMode = !this.darkMode;
          localStorage.setItem('darkMode', this.darkMode);
        },
        formSubmitted: false,
        formData: {
          name: '',
          category: '',
          price: '',
          stock: '',
          description: '',
          status: 'active',
          features: [],
          releaseDate: '',
          images: '',
          tags: '',
          weight: '',
          dimensions: {
            length: '',
            width: '',
            height: ''
          }
        },
        errors: {},
        validateForm() {
          this.errors = {};
          
          if (!this.formData.name) this.errors.name = 'Product name is required';
          if (!this.formData.category) this.errors.category = 'Category is required';
          if (!this.formData.price) this.errors.price = 'Price is required';
          else if (isNaN(this.formData.price) || this.formData.price <= 0) this.errors.price = 'Price must be a positive number';
          if (!this.formData.stock) this.errors.stock = 'Stock quantity is required';
          else if (isNaN(this.formData.stock) || parseInt(this.formData.stock) < 0) this.errors.stock = 'Stock must be a non-negative number';
          if (!this.formData.description) this.errors.description = 'Description is required';
          
          return Object.keys(this.errors).length === 0;
        },
        submitForm() {
          if (this.validateForm()) {
            // In a real application, you would submit the form data to the server here
            console.log('Form data:', this.formData);
            this.formSubmitted = true;
            
            // Reset form after 3 seconds for demo purposes
            setTimeout(() => {
              this.formSubmitted = false;
              this.formData = {
                name: '',
                category: '',
                price: '',
                stock: '',
                description: '',
                status: 'active',
                features: [],
                releaseDate: '',
                images: '',
                tags: '',
                weight: '',
                dimensions: {
                  length: '',
                  width: '',
                  height: ''
                }
              };
            }, 3000);
          }
        }
      }" :class="{ 'dark': darkMode }">

    <!-- Main Container -->
    <div class="min-h-screen flex flex-col">

        <!-- Header -->
        <header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between h-16 px-4">
                <!-- Left side: Logo and toggle -->
                <div class="flex items-center">
                    <button @click="toggleSidebar"
                        class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                    <div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
                </div>

                <!-- Right side: Search, notifications, profile -->
                <div class="flex items-center space-x-4">
                    <!-- Search -->
                    <div class="relative hidden md:block">
                        <input type="text" placeholder="Search..."
                            class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <div class="absolute left-3 top-2.5 text-gray-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </div>
                    </div>

                    <!-- Dark mode toggle -->
                    <button @click="toggleDarkMode"
                        class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
                        <svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                        </svg>
                        <svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                    </button>

                    <!-- Notifications -->
                    <div x-data="{ open: false }" class="relative">
                        <button @click="open = !open"
                            class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
                            <div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                            </svg>
                        </button>

                        <div x-show="open" @click.away="open = false"
                            class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
                            <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
                                <p class="text-sm font-medium">Notifications</p>
                            </div>
                            <div class="max-h-60 overflow-y-auto custom-scrollbar">
                                <a href="#"
                                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
                                    <p class="text-sm font-medium text-gray-800 dark:text-gray-200">System Update</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
                                        tonight at 2 AM</p>
                                    <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
                                </a>
                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <p class="text-sm font-medium text-gray-800 dark:text-gray-200">New User Registered
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
                                    <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
                                </a>
                            </div>
                            <div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
                                <a href="#"
                                    class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
                                    all notifications</a>
                            </div>
                        </div>
                    </div>

                    <!-- Profile -->
                    <div x-data="{ open: false }" class="relative">
                        <button @click="open = !open" class="flex items-center focus:outline-none">
                            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
                                class="h-8 w-8 rounded-full">
                            <span class="ml-2 hidden md:block">John Doe</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>

                        <div x-show="open" @click.away="open = false"
                            class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
                            <a href="profile.html"
                                class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <div class="flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                    </svg>
                                    Profile
                                </div>
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <div class="flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                    Settings
                                </div>
                            </a>
                            <div class="border-t border-gray-200 dark:border-gray-700"></div>
                            <a href="login.html"
                                class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <div class="flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                                    </svg>
                                    Logout
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content Area -->
        <div class="flex flex-1 overflow-hidden">

            <!-- Sidebar -->
            <aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
                class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
                <!-- Sidebar Content -->
                <div class="h-full flex flex-col">
                    <!-- Sidebar Header -->
                    <div class="p-4 flex items-center justify-between">
                        <div class="flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="ml-2 font-semibold text-lg transition-opacity duration-300"
                                :class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
                        </div>
                    </div>

                    <!-- Sidebar Menu -->
                    <nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
                        <ul class="space-y-1 px-2">
                            <!-- Dashboard -->
                            <li>
                                <a href="index.html"
                                    class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                                    </svg>
                                    <span :class="{ 'opacity-0': !sidebarOpen }"
                                        class="transition-opacity duration-300">Dashboard</span>
                                </a>
                            </li>

                            <!-- Products -->
                            <li x-data="{ open: true }">
                                <button @click="open = !open"
                                    class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
                                    <div class="flex items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                                        </svg>
                                        <span :class="{ 'opacity-0': !sidebarOpen }"
                                            class="transition-opacity duration-300">Products</span>
                                    </div>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
                                        :class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 5l7 7-7 7" />
                                    </svg>
                                </button>

                                <!-- Level 2 submenu -->
                                <div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
                                    <a href="#"
                                        class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
                                        <div class="flex items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
                                                viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                            </svg>
                                            <span>All Products</span>
                                        </div>
                                    </a>
                                    <a href="create-product.html"
                                        class="block px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
                                        <div class="flex items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
                                                viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                            </svg>
                                            <span>Create Product</span>
                                        </div>
                                    </a>
                                    <a href="#"
                                        class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
                                        <div class="flex items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
                                                viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                                            </svg>
                                            <span>Categories</span>
                                        </div>
                                    </a>
                                </div>
                            </li>

                            <!-- Profile -->
                            <li>
                                <a href="profile.html"
                                    class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                    </svg>
                                    <span :class="{ 'opacity-0': !sidebarOpen }"
                                        class="transition-opacity duration-300">Profile</span>
                                </a>
                            </li>

                            <!-- Settings -->
                            <li>
                                <a href="#"
                                    class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                    <span :class="{ 'opacity-0': !sidebarOpen }"
                                        class="transition-opacity duration-300">Settings</span>
                                </a>
                            </li>
                        </ul>
                    </nav>

                    <!-- Sidebar Footer -->
                    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                        <div class="flex items-center" x-show="sidebarOpen">
                            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
                                class="h-8 w-8 rounded-full">
                            <div class="ml-3">
                                <p class="text-sm font-medium">John Doe</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Main Content -->
            <main :class="{ 'ml-0 md:ml-16': !sidebarOpen, 'ml-0 md:ml-64': sidebarOpen }"
                class="flex-1 overflow-auto bg-gray-100 dark:bg-gray-900 content-transition">
                <div class="p-6">
                    <!-- Success Message -->
                    <div x-show="formSubmitted" x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="opacity-0 transform -translate-y-2"
                        x-transition:enter-end="opacity-100 transform translate-y-0"
                        x-transition:leave="transition ease-in duration-300"
                        x-transition:leave-start="opacity-100 transform translate-y-0"
                        x-transition:leave-end="opacity-0 transform -translate-y-2"
                        class="mb-6 bg-green-50 dark:bg-green-900 border-l-4 border-green-500 p-4 rounded-md">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-green-500 dark:text-green-400"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-green-700 dark:text-green-200">Product created successfully!</p>
                            </div>
                            <div class="ml-auto pl-3">
                                <div class="-mx-1.5 -my-1.5">
                                    <button @click="formSubmitted = false"
                                        class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                        <span class="sr-only">Dismiss</span>
                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path fill-rule="evenodd"
                                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="p-6">
                        <!-- Breadcrumbs -->
                        <div class="mb-6 flex items-center text-sm">
                            <a href="index.html" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 5l7 7-7 7" />
                            </svg>
                            <span class="text-gray-500 dark:text-gray-400">Buttons</span>
                        </div>

                        <!-- Page Title -->
                        <div class="mb-6">
                            <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Buttons</h1>
                            <p class="text-gray-600 dark:text-gray-400 mt-1">Various button styles and components for
                                your application</p>
                        </div>

                        <!-- Basic Buttons -->
                        <div
                            class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
                            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Basic Buttons</h3>
                            </div>
                            <div class="p-6 space-y-6">
                                <div class="flex flex-wrap gap-4">
                                    <button
                                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        Primary
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
                                        Secondary
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
                                        Success
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
                                        Danger
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-colors">
                                        Warning
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors">
                                        Info
                                    </button>
                                </div>

                                <div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
                                    <p>Basic button styles with different colors for different actions.</p>
                                </div>
                            </div>
                        </div>

                        <!-- Outline Buttons -->
                        <div
                            class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
                            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Outline Buttons</h3>
                            </div>
                            <div class="p-6 space-y-6">
                                <div class="flex flex-wrap gap-4">
                                    <button
                                        class="px-4 py-2 border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 dark:text-blue-400 dark:border-blue-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        Primary
                                    </button>
                                    <button
                                        class="px-4 py-2 border border-gray-600 text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:text-gray-400 dark:border-gray-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
                                        Secondary
                                    </button>
                                    <button
                                        class="px-4 py-2 border border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 dark:text-green-400 dark:border-green-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
                                        Success
                                    </button>
                                    <button
                                        class="px-4 py-2 border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
                                        Danger
                                    </button>
                                    <button
                                        class="px-4 py-2 border border-yellow-500 text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-colors">
                                        Warning
                                    </button>
                                    <button
                                        class="px-4 py-2 border border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 dark:text-indigo-400 dark:border-indigo-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors">
                                        Info
                                    </button>
                                </div>

                                <div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
                                    <p>Outline button styles with border and transparent background.</p>
                                </div>
                            </div>
                        </div>

                        <!-- Button Sizes -->
                        <div
                            class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
                            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Button Sizes</h3>
                            </div>
                            <div class="p-6 space-y-6">
                                <div class="flex flex-wrap items-center gap-4">
                                    <button
                                        class="px-2.5 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        Extra Small
                                    </button>
                                    <button
                                        class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        Small
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        Default
                                    </button>
                                    <button
                                        class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-lg font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        Large
                                    </button>
                                    <button
                                        class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white text-xl font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        Extra Large
                                    </button>
                                </div>

                                <div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
                                    <p>Different button sizes for various contexts.</p>
                                </div>
                            </div>
                        </div>

                        <!-- Icon Buttons -->
                        <div
                            class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
                            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Icon Buttons</h3>
                            </div>
                            <div class="p-6 space-y-6">
                                <div class="flex flex-wrap gap-4">
                                    <button
                                        class="p-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                        </svg>
                                    </button>
                                    <button
                                        class="p-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                    <button
                                        class="p-2 bg-green-600 hover:bg-green-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7" />
                                        </svg>
                                    </button>
                                    <button
                                        class="p-2 bg-red-600 hover:bg-red-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                    <button
                                        class="p-2 border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 dark:text-blue-400 dark:border-blue-400 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                                        </svg>
                                    </button>
                                </div>

                                <div class="flex flex-wrap gap-4 mt-4">
                                    <button
                                        class="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                        </svg>
                                        Add Item
                                    </button>
                                    <button
                                        class="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                                        </svg>
                                        Save
                                    </button>
                                    <button
                                        class="flex items-center px-4 py-2 border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                        Delete
                                    </button>
                                </div>

                                <div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
                                    <p>Icon-only buttons and buttons with icons and text.</p>
                                </div>
                            </div>
                        </div>

                        <!-- Button States -->
                        <div
                            class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
                            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Button States</h3>
                            </div>
                            <div class="p-6 space-y-6">
                                <div class="flex flex-wrap gap-4">
                                    <button
                                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                        Normal
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors cursor-default">
                                        Hover/Active
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md focus:outline-none ring-2 ring-blue-500 ring-offset-2 transition-colors">
                                        Focused
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-blue-400 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors opacity-50 cursor-not-allowed"
                                        disabled>
                                        Disabled
                                    </button>
                                </div>

                                <div class="flex flex-wrap gap-4 mt-4">
                                    <button
                                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors flex items-center">
                                        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                                stroke-width="4">
                                            </circle>
                                            <path class="opacity-75" fill="currentColor"
                                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                            </path>
                                        </svg>
                                        Loading...
                                    </button>
                                    <button
                                        class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors flex items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7" />
                                        </svg>
                                        Completed
                                    </button>
                                </div>

                                <div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
                                    <p>Different button states: normal, hover/active, focused, disabled, and loading.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Button Groups -->
                        <div
                            class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
                            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Button Groups</h3>
                            </div>
                            <div class="p-6 space-y-6">
                                <div class="inline-flex rounded-md shadow-sm" role="group">
                                    <button
                                        class="px-4 py-2 text-sm font-medium text-blue-700 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
                                        Day
                                    </button>
                                    <button
                                        class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
                                        Week
                                    </button>
                                    <button
                                        class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
                                        Month
                                    </button>
                                </div>

                                <div class="inline-flex rounded-md shadow-sm mt-4" role="group">
                                    <button
                                        class="p-2 text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M4 6h16M4 12h16M4 18h7" />
                                        </svg>
                                    </button>
                                    <button
                                        class="p-2 text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M4 6h16M4 12h8m-8 6h16" />
                                        </svg>
                                    </button>
                                    <button
                                        class="p-2 text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M4 6h16M4 12h16m-7 6h7" />
                                        </svg>
                                    </button>
                                </div>

                                <div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
                                    <p>Button groups for related actions or toggling between options.</p>
                                </div>
                            </div>
                        </div>

                        <!-- Social Buttons -->
                        <div
                            class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
                            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Social Buttons</h3>
                            </div>
                            <div class="p-6 space-y-6">
                                <div class="flex flex-wrap gap-4">
                                    <button
                                        class="flex items-center px-4 py-2 bg-[#1877F2] hover:bg-[#166FE5] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#1877F2] focus:ring-offset-2 transition-colors">
                                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
                                            aria-hidden="true">
                                            <path fill-rule="evenodd"
                                                d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                        Facebook
                                    </button>
                                    <button
                                        class="flex items-center px-4 py-2 bg-[#1DA1F2] hover:bg-[#1A91DA] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#1DA1F2] focus:ring-offset-2 transition-colors">
                                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
                                            aria-hidden="true">
                                            <path
                                                d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84">
                                            </path>
                                        </svg>
                                        Twitter
                                    </button>
                                    <button
                                        class="flex items-center px-4 py-2 bg-[#EA4335] hover:bg-[#D73925] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#EA4335] focus:ring-offset-2 transition-colors">
                                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
                                            aria-hidden="true">
                                            <path
                                                d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z">
                                            </path>
                                        </svg>
                                        Google
                                    </button>
                                    <button
                                        class="flex items-center px-4 py-2 bg-[#333333] hover:bg-[#2B2B2B] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#333333] focus:ring-offset-2 transition-colors">
                                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
                                            aria-hidden="true">
                                            <path fill-rule="evenodd"
                                                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                        GitHub
                                    </button>
                                </div>

                                <div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
                                    <p>Social media buttons for authentication or sharing.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Footer -->
                    <footer class="mt-auto py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                        &copy; 2023 AdminDash. All rights reserved.
                    </footer>
                </div>
            </main>
        </div>
    </div>
</body>

</html>
⚠️ **GitHub.com Fallback** ⚠️