127 lines
3.6 KiB
Markdown
127 lines
3.6 KiB
Markdown
# 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 |