| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
|
| 3 |
const WelcomeStatCard = ({ title, data, color }) => { |
| 4 |
const percentage = |
| 5 |
data.total > 0 ? Math.round((data.active / data.total) * 100) : 0; |
| 6 |
|
| 7 |
return ( |
| 8 |
<div className="rounded-lg border border-solid border-gray-100 bg-white p-4"> |
| 9 |
<h3 className="m-0 mb-3 text-[13px] font-semibold uppercase tracking-wide text-slate-500"> |
| 10 |
{title} |
| 11 |
</h3> |
| 12 |
<div className="flex items-center justify-between gap-3"> |
| 13 |
<div className="flex flex-col gap-1"> |
| 14 |
<div className="flex gap-1.5 text-[13px] text-slate-700"> |
| 15 |
<span className="text-slate-400"> |
| 16 |
{__('Active:', 'ultimate-store-kit')} |
| 17 |
</span> |
| 18 |
<strong>{data.active}</strong> |
| 19 |
</div> |
| 20 |
<div className="flex gap-1.5 text-[13px] text-slate-700"> |
| 21 |
<span className="text-slate-400"> |
| 22 |
{__('Inactive:', 'ultimate-store-kit')} |
| 23 |
</span> |
| 24 |
<strong>{data.inactive}</strong> |
| 25 |
</div> |
| 26 |
<div className="flex gap-1.5 text-[13px] text-slate-700"> |
| 27 |
<span className="text-slate-400"> |
| 28 |
{__('Total:', 'ultimate-store-kit')} |
| 29 |
</span> |
| 30 |
<strong>{data.total}</strong> |
| 31 |
</div> |
| 32 |
</div> |
| 33 |
<div className="h-[60px] w-[60px] shrink-0"> |
| 34 |
<svg viewBox="0 0 36 36" className="h-full w-full"> |
| 35 |
<path |
| 36 |
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" |
| 37 |
fill="none" |
| 38 |
stroke="#e2e8f0" |
| 39 |
strokeWidth="3" |
| 40 |
/> |
| 41 |
<path |
| 42 |
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" |
| 43 |
fill="none" |
| 44 |
stroke={color} |
| 45 |
strokeWidth="3" |
| 46 |
strokeDasharray={`${percentage}, 100`} |
| 47 |
/> |
| 48 |
<text |
| 49 |
x="18" |
| 50 |
y="20.5" |
| 51 |
className="font-bold" |
| 52 |
textAnchor="middle" |
| 53 |
fontSize="8" |
| 54 |
fill="#334155" |
| 55 |
> |
| 56 |
{percentage}% |
| 57 |
</text> |
| 58 |
</svg> |
| 59 |
</div> |
| 60 |
</div> |
| 61 |
</div> |
| 62 |
); |
| 63 |
}; |
| 64 |
|
| 65 |
export default WelcomeStatCard; |
| 66 |
|
