update

2026-02-02 22:55:43 +07:00
parent 8125804bac
commit 8b3be9cc58
7 changed files with 105 additions and 142 deletions
@@ -1,127 +0,0 @@
-# Service Card Component
-
-## Overview
-The `service-card` component is a reusable Blade component designed to display service statistics in a clean, modern card format with hover effects and tooltips.
-
-## Usage
-
-### Basic Usage
-```blade
-<x-service-card 
-    icon="box"
-    iconColor="text-green-400"
-    badgeColor="bg-green-400"
-    title="Services"
-    value="5"
-    label="Active Services"
-    tooltip="Total active services"
-/>
-```
-
-### With Animation Delay
-```blade
-<x-service-card 
-    icon="credit-card"
-    iconColor="text-primary"
-    badgeColor="bg-primary"
-    title="Balance"
-    value="1,000,000 đ"
-    label="Account Balance"
-    tooltip="Current account balance"
-    :animationDelay="0.2"
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | string | `'box'` | Lucide icon name |
-| `iconColor` | string | `'text-green-400'` | Tailwind CSS color class for icon |
-| `badgeColor` | string | `'bg-green-400'` | Tailwind CSS color class for badge |
-| `title` | string | `''` | Badge title text |
-| `value` | mixed | `0` | Main value to display |
-| `label` | string | `''` | Label text below value |
-| `tooltip` | string | `''` | Tooltip text on hover |
-| `animationDelay` | float | `0` | Animation delay in seconds |
-
-## Features
-
- **Responsive Design**: Adapts to different screen sizes
- **Hover Effects**: Scale animation on hover
- **Tooltips**: Alpine.js powered tooltips with smooth transitions
- **Animation**: Staggered fade-in animations
- **Accessibility**: Proper ARIA attributes and keyboard navigation
- **Internationalization**: Supports Laravel's translation system
-
-## Styling
-
-The component uses Tailwind CSS classes and includes:
- Shadow effects
- Rounded corners
- Smooth transitions
- Background decorations
- Responsive grid layout
-
-## Dependencies
-
- **Laravel Blade**: For component rendering
- **Tailwind CSS**: For styling
- **Alpine.js**: For interactive features
- **Lucide Icons**: For icon display
- **Animate.css**: For animations (optional)
-
-## Example Implementation
-
-```php
-// In your controller
-$serviceCards = [
-    [
-        'icon' => 'box',
-        'iconColor' => 'text-green-400',
-        'badgeColor' => 'bg-green-400',
-        'title' => __('Services'),
-        'value' => count($services),
-        'label' => __('Services'),
-        'tooltip' => __('Total active services')
-    ],
-    // ... more cards
-];
-
-return view('dashboard', compact('serviceCards'));
-```
-
-```blade
-<!-- In your Blade view -->
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
-    @foreach($serviceCards as $index => $card)
-        <x-service-card 
-            :icon="$card['icon']"
-            :iconColor="$card['iconColor']"
-            :badgeColor="$card['badgeColor']"
-            :title="$card['title']"
-            :value="$card['value']"
-            :label="$card['label']"
-            :tooltip="$card['tooltip']"
-            :animationDelay="$index * 0.1"
-        />
-    @endforeach
-</div>
-```
-
-## Customization
-
-You can customize the component by:
-1. Modifying the component file directly
-2. Publishing the component to your app directory
-3. Creating a new component that extends this one
-4. Using CSS custom properties for theming
-
-## Best Practices
-
-1. **Use meaningful icons**: Choose Lucide icons that represent the data
-2. **Consistent colors**: Use a consistent color scheme across cards
-3. **Proper translations**: Always use Laravel's translation system
-4. **Accessible text**: Provide meaningful tooltips and labels
-5. **Performance**: Keep animation delays reasonable (0.1s intervals)
-6. **Mobile-first**: Ensure cards work well on mobile devices 
@@ -0,0 +1,54 @@
+@php
+    $tag = 'button';
+    $href = null;
+
+    if ($route) {
+        $href = route($route);
+        $tag = 'a';
+    } elseif ($url) {
+        $href = $url;
+        $tag = 'a';
+    } elseif ($attributes->has('href')) {
+        $href = $attributes->get('href');
+        $tag = 'a';
+    }
+
+    $baseClasses = 'd-inline-flex gap-2 align-items-center justify-content-center text-white border-0 shadow-md px-2 py-1 rounded-2';
+
+    $variants = [
+        'primary' => 'bg-primary',
+        'secondary' => 'bg-secondary',
+        'outline' => 'bg-outline',
+        'ghost' => 'bg-ghost',
+        'link' => 'bg-link',
+        'destructive' => 'bg-destructive',
+    ];
+
+    $sizes = [
+        'default' => 'h-10',
+        'sm' => 'h-6',
+        'lg' => 'h-12',
+        'icon' => 'h-10',
+    ];
+
+    $variantClass = $variants[$variant] ?? $variants['primary'];
+    $sizeClass = $sizes[$size] ?? $sizes['default'];
+
+    $classes = "{$baseClasses} {$variantClass} {$sizeClass}";
+@endphp
+
+@if($tag === 'a')
+    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
+        @if($icon)
+            <i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
+        @endif
+        {{ $slot }}
+    </a>
+@else
+    <button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
+        @if($icon)
+            <i data-lucide="{{ $icon }}" class="w-1 h-1 mr-2"></i>
+        @endif
+        {{ $slot }}
+    </button>
+@endif