mirror of
https://github.com/logto-io/logto.git
synced 2025-02-17 22:04:19 -05:00
feat(console): add free plan notification on the get-started page (#4179)
This commit is contained in:
Xiao Yijun
GitHub
parent
34105e1579
commit
cbefbd3f57
4 changed files with 229 additions and 21 deletions
|
|
@ -0,0 +1,101 @@
|
|||
<svg width="103" height="103" viewBox="0 0 103 103" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g style="mix-blend-mode:multiply">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3154 88.7002C12.2697 88.4225 13.213 81.8941 13.2815 73.7018C13.8051 73.2925 14.3558 72.7798 14.92 72.2155C16.7698 70.3657 17.5993 68.1961 16.9801 67.5769C16.4579 67.0546 14.8328 67.5629 13.2269 68.8446C13.0041 61.895 12.1228 56.7466 10.1847 56.7466C7.57345 56.7466 7.08384 63.9017 7.08384 72.728C7.08384 73.8296 7.0991 74.9053 7.12992 75.9442C6.39413 75.0994 5.70136 74.6366 5.17568 74.6366C3.74452 74.6366 4.45428 78.5383 5.91831 82.3595C6.93385 85.0102 8.11737 87.1972 9.20012 88.1149C9.44271 88.4327 9.70703 88.6292 9.99352 88.6895C9.9922 88.1495 9.98851 86.8031 9.98345 84.9826C8.60541 82.3241 5.72759 76.9434 5.72759 76.9434L9.98008 83.7709L9.97181 80.8106L9.97178 80.7986L9.97176 80.7915L9.97176 80.7894C9.96552 78.5574 9.95862 76.0897 9.95197 73.6875C9.93132 73.7067 9.92075 73.7166 9.92075 73.7166V72.8341C9.93027 72.8257 9.93987 72.8173 9.94954 72.8089C9.93418 67.2476 9.92075 62.2445 9.92075 61.6347C9.92075 60.684 10.0965 64.1653 10.2134 72.5904C11.8736 71.2776 15.0511 69.7701 15.0511 69.7701C12.7715 71.2291 10.9258 72.814 10.2248 73.4401C10.2766 77.4623 10.3144 82.5325 10.3154 88.7002Z" fill="url(#paint0_linear_551_119702)"/>
|
||||
</g>
|
||||
<path d="M3.9487 89.5125H16.0344C17.1854 89.5125 17.9048 88.1547 16.0344 87.2495C14.164 86.3443 9.70381 85.6655 6.25075 86.005C2.79768 86.3444 2.65381 89.5125 3.9487 89.5125Z" fill="#C8BEE6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M71.3615 33.9806C64.2817 34.2763 58.4134 39.2599 56.7797 45.9084C50.5453 46.1174 45.5554 51.2373 45.5554 57.5226C45.5554 63.6549 50.3053 68.6778 56.3267 69.1128V69.1823H62.5856C56.5754 74.8496 48.474 78.3232 39.5613 78.3232C21.0227 78.3232 5.99414 63.2947 5.99414 44.7561C5.99414 26.2175 21.0227 11.189 39.5613 11.189C54.3307 11.189 66.8722 20.7277 71.3615 33.9806Z" fill="url(#paint1_linear_551_119702)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M56.3265 69.1129C50.3051 68.6778 45.5552 63.6549 45.5552 57.5226C45.5552 51.2373 50.5451 46.1175 56.7795 45.9084C58.4642 39.0525 64.6521 33.9668 72.0278 33.9668C79.1763 33.9668 85.2091 38.744 87.1077 45.28C93.6835 45.49 98.9481 50.7502 98.9481 57.2084C98.9481 63.4619 94.012 68.592 87.7291 69.1017V69.1824H56.3265V69.1129Z" fill="url(#paint2_linear_551_119702)"/>
|
||||
<rect x="51.1499" y="32.3682" width="7.19296" height="12.7875" fill="#947DFF"/>
|
||||
<rect width="9.59061" height="2.39765" rx="1.19883" transform="matrix(1 0 0 -1 49.9512 32.7681)" fill="#7958FF"/>
|
||||
<path d="M39.961 31.1694L67.1344 53.5475H12.7876L39.961 31.1694Z" fill="url(#paint3_linear_551_119702)"/>
|
||||
<rect x="14.7856" y="53.5474" width="50.3507" height="33.5671" fill="#7958FF"/>
|
||||
<rect x="14.7856" y="53.5474" width="50.3507" height="33.5671" fill="url(#paint4_linear_551_119702)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1714 67.9335C29.1714 61.9746 34.002 57.144 39.9608 57.144C45.9197 57.144 50.7503 61.9746 50.7503 67.9335L50.7503 67.9335V87.1147H29.1714V67.9335H29.1714Z" fill="url(#paint5_linear_551_119702)"/>
|
||||
<path d="M39.9607 60.3408C36.1738 60.3408 33.0344 63.1133 32.4615 66.7392C32.3582 67.3931 32.9049 67.9334 33.567 67.9334H46.3545C47.0166 67.9334 47.5632 67.3931 47.4599 66.7392C46.8871 63.1133 43.7477 60.3408 39.9607 60.3408Z" fill="url(#paint6_linear_551_119702)"/>
|
||||
<g filter="url(#filter0_i_551_119702)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3923 43.1058C39.8312 43.6014 40.5889 43.6474 41.0846 43.2084C41.5802 42.7695 41.6262 42.0118 41.1872 41.5162C40.7483 41.0205 39.9906 40.9745 39.4949 41.4135C38.9993 41.8525 38.9533 42.6101 39.3923 43.1058ZM42.1443 44.4051C41.1957 45.2452 39.8358 45.3241 38.8123 44.6871L37.0338 46.2621L37.2917 46.5533C37.438 46.7185 37.4227 46.9711 37.2575 47.1174L36.6592 47.6473C36.494 47.7936 36.2414 47.7783 36.0951 47.6131L35.8372 47.3218L34.9515 48.1061C34.6211 48.3988 34.116 48.3681 33.8234 48.0377C33.5307 47.7073 33.5614 47.2021 33.8918 46.9095L37.7525 43.4904C37.2439 42.3974 37.4865 41.057 38.4352 40.2169C39.5917 39.1926 41.3596 39.2999 42.3839 40.4564C43.4081 41.613 43.3009 43.3808 42.1443 44.4051Z" fill="#FEDEAC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3923 43.1058C39.8312 43.6014 40.5889 43.6474 41.0846 43.2084C41.5802 42.7695 41.6262 42.0118 41.1872 41.5162C40.7483 41.0205 39.9906 40.9745 39.4949 41.4135C38.9993 41.8525 38.9533 42.6101 39.3923 43.1058ZM42.1443 44.4051C41.1957 45.2452 39.8358 45.3241 38.8123 44.6871L37.0338 46.2621L37.2917 46.5533C37.438 46.7185 37.4227 46.9711 37.2575 47.1174L36.6592 47.6473C36.494 47.7936 36.2414 47.7783 36.0951 47.6131L35.8372 47.3218L34.9515 48.1061C34.6211 48.3988 34.116 48.3681 33.8234 48.0377C33.5307 47.7073 33.5614 47.2021 33.8918 46.9095L37.7525 43.4904C37.2439 42.3974 37.4865 41.057 38.4352 40.2169C39.5917 39.1926 41.3596 39.2999 42.3839 40.4564C43.4081 41.613 43.3009 43.3808 42.1443 44.4051Z" fill="url(#paint7_linear_551_119702)"/>
|
||||
</g>
|
||||
<rect x="32.3682" y="70.3311" width="15.9843" height="13.5867" rx="1.19883" fill="url(#paint8_linear_551_119702)"/>
|
||||
<rect x="45.1558" y="73.1284" width="1.59843" height="3.59648" rx="0.799217" fill="#7958FF"/>
|
||||
<path d="M13.187 89.5122H68.333V88.3134C68.333 87.6513 67.7963 87.1146 67.1342 87.1146H14.3858C13.7237 87.1146 13.187 87.6513 13.187 88.3134V89.5122Z" fill="url(#paint9_linear_551_119702)"/>
|
||||
<g style="mix-blend-mode:multiply" opacity="0.5">
|
||||
<path d="M53.5475 62.3389H54.1469C54.5883 62.3389 54.9462 62.6967 54.9462 63.1381V86.3154C54.9462 86.7568 54.5883 87.1146 54.1469 87.1146H35.1655L53.5475 62.3389Z" fill="url(#paint10_linear_551_119702)"/>
|
||||
</g>
|
||||
<rect x="54.7462" y="61.1402" width="37.5632" height="27.1734" rx="1.99804" fill="#E6DEFF"/>
|
||||
<rect x="54.7462" y="61.1402" width="37.5632" height="27.1734" rx="1.99804" stroke="#7958FF" stroke-width="2.39765"/>
|
||||
<rect x="54.7462" y="61.1402" width="37.5632" height="27.1734" rx="1.99804" stroke="url(#paint11_linear_551_119702)" stroke-width="2.39765"/>
|
||||
<rect x="64.7368" y="81.1206" width="17.5828" height="2.39765" rx="0.799217" fill="#CABEFF"/>
|
||||
<rect x="64.7368" y="77.1245" width="17.5828" height="2.39765" rx="0.799217" fill="#CABEFF"/>
|
||||
<rect x="68.7329" y="65.9355" width="9.59061" height="9.59061" rx="3.19687" fill="#FBF9FF"/>
|
||||
<circle cx="73.5281" cy="68.7327" r="1.59843" fill="#FDCF90"/>
|
||||
<path d="M71.1304 72.3294C71.1304 71.4466 71.846 70.731 72.7288 70.731H74.3272C75.21 70.731 75.9257 71.4466 75.9257 72.3294V73.1286C75.9257 73.57 75.5679 73.9278 75.1265 73.9278H71.9296C71.4882 73.9278 71.1304 73.57 71.1304 73.1286V72.3294Z" fill="#7958FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.2695 28.7102L38.6918 28.364C39.1337 28.0017 39.77 28.0017 40.2119 28.364L40.6341 28.7102L68.533 51.5494C69.0533 51.976 69.1208 52.7471 68.6824 53.2575L68.1621 53.8634C67.7377 54.3575 66.9964 54.4224 66.4926 54.0094L40.2119 32.4968C39.77 32.1345 39.1337 32.1345 38.6918 32.4968L12.4304 54.0094C11.9266 54.4224 11.1853 54.3575 10.7609 53.8634L10.2406 53.2575C9.8022 52.7471 9.86965 51.976 10.39 51.5494L38.2695 28.7102Z" fill="url(#paint12_linear_551_119702)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M84.855 13.7869C84.8689 13.7631 84.8995 13.755 84.9234 13.7689L85.7011 14.2226C85.7249 14.2365 85.733 14.2672 85.7191 14.291L84.9206 15.6597L86.5051 15.6669C86.5327 15.667 86.555 15.6895 86.5549 15.7171L86.5508 16.6174C86.5507 16.645 86.5282 16.6673 86.5006 16.6672L84.916 16.6601L85.7021 18.0359C85.7158 18.0599 85.7074 18.0904 85.6834 18.1041L84.9017 18.5508C84.8777 18.5645 84.8472 18.5561 84.8335 18.5322L84.0474 17.1564L83.2491 18.5249C83.2352 18.5488 83.2045 18.5569 83.1807 18.5429L82.403 18.0893C82.3792 18.0753 82.3711 18.0447 82.385 18.0209L83.1834 16.6523L81.5989 16.6451C81.5713 16.645 81.549 16.6225 81.5492 16.5949L81.5532 15.6946C81.5533 15.6669 81.5758 15.6447 81.6035 15.6448L83.1878 15.6519L82.4018 14.2761C82.3881 14.2522 82.3964 14.2216 82.4204 14.2079L83.2021 13.7613C83.2261 13.7476 83.2567 13.7559 83.2704 13.7799L84.0565 15.1557L84.855 13.7869Z" fill="#CABEFF"/>
|
||||
<path d="M95.0229 32.3682L94.5458 33.3928C94.2822 33.9586 93.6098 34.2037 93.044 33.9401V33.9401C92.4781 33.6766 91.8057 33.9217 91.5422 34.4875V34.4875C91.2786 35.0534 90.6063 35.2985 90.0404 35.0349V35.0349C89.4745 34.7714 88.8022 35.0165 88.5386 35.5823L88.0614 36.6069" stroke="#CABEFF" stroke-width="0.799217" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect width="2.56589" height="2.56589" rx="0.799217" transform="matrix(-0.758703 -0.651436 -0.651436 0.758703 10.0122 22.0513)" fill="#CABEFF"/>
|
||||
<defs>
|
||||
<filter id="filter0_i_551_119702" x="33.6226" y="39.5137" width="9.46436" height="9.59267" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.799217"/>
|
||||
<feGaussianBlur stdDeviation="0.399609"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_551_119702"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_551_119702" x1="10.7337" y1="89.4597" x2="16.6433" y2="56.2824" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C7BDE6"/>
|
||||
<stop offset="1" stop-color="#E4DBFF" stop-opacity="0.16"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_551_119702" x1="13.6035" y1="23.5926" x2="78.7928" y2="44.7561" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFDDB5"/>
|
||||
<stop offset="1" stop-color="#FFEEDC" stop-opacity="0.7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_551_119702" x1="72.2517" y1="33.9668" x2="72.2517" y2="92.9091" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FEFDFF"/>
|
||||
<stop offset="1" stop-color="#FAF7FF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_551_119702" x1="54.7465" y1="37.763" x2="23.577" y2="53.5475" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#947DFF"/>
|
||||
<stop offset="1" stop-color="#AF9EFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_551_119702" x1="23.1774" y1="92.709" x2="60.7406" y2="53.5474" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A896FF"/>
|
||||
<stop offset="1" stop-color="#7958FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_551_119702" x1="34.3663" y1="57.9433" x2="50.7503" y2="88.3135" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CABEFF"/>
|
||||
<stop offset="1" stop-color="#947DFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_551_119702" x1="53.7472" y1="63.6905" x2="32.3682" y2="63.6905" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFDDB5"/>
|
||||
<stop offset="1" stop-color="#FFCE94"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_551_119702" x1="40.1747" y1="45.7579" x2="36.291" y2="41.3726" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFDDB5"/>
|
||||
<stop offset="1" stop-color="#FFCE94"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_551_119702" x1="52.3486" y1="76.3252" x2="32.3682" y2="76.3252" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFDDB5"/>
|
||||
<stop offset="1" stop-color="#FFCE94"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_551_119702" x1="12.7874" y1="88.1136" x2="55.5455" y2="87.1145" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8366FF"/>
|
||||
<stop offset="1" stop-color="#7A59FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_551_119702" x1="55.709" y1="73.6932" x2="37.6055" y2="86.109" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E1CEE8"/>
|
||||
<stop offset="1" stop-color="#FFFBFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear_551_119702" x1="81.1204" y1="51.3498" x2="56.3492" y2="118.029" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#492EF3"/>
|
||||
<stop offset="1" stop-color="#CF69FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear_551_119702" x1="18.943" y1="41.0955" x2="59.1942" y2="41.0955" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8365FF"/>
|
||||
<stop offset="1" stop-color="#6C48FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,33 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.container {
|
||||
padding: _.unit(3) _.unit(8);
|
||||
background-color: var(--color-info-container);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: _.unit(6);
|
||||
margin-bottom: _.unit(6);
|
||||
|
||||
.image {
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-title-2);
|
||||
}
|
||||
|
||||
.description {
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: _.unit(1);
|
||||
}
|
||||
|
||||
.button {
|
||||
flex-shrink: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import FreePlanNotificationImage from '@/assets/images/free-plan-notification-image.svg';
|
||||
import PlanName from '@/components/PlanName';
|
||||
import { isCloud, isProduction } from '@/consts/env';
|
||||
import { ReservedPlanId } from '@/consts/subscriptions';
|
||||
import Button from '@/ds-components/Button';
|
||||
import useCurrentSubscription from '@/hooks/use-current-subscription';
|
||||
import { ReservedPlanName } from '@/types/subscriptions';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
function FreePlanNotification() {
|
||||
const { data: currentSubscription, error } = useCurrentSubscription();
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.get_started' });
|
||||
const navigate = useNavigate();
|
||||
const isLoadingSubscription = !currentSubscription && !error;
|
||||
|
||||
if (
|
||||
/**
|
||||
* Todo: @xiaoyijun remove this condition on subscription features ready.
|
||||
*/
|
||||
isProduction ||
|
||||
!isCloud ||
|
||||
isLoadingSubscription ||
|
||||
!currentSubscription ||
|
||||
currentSubscription.planId !== ReservedPlanId.free
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<FreePlanNotificationImage className={styles.image} />
|
||||
<div>
|
||||
<div className={styles.title}>
|
||||
<Trans
|
||||
components={{
|
||||
planName: <PlanName name={ReservedPlanName.Free} />,
|
||||
}}
|
||||
>
|
||||
{t('title')}
|
||||
</Trans>
|
||||
</div>
|
||||
<div className={styles.description}>
|
||||
<Trans
|
||||
components={{
|
||||
planName: <PlanName name={ReservedPlanName.Free} />,
|
||||
}}
|
||||
>
|
||||
{t('description')}
|
||||
</Trans>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
title="upsell.get_started.view_plans"
|
||||
type="outline"
|
||||
className={styles.button}
|
||||
size="large"
|
||||
onClick={() => {
|
||||
navigate('/tenant-settings/subscription');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FreePlanNotification;
|
||||
|
|
@ -12,6 +12,7 @@ import DynamicT from '@/ds-components/DynamicT';
|
|||
import Spacer from '@/ds-components/Spacer';
|
||||
import useUserPreferences from '@/hooks/use-user-preferences';
|
||||
|
||||
import FreePlanNotification from './FreePlanNotification';
|
||||
import Skeleton from './components/Skeleton';
|
||||
import useGetStartedMetadata from './hook';
|
||||
import * as styles from './index.module.scss';
|
||||
|
|
@ -68,28 +69,32 @@ function GetStarted() {
|
|||
</div>
|
||||
</div>
|
||||
{isLoading && <Skeleton />}
|
||||
{!isLoading &&
|
||||
data.map(({ id, title, subtitle, icon: CardIcon, isComplete, buttonText, onClick }) => (
|
||||
<Card key={id} className={styles.card}>
|
||||
{!isComplete && <CardIcon className={styles.icon} />}
|
||||
{isComplete && <CompleteIndicator className={styles.icon} />}
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.title}>
|
||||
<DynamicT forKey={title} />
|
||||
{!isLoading && (
|
||||
<>
|
||||
<FreePlanNotification />
|
||||
{data.map(({ id, title, subtitle, icon: CardIcon, isComplete, buttonText, onClick }) => (
|
||||
<Card key={id} className={styles.card}>
|
||||
{!isComplete && <CardIcon className={styles.icon} />}
|
||||
{isComplete && <CompleteIndicator className={styles.icon} />}
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.title}>
|
||||
<DynamicT forKey={title} />
|
||||
</div>
|
||||
<div className={styles.subtitle}>
|
||||
<DynamicT forKey={subtitle} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.subtitle}>
|
||||
<DynamicT forKey={subtitle} />
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className={styles.button}
|
||||
type="outline"
|
||||
size="large"
|
||||
title={buttonText}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</Card>
|
||||
))}
|
||||
<Button
|
||||
className={styles.button}
|
||||
type="outline"
|
||||
size="large"
|
||||
title={buttonText}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
<ConfirmModal
|
||||
isOpen={showConfirmModal}
|
||||
confirmButtonType="primary"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue