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

<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

<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

// 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'));

<!-- 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:

Modifying the component file directly
Publishing the component to your app directory
Creating a new component that extends this one
Using CSS custom properties for theming

Best Practices

Use meaningful icons: Choose Lucide icons that represent the data
Consistent colors: Use a consistent color scheme across cards
Proper translations: Always use Laravel's translation system
Accessible text: Provide meaningful tooltips and labels
Performance: Keep animation delays reasonable (0.1s intervals)
Mobile-first: Ensure cards work well on mobile devices