← All changes
|
backend/views/components/Analytics/components/dashboard/StatCard.jsx
+20
-15
1.4.2
→
1.4.21
View file →
| @@ -1,14 +1,14 @@ | ||
| 1 | 1 | import { Badge } from '@/components/ui/badge'; |
| 2 | 2 | import { cn } from '@/lib/utils'; |
| 3 | 3 | |
| 4 | 4 | const CARD_STYLES = { |
| 5 | - campaigns: 'disco-bg-[#f3efff]', | |
| 6 | - net: 'disco-bg-[#f6fff9]', | |
| 7 | - discount: 'disco-bg-[#fff8ec]', | |
| 8 | - orders: 'disco-bg-[#e5eeff]', | |
| 9 | - discountOrders: 'disco-bg-[#e9ffff]', | |
| 10 | - customers: 'disco-bg-[#eeffe6]', | |
| 5 | + campaigns: 'disco:bg-[#f3efff]', | |
| 6 | + net: 'disco:bg-[#f6fff9]', | |
| 7 | + discount: 'disco:bg-[#fff8ec]', | |
| 8 | + orders: 'disco:bg-[#e5eeff]', | |
| 9 | + discountOrders: 'disco:bg-[#e9ffff]', | |
| 10 | + customers: 'disco:bg-[#eeffe6]', | |
| 11 | 11 | }; |
| 12 | 12 | |
| 13 | 13 | const StatCard = ({ |
| 14 | 14 | title, |
| @@ -22,39 +22,44 @@ | ||
| 22 | 22 | }) => { |
| 23 | 23 | return ( |
| 24 | 24 | <div |
| 25 | 25 | className={cn( |
| 26 | - 'disco-relative disco-overflow-hidden disco-rounded-[10px] disco-border-2 disco-border-[#e5e7eb] disco-p-4 disco-flex-1 disco-min-w-[240px]', | |
| 26 | + 'disco:relative disco:overflow-hidden disco:rounded-[10px] disco:border-2 disco:border-[#e5e7eb] disco:p-4 disco:flex-1 disco:min-w-60', | |
| 27 | 27 | CARD_STYLES[variant] |
| 28 | 28 | )} |
| 29 | 29 | > |
| 30 | - <div className="disco-flex disco-items-start disco-justify-between disco-mb-2"> | |
| 30 | + <div className="disco:flex disco:items-start disco:justify-between disco:mb-2"> | |
| 31 | 31 | <div> |
| 32 | - <p className="disco-text-xs disco-font-semibold disco-uppercase disco-tracking-[0.5px] disco-text-black"> | |
| 32 | + <p className="disco:text-xs! disco:font-semibold disco:uppercase disco:tracking-[0.5px] disco:text-black"> | |
| 33 | 33 | {title} |
| 34 | 34 | </p> |
| 35 | 35 | {subtitle && ( |
| 36 | - <p className="disco-text-[8px] disco-text-[#575757]"> | |
| 36 | + <p className="disco:text-[8px]! disco:text-[#575757]"> | |
| 37 | 37 | {subtitle} |
| 38 | 38 | </p> |
| 39 | 39 | )} |
| 40 | 40 | </div> |
| 41 | - <img src={icon} alt={title} className="disco-w-6 disco-h-6" /> | |
| 41 | + <img src={icon} alt={title} className="disco:w-6 disco:h-6" /> | |
| 42 | 42 | </div> |
| 43 | 43 | |
| 44 | 44 | {isLoading ? ( |
| 45 | 45 | <> |
| 46 | - <div className="disco-h-8 disco-w-24 disco-bg-gray-300/50 disco-rounded disco-mb-2 disco-animate-pulse" /> | |
| 47 | - <div className="disco-h-5 disco-w-32 disco-bg-gray-300/50 disco-rounded-full disco-animate-pulse" /> | |
| 46 | + <div className="disco:h-8 disco:w-24 disco:bg-gray-300/50 disco:rounded disco:mb-2 disco:animate-pulse" /> | |
| 47 | + <div className="disco:h-5 disco:w-32 disco:bg-gray-300/50 disco:rounded-full disco:animate-pulse" /> | |
| 48 | 48 | </> |
| 49 | 49 | ) : ( |
| 50 | 50 | <> |
| 51 | - <p className="disco-text-2xl disco-font-bold disco-text-[#111827] disco-tracking-tight disco-mb-2"> | |
| 51 | + <p className="disco:text-2xl! disco:font-bold disco:text-[#111827] disco:tracking-tight disco:mb-2"> | |
| 52 | 52 | {value} |
| 53 | 53 | </p> |
| 54 | 54 | {trend && ( |
| 55 | 55 | <Badge |
| 56 | - className={`${isTrendUp ? '!disco-bg-[#dcfce7] disco-text-[#15803d]' : '!disco-bg-[#FFE0DE] disco-text-[#DC5243]'} disco-text-[8px] disco-font-medium disco-rounded-full disco-px-2 disco-py-0.5 disco-border-0`} | |
| 56 | + className={cn( | |
| 57 | + 'disco:text-[12px] disco:font-medium disco:rounded-full disco:px-2 disco:py-0.5 disco:border-0', | |
| 58 | + isTrendUp | |
| 59 | + ? 'disco:bg-[#dcfce7]! disco:text-[#15803d]' | |
| 60 | + : 'disco:bg-[#FFE0DE]! disco:text-[#DC5243]' | |
| 61 | + )} | |
| 57 | 62 | > |
| 58 | 63 | {trend} |
| 59 | 64 | </Badge> |
| 60 | 65 | )} |