Components - LaravelDaily/starter-kit GitHub Wiki
The AdminDash starter kit provides a comprehensive collection of UI components including cards, alerts, badges, progress bars, tooltips, modals, accordions, and breadcrumbs. All components support dark mode and follow accessibility best practices.
{{-- resources/views/components/card.blade.php --}}
@props([
'header' => null,
'footer' => null,
'padding' => true
])
<div {{ $attributes->merge(['class' => 'bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden']) }}>
@if($header)
<div class="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
{{ $header }}
</div>
@endif
<div @class(['p-4' => $padding])>
{{ $slot }}
</div>
@if($footer)
<div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
{{ $footer }}
</div>
@endif
</div>{{-- resources/views/components/stat-card.blade.php --}}
@props([
'title',
'value',
'change' => null,
'trend' => 'up', // up, down, neutral
'icon' => null,
'color' => 'blue'
])
@php
$colorClasses = [
'blue' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400',
'green' => 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
'red' => 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400',
'yellow' => 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400',
'purple' => 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
];
$trendClasses = [
'up' => 'text-green-600 dark:text-green-400',
'down' => 'text-red-600 dark:text-red-400',
'neutral' => 'text-gray-600 dark:text-gray-400',
];
@endphp
<x-card>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ $title }}</p>
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mt-1">{{ $value }}</h3>
@if($change)
<p class="text-sm flex items-center mt-1 {{ $trendClasses[$trend] }}">
@if($trend === 'up')
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
@elseif($trend === 'down')
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
@endif
{{ $change }}
</p>
@endif
</div>
@if($icon)
<div class="p-3 rounded-full {{ $colorClasses[$color] }}">
@include("icons.{$icon}", ['class' => 'h-6 w-6'])
</div>
@endif
</div>
</x-card><!-- Basic Card -->
<x-card>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Basic Card</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">A simple card with title and content.</p>
</x-card>
<!-- Card with Header and Footer -->
<x-card>
<x-slot name="header">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Card with Header</h3>
</x-slot>
<p class="text-gray-600 dark:text-gray-400">Card content goes here.</p>
<x-slot name="footer">
<div class="flex justify-end">
<x-button>Action</x-button>
</div>
</x-slot>
</x-card>
<!-- Stat Card -->
<x-stat-card
title="Total Revenue"
value="$24,560"
change="12.5% increase"
trend="up"
icon="dollar"
color="green"
/>{{-- resources/views/components/alert.blade.php --}}
@props([
'type' => 'info', // success, warning, error, info
'dismissible' => false,
'title' => null
])
@php
$typeClasses = [
'success' => 'bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 text-green-700 dark:text-green-200',
'warning' => 'bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 text-yellow-700 dark:text-yellow-200',
'error' => 'bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 text-red-700 dark:text-red-200',
'info' => 'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 text-blue-700 dark:text-blue-200',
];
$iconClasses = [
'success' => 'text-green-500 dark:text-green-400',
'warning' => 'text-yellow-500 dark:text-yellow-400',
'error' => 'text-red-500 dark:text-red-400',
'info' => 'text-blue-500 dark:text-blue-400',
];
@endphp
<div {{ $attributes->merge(['class' => 'p-4 rounded-md ' . $typeClasses[$type]]) }} x-data="{ show: true }" x-show="show">
<div class="flex items-center">
<div class="flex-shrink-0">
@if($type === 'success')
<svg class="h-5 w-5 {{ $iconClasses[$type] }}" 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>
@elseif($type === 'warning')
<svg class="h-5 w-5 {{ $iconClasses[$type] }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
@elseif($type === 'error')
<svg class="h-5 w-5 {{ $iconClasses[$type] }}" 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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
@else
<svg class="h-5 w-5 {{ $iconClasses[$type] }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
@endif
</div>
<div class="ml-3 flex-1">
@if($title)
<h3 class="text-sm font-medium">{{ $title }}</h3>
<div class="mt-2 text-sm">{{ $slot }}</div>
@else
<p class="text-sm">{{ $slot }}</p>
@endif
</div>
@if($dismissible)
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button @click="show = false" class="inline-flex rounded-md p-1.5 {{ $iconClasses[$type] }} hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-{{ $type === 'error' ? 'red' : $type }}-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>
@endif
</div>
</div>{{-- resources/views/components/toast.blade.php --}}
@props([
'type' => 'success',
'duration' => 3000,
'position' => 'bottom-right'
])
@php
$positionClasses = [
'top-right' => 'fixed top-4 right-4',
'top-left' => 'fixed top-4 left-4',
'bottom-right' => 'fixed bottom-4 right-4',
'bottom-left' => 'fixed bottom-4 left-4',
];
$typeClasses = [
'success' => 'bg-white dark:bg-gray-800 border-green-200 dark:border-green-700',
'error' => 'bg-white dark:bg-gray-800 border-red-200 dark:border-red-700',
'warning' => 'bg-white dark:bg-gray-800 border-yellow-200 dark:border-yellow-700',
'info' => 'bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-700',
];
$iconClasses = [
'success' => 'text-green-500 dark:text-green-400',
'error' => 'text-red-500 dark:text-red-400',
'warning' => 'text-yellow-500 dark:text-yellow-400',
'info' => 'text-blue-500 dark:text-blue-400',
];
@endphp
<div
x-data="{
show: true,
init() {
setTimeout(() => this.show = false, {{ $duration }})
}
}"
x-show="show"
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-100"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform translate-y-2"
class="{{ $positionClasses[$position] }} max-w-xs rounded-lg shadow-lg border {{ $typeClasses[$type] }} z-50"
>
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
@if($type === 'success')
<svg class="h-6 w-6 {{ $iconClasses[$type] }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
@elseif($type === 'error')
<svg class="h-6 w-6 {{ $iconClasses[$type] }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
@endif
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $slot }}</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button @click="show = false" class="inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<span class="sr-only">Close</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><!-- Basic Alerts -->
<x-alert type="success">Your changes have been saved successfully.</x-alert>
<x-alert type="warning">Your account is about to expire. Please renew your subscription.</x-alert>
<x-alert type="error">There was an error processing your request. Please try again.</x-alert>
<x-alert type="info">A new software update is available. See what's new in version 2.0.4.</x-alert>
<!-- Dismissible Alert -->
<x-alert type="success" dismissible title="Success!">
Your changes have been saved successfully.
</x-alert>
<!-- Toast Notifications -->
<x-toast type="success" position="top-right">
Operation completed successfully!
</x-toast>{{-- resources/views/components/badge.blade.php --}}
@props([
'variant' => 'default',
'size' => 'default',
'pill' => false,
'dot' => false
])
@php
$baseClasses = 'inline-flex items-center font-medium';
$variantClasses = [
'default' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
'primary' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
'success' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
'warning' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
'danger' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
'info' => 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
];
$sizeClasses = [
'sm' => 'px-2 py-0.5 text-xs',
'default' => 'px-2.5 py-0.5 text-xs',
'lg' => 'px-3 py-0.5 text-sm',
];
$shapeClasses = $pill ? 'rounded-full' : 'rounded';
$classes = $baseClasses . ' ' . $variantClasses[$variant] . ' ' . $sizeClasses[$size] . ' ' . $shapeClasses;
@endphp
<span {{ $attributes->merge(['class' => $classes]) }}>
@if($dot)
<svg class="-ml-0.5 mr-1.5 h-2 w-2" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
@endif
{{ $slot }}
</span>{{-- resources/views/components/notification-badge.blade.php --}}
@props(['count' => 0, 'max' => 99])
@php
$displayCount = $count > $max ? $max . '+' : (string) $count;
@endphp
<span class="relative inline-block">
{{ $slot }}
@if($count > 0)
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full transform translate-x-1/2 -translate-y-1/2">
{{ $displayCount }}
</span>
@else
<span class="absolute top-0 right-0 inline-block w-2 h-2 bg-red-600 rounded-full transform translate-x-1/2 -translate-y-1/2"></span>
@endif
</span><!-- Basic Badges -->
<x-badge>Default</x-badge>
<x-badge variant="primary">Primary</x-badge>
<x-badge variant="success">Success</x-badge>
<x-badge variant="warning">Warning</x-badge>
<x-badge variant="danger">Danger</x-badge>
<!-- Pill Badges -->
<x-badge variant="primary" pill>Primary</x-badge>
<x-badge variant="success" pill>Success</x-badge>
<!-- Badges with Dots -->
<x-badge variant="success" dot>Active</x-badge>
<x-badge variant="danger" dot>Inactive</x-badge>
<!-- Notification Badges -->
<x-notification-badge :count="3">
<button class="p-2 text-gray-500 hover:text-gray-700">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
</x-notification-badge>{{-- resources/views/components/progress.blade.php --}}
@props([
'value' => 0,
'max' => 100,
'size' => 'default',
'color' => 'blue',
'striped' => false,
'animated' => false,
'label' => false
])
@php
$percentage = ($value / $max) * 100;
$sizeClasses = [
'sm' => 'h-1.5',
'default' => 'h-2.5',
'lg' => 'h-4',
'xl' => 'h-6',
];
$colorClasses = [
'blue' => 'bg-blue-600',
'green' => 'bg-green-600',
'yellow' => 'bg-yellow-500',
'red' => 'bg-red-600',
'purple' => 'bg-purple-600',
];
$barClasses = $colorClasses[$color] . ' ' . $sizeClasses[$size] . ' rounded-full transition-all duration-300';
if ($striped) {
$barClasses .= ' bg-stripe';
}
if ($animated) {
$barClasses .= ' animate-pulse';
}
if ($label && $size === 'xl') {
$barClasses .= ' flex items-center justify-center text-xs font-medium text-white';
}
@endphp
<div class="w-full bg-gray-200 rounded-full {{ $sizeClasses[$size] }} dark:bg-gray-700">
<div
class="{{ $barClasses }}"
style="width: {{ $percentage }}%"
role="progressbar"
aria-valuenow="{{ $value }}"
aria-valuemin="0"
aria-valuemax="{{ $max }}"
>
@if($label && $size === 'xl')
{{ round($percentage) }}%
@endif
</div>
</div><!-- Basic Progress Bars -->
<x-progress :value="25" color="blue" />
<x-progress :value="45" color="green" />
<x-progress :value="65" color="yellow" />
<x-progress :value="85" color="red" />
<!-- Different Sizes -->
<x-progress :value="50" size="sm" />
<x-progress :value="50" size="default" />
<x-progress :value="50" size="lg" />
<x-progress :value="75" size="xl" label />
<!-- Striped and Animated -->
<x-progress :value="60" color="blue" striped />
<x-progress :value="70" color="green" animated />{{-- resources/views/components/tooltip.blade.php --}}
@props([
'text',
'position' => 'top', // top, right, bottom, left
'delay' => 0
])
@php
$positionClasses = [
'top' => 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
'right' => 'left-full top-1/2 transform -translate-y-1/2 ml-2',
'bottom' => 'top-full left-1/2 transform -translate-x-1/2 mt-2',
'left' => 'right-full top-1/2 transform -translate-y-1/2 mr-2',
];
$arrowClasses = [
'top' => 'top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700',
'right' => 'right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700',
'bottom' => 'bottom-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-900 dark:border-b-gray-700',
'left' => 'left-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-l-gray-900 dark:border-l-gray-700',
];
@endphp
<div x-data="{ tooltip: false }" class="relative inline-block">
<div
@mouseenter="setTimeout(() => tooltip = true, {{ $delay }})"
@mouseleave="tooltip = false"
{{ $attributes }}
>
{{ $slot }}
</div>
<div
x-show="tooltip"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform scale-95"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-95"
class="absolute {{ $positionClasses[$position] }} px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-md shadow-lg z-50 whitespace-nowrap"
>
{{ $text }}
<div class="absolute {{ $arrowClasses[$position] }}"></div>
</div>
</div><!-- Basic Tooltips -->
<x-tooltip text="Tooltip on top" position="top">
<x-button>Hover me</x-button>
</x-tooltip>
<x-tooltip text="Tooltip on right" position="right">
<x-button>Right tooltip</x-button>
</x-tooltip>
<!-- Icon with Tooltip -->
<x-tooltip text="This is additional information about this feature">
<button class="text-gray-500 hover:text-gray-700">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</x-tooltip>{{-- resources/views/components/modal.blade.php --}}
@props([
'name',
'show' => false,
'maxWidth' => '2xl'
])
@php
$maxWidthClass = [
'sm' => 'sm:max-w-sm',
'md' => 'sm:max-w-md',
'lg' => 'sm:max-w-lg',
'xl' => 'sm:max-w-xl',
'2xl' => 'sm:max-w-2xl',
'3xl' => 'sm:max-w-3xl',
'4xl' => 'sm:max-w-4xl',
'5xl' => 'sm:max-w-5xl',
'6xl' => 'sm:max-w-6xl',
][$maxWidth];
@endphp
<div
x-data="{
show: @js($show),
focusables() {
let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
return [...$el.querySelectorAll(selector)].filter(el => ! el.hasAttribute('disabled'))
},
firstFocusable() { return this.focusables()[0] },
lastFocusable() { return this.focusables().slice(-1)[0] },
nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }
}"
x-init="$watch('show', value => {
if (value) {
document.body.classList.add('overflow-hidden');
setTimeout(() => firstFocusable().focus(), 100)
} else {
document.body.classList.remove('overflow-hidden')
}
})"
x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
x-on:close-modal.window="$event.detail == '{{ $name }}' ? show = false : null"
x-on:close.stop="show = false"
x-on:keydown.escape.window="show = false"
x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
x-show="show"
class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
style="display: none;"
>
<div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div x-show="show" class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all {{ $maxWidthClass }} mx-auto"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
{{ $slot }}
</div>
</div><!-- Modal Trigger -->
<x-button x-on:click="$dispatch('open-modal', 'confirm-deletion')">
Delete Item
</x-button>
<!-- Modal Definition -->
<x-modal name="confirm-deletion" max-width="md">
<div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-red-600 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Delete Item</h3>
<div class="mt-2">
<p class="text-sm text-gray-600 dark:text-gray-400">
Are you sure you want to delete this item? This action cannot be undone.
</p>
</div>
</div>
</div>
</div>
<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="danger" class="w-full sm:ml-3 sm:w-auto" x-on:click="$dispatch('close-modal', 'confirm-deletion')">
Delete
</x-button>
<x-button variant="secondary" class="mt-3 w-full sm:mt-0 sm:w-auto" x-on:click="$dispatch('close-modal', 'confirm-deletion')">
Cancel
</x-button>
</div>
</x-modal>{{-- resources/views/components/accordion.blade.php --}}
@props(['multiple' => false])
<div x-data="{
activeAccordion: {{ $multiple ? '[]' : 'null' }},
toggle(index) {
if ({{ $multiple ? 'true' : 'false' }}) {
if (this.activeAccordion.includes(index)) {
this.activeAccordion = this.activeAccordion.filter(i => i !== index)
} else {
this.activeAccordion.push(index)
}
} else {
this.activeAccordion = this.activeAccordion === index ? null : index
}
},
isActive(index) {
return {{ $multiple ? 'this.activeAccordion.includes(index)' : 'this.activeAccordion === index' }}
}
}" class="space-y-2">
{{ $slot }}
</div>{{-- resources/views/components/accordion-item.blade.php --}}
@props(['title', 'index'])
<div class="border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden">
<button
@click="toggle({{ $index }})"
class="flex justify-between items-center w-full px-4 py-3 text-left text-gray-800 dark:text-gray-200 font-medium bg-gray-50 dark:bg-gray-750 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
<span>{{ $title }}</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform" :class="{ 'rotate-180': isActive({{ $index }}) }" 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="isActive({{ $index }})"
x-transition:enter="transition ease-out duration-200"
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-200"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="px-4 py-3 text-gray-600 dark:text-gray-400"
>
{{ $slot }}
</div>
</div><!-- Basic Accordion -->
<x-accordion>
<x-accordion-item title="What is AdminDash?" :index="0">
<p>AdminDash is a modern dashboard template built with HTML, CSS, and AlpineJS. It provides a clean and intuitive interface for building admin panels, dashboards, and other web applications.</p>
</x-accordion-item>
<x-accordion-item title="How do I customize the theme?" :index="1">
<p>You can customize the theme by modifying the Tailwind CSS configuration file and the CSS variables defined in the style tag. You can change colors, fonts, spacing, and other design elements to match your brand.</p>
</x-accordion-item>
<x-accordion-item title="Is AdminDash free to use?" :index="2">
<p>AdminDash is released under the MIT license, which means it is free to use for personal and commercial projects. You can modify and distribute it as you wish, but you must include the original copyright notice.</p>
</x-accordion-item>
</x-accordion>
<!-- Multiple Open Accordion -->
<x-accordion multiple>
<x-accordion-item title="Section 1" :index="0">
<p>Content for section 1</p>
</x-accordion-item>
<x-accordion-item title="Section 2" :index="1">
<p>Content for section 2</p>
</x-accordion-item>
</x-accordion>{{-- resources/views/components/breadcrumb.blade.php --}}
@props(['separator' => 'arrow'])
@php
$separatorIcons = [
'arrow' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />',
'slash' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />',
'chevron' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />',
];
@endphp
<nav {{ $attributes->merge(['class' => 'flex items-center text-sm']) }} aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
{{ $slot }}
</ol>
</nav>{{-- resources/views/components/breadcrumb-item.blade.php --}}
@props([
'href' => null,
'active' => false,
'icon' => null
])
<li class="inline-flex items-center">
@if(!$loop->first)
<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>
@endif
@if($href && !$active)
<a href="{{ $href }}" class="text-blue-600 dark:text-blue-400 hover:underline inline-flex items-center">
@if($icon)
@include("icons.{$icon}", ['class' => 'w-4 h-4 mr-1'])
@endif
{{ $slot }}
</a>
@else
<span class="text-gray-500 dark:text-gray-400 inline-flex items-center">
@if($icon)
@include("icons.{$icon}", ['class' => 'w-4 h-4 mr-1'])
@endif
{{ $slot }}
</span>
@endif
</li><!-- Basic Breadcrumbs -->
<x-breadcrumb>
<x-breadcrumb-item href="/" icon="home">Home</x-breadcrumb-item>
<x-breadcrumb-item href="/products">Products</x-breadcrumb-item>
<x-breadcrumb-item active>Create Product</x-breadcrumb-item>
</x-breadcrumb>
<!-- With Icons -->
<x-breadcrumb>
<x-breadcrumb-item href="/" icon="home">Dashboard</x-breadcrumb-item>
<x-breadcrumb-item href="/ui-elements" icon="squares">UI Elements</x-breadcrumb-item>
<x-breadcrumb-item active>Components</x-breadcrumb-item>
</x-breadcrumb>{{-- resources/views/dashboard.blade.php --}}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<x-stat-card
title="Total Users"
value="2,543"
change="12.5% increase"
trend="up"
icon="users"
color="blue"
/>
<x-stat-card
title="Total Revenue"
value="$45,231"
change="8.2% increase"
trend="up"
icon="dollar"
color="green"
/>
<x-stat-card
title="Total Orders"
value="1,205"
change="3.1% decrease"
trend="down"
icon="shopping-bag"
color="purple"
/>
<x-stat-card
title="Total Visitors"
value="12,345"
change="24.5% increase"
trend="up"
icon="eye"
color="yellow"
/>
</div>{{-- resources/views/components/alert-system.blade.php --}}
<div class="space-y-4">
@if(session('success'))
<x-alert type="success" dismissible>
{{ session('success') }}
</x-alert>
@endif
@if(session('warning'))
<x-alert type="warning" dismissible>
{{ session('warning') }}
</x-alert>
@endif
@if(session('error'))
<x-alert type="error" dismissible>
{{ session('error') }}
</x-alert>
@endif
@if($errors->any())
<x-alert type="error" dismissible title="Please fix the following errors:">
<ul class="list-disc list-inside">
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</x-alert>
@endif
</div>{{-- resources/views/settings/index.blade.php --}}
<div class="max-w-4xl mx-auto">
<h1 class="text-2xl font-bold mb-6">Settings</h1>
<x-accordion>
<x-accordion-item title="General Settings" :index="0">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Site Name</label>
<input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Site Description</label>
<textarea class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></textarea>
</div>
</div>
</x-accordion-item>
<x-accordion-item title="Email Settings" :index="1">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">SMTP Host</label>
<input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">SMTP Port</label>
<input type="number" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
</div>
</div>
</x-accordion-item>
<x-accordion-item title="Security Settings" :index="2">
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<label class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Enable two-factor authentication</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<label class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Require strong passwords</label>
</div>
</div>
</x-accordion-item>
</x-accordion>
</div>| Component | Props | Description |
|---|---|---|
<x-card> |
header, footer, padding
|
Card container with optional header/footer |
<x-stat-card> |
title, value, change, trend, icon, color
|
Statistics display card |
<x-alert> |
type, dismissible, title
|
Alert/notification component |
<x-toast> |
type, duration, position
|
Toast notification |
<x-badge> |
variant, size, pill, dot
|
Badge/label component |
<x-progress> |
value, max, size, color, striped, animated, label
|
Progress bar |
<x-tooltip> |
text, position, delay
|
Tooltip component |
<x-modal> |
name, show, maxWidth
|
Modal dialog |
<x-accordion> |
multiple |
Accordion container |
<x-breadcrumb> |
separator |
Breadcrumb navigation |
{{-- resources/views/components/custom-alert.blade.php --}}
<x-alert {{ $attributes }}>
<div class="flex items-center">
@if($icon ?? false)
@include("icons.{$icon}", ['class' => 'w-5 h-5 mr-3'])
@endif
<div>
{{ $slot }}
</div>
</div>
</x-alert><!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">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</main>
</div>
</div>
</body>
</html>