39 lines
1.3 KiB
JavaScript
39 lines
1.3 KiB
JavaScript
export const SetupProgress = ( {
|
|
setupTasksComplete,
|
|
setupCompletePercent,
|
|
} ) => (
|
|
<svg
|
|
className="woocommerce-layout__activity-panel-tab-icon setup-progress"
|
|
viewBox="0 0 25 25"
|
|
>
|
|
<path
|
|
className="setup-progress-ring"
|
|
d="M 12.476 23.237 C 18.369 23.237 23.146 18.414 23.146 12.464 C 23.146 6.512 18.369 1.687 12.476 1.687 C 6.581 1.687 1.803 6.512 1.803 12.464 C 1.803 18.414 6.581 23.237 12.476 23.237 Z"
|
|
/>
|
|
<path
|
|
className="setup-progress-slice"
|
|
transform="matrix(-0.034188, 0, 0, 0.034134, 38.373184, -8.278505)"
|
|
d="M 522 607 A 237 237 0 0 1 759 370 L 759 607 Z"
|
|
fill={ setupTasksComplete > 0 ? 'currentColor' : 'white' }
|
|
/>
|
|
<path
|
|
className="setup-progress-slice"
|
|
transform="matrix(-0.034188, 0, 0, -0.034134, 38.368454, 33.13131)"
|
|
d="M 522 607 A 237 237 0 0 1 759 370 L 759 607 Z"
|
|
fill={ setupCompletePercent >= 50 ? 'currentColor' : 'white' }
|
|
/>
|
|
<path
|
|
className="setup-progress-slice"
|
|
transform="matrix(0.034188, 0, 0, -0.034134, -13.500516, 33.133827)"
|
|
d="M 522 607 A 237 237 0 0 1 759 370 L 759 607 Z"
|
|
fill={ setupCompletePercent >= 75 ? 'currentColor' : 'white' }
|
|
/>
|
|
<path
|
|
className="setup-progress-slice"
|
|
transform="matrix(0.034188, 0, 0, 0.034134, -13.495783, -8.281025)"
|
|
d="M 522 607 A 237 237 0 0 1 759 370 L 759 607 Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
);
|