| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { Sparkles } from 'lucide-react'; |
| 3 |
|
| 4 |
const MetricCard = ({ icon: Icon, iconBg, label, value, locked = false }) => ( |
| 5 |
<div className="disco:relative disco:bg-white disco:border disco:border-[#e5e7eb] disco:rounded-xl disco:px-4 disco:py-3.5 disco:flex disco:items-center disco:gap-3 disco:flex-1 disco:overflow-hidden"> |
| 6 |
<span |
| 7 |
className="disco:size-8 disco:flex disco:items-center disco:justify-center disco:rounded-lg disco:text-base disco:shrink-0" |
| 8 |
style={{ backgroundColor: iconBg }} |
| 9 |
> |
| 10 |
<Icon className="disco:size-4" /> |
| 11 |
</span> |
| 12 |
<div> |
| 13 |
<p className="disco:text-[10px] disco:font-semibold disco:text-[#9ca3af] disco:uppercase disco:tracking-wider disco:leading-none"> |
| 14 |
{label} |
| 15 |
</p> |
| 16 |
<p className="disco:text-base disco:font-bold disco:text-[#111827] disco:mt-1 disco:leading-tight"> |
| 17 |
{value} |
| 18 |
</p> |
| 19 |
</div> |
| 20 |
|
| 21 |
{locked && ( |
| 22 |
<div className="disco:absolute disco:inset-0 disco:flex disco:items-center disco:justify-center disco:bg-white/80 disco:backdrop-blur-[2px]"> |
| 23 |
<span className="disco:inline-flex disco:items-center disco:gap-1 disco:rounded-md disco:bg-primary disco:px-2 disco:py-1 disco:text-[11px] disco:font-semibold disco:text-white"> |
| 24 |
<Sparkles className="disco:size-3" /> |
| 25 |
{__('Pro feature', 'disco')} |
| 26 |
</span> |
| 27 |
</div> |
| 28 |
)} |
| 29 |
</div> |
| 30 |
); |
| 31 |
|
| 32 |
export default MetricCard; |
| 33 |
|
