deyvisonwanderley
c459297968
- Replaced SVG icons with lucide-svelte components across various files for consistency and improved performance. - Refactored ActionGuard, ErrorModal, FileUpload, and other components to enhance readability and maintainability. - Updated the dashboard pages to include new icons and improved layout for better user experience. - Enhanced StatsCard component to support dynamic icon rendering, allowing for more flexible usage. - Improved overall styling and structure in multiple components to align with design standards.
43 lines
1.3 KiB
Svelte
43 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import type { Component } from "svelte";
|
|
|
|
interface Props {
|
|
title: string;
|
|
value: string | number;
|
|
Icon?: Component;
|
|
icon?: string; // Mantido para compatibilidade retroativa
|
|
trend?: {
|
|
value: number;
|
|
isPositive: boolean;
|
|
};
|
|
description?: string;
|
|
color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error";
|
|
}
|
|
|
|
let { title, value, Icon, icon, trend, description, color = "primary" }: Props = $props();
|
|
</script>
|
|
|
|
<div class="stats shadow bg-base-100">
|
|
<div class="stat">
|
|
<div class="stat-figure text-{color}">
|
|
{#if Icon}
|
|
<svelte:component this={Icon} class="inline-block w-8 h-8 stroke-current" strokeWidth={2} />
|
|
{:else if icon}
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current">
|
|
{@html icon}
|
|
</svg>
|
|
{/if}
|
|
</div>
|
|
<div class="stat-title">{title}</div>
|
|
<div class="stat-value text-{color}">{value}</div>
|
|
{#if description}
|
|
<div class="stat-desc">{description}</div>
|
|
{/if}
|
|
{#if trend}
|
|
<div class="stat-desc {trend.isPositive ? 'text-success' : 'text-error'}">
|
|
{trend.isPositive ? '↗︎' : '↘︎'} {Math.abs(trend.value)}%
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|