Refatoring BigCard

src/components/big-card.tsx

@@ -9,17 +9,16 @@ interface IBigCard {
   title: React.ReactNode;
   subtitle?: React.ReactNode;
   children: React.ReactNode;
-  onClose?: boolean;
-  buttonEvent?(): void;
+  onClose?(): void;
 }
 
-const BigCard: React.FC<IBigCard> = ({ title, subtitle, children, buttonEvent, onClose = false }) => {
+const BigCard: React.FC<IBigCard> = ({ title, subtitle, children, onClose }) => {
   return (
     <Card variant='rounded' size='xl'>
       <CardBody className='relative'>
         <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
           <Stack space={2}>
-            {onClose && (<IconButton src={closeIcon} className='absolute right-[2%]  text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' onClick={buttonEvent} />)}
+            {onClose && (<IconButton src={closeIcon} className='absolute right-[2%]  text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' onClick={onClose} />)}
             <Text size='2xl' align='center' weight='bold'>{title}</Text>
             {subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}
           </Stack>

src/features/onboarding/steps/avatar-selection-step.tsx

@@ -72,9 +72,8 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
   return (
     <BigCard
       title={<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />}
-      buttonEvent={handleComplete}
       subtitle={<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />}
-      onClose
+      onClose={handleComplete}
     >
       <Stack space={10}>
         <div className='relative mx-auto rounded-full bg-gray-200'>

src/features/onboarding/steps/bio-step.tsx

@@ -52,8 +52,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
     <BigCard
       title={<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />}
       subtitle={<FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />}
-      buttonEvent={handleComplete}
-      onClose
+      onClose={handleComplete}
     >
       <Stack space={5}>
         <div>

src/features/onboarding/steps/cover-photo-selection-step.tsx

@@ -76,8 +76,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
     <BigCard
       title={<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />}
       subtitle={<FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />}
-      buttonEvent={handleComplete}
-      onClose
+      onClose={handleComplete}
     >
       <Stack space={10}>
         <div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>

src/features/onboarding/steps/display-name-step.tsx

@@ -63,8 +63,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
     <BigCard
       title={<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />}
       subtitle={<FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />}
-      buttonEvent={handleComplete}
-      onClose
+      onClose={handleComplete}
     >
       <Stack space={5}>
         <FormGroup

src/features/onboarding/steps/suggested-accounts-step.tsx

@@ -77,8 +77,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
     <BigCard
       title={<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />}
       subtitle={<FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />}
-      buttonEvent={handleComplete}
-      onClose
+      onClose={handleComplete}
     >
       {renderBody()}