From b51cf2d848e96be8c9d8b563589e5d76fb0b4279 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 15 Aug 2024 13:24:48 -0300
Subject: [PATCH] Refatoring BigCard

---
 src/components/big-card.tsx                                | 7 +++----
 src/features/onboarding/steps/avatar-selection-step.tsx    | 3 +--
 src/features/onboarding/steps/bio-step.tsx                 | 3 +--
 .../onboarding/steps/cover-photo-selection-step.tsx        | 3 +--
 src/features/onboarding/steps/display-name-step.tsx        | 3 +--
 src/features/onboarding/steps/suggested-accounts-step.tsx  | 3 +--
 6 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
index 126444b32..8e822f719 100644
--- a/src/components/big-card.tsx
+++ b/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>
diff --git a/src/features/onboarding/steps/avatar-selection-step.tsx b/src/features/onboarding/steps/avatar-selection-step.tsx
index a3e3c9c1b..785288014 100644
--- a/src/features/onboarding/steps/avatar-selection-step.tsx
+++ b/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'>
diff --git a/src/features/onboarding/steps/bio-step.tsx b/src/features/onboarding/steps/bio-step.tsx
index cf236e402..30f9eb41b 100644
--- a/src/features/onboarding/steps/bio-step.tsx
+++ b/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>
diff --git a/src/features/onboarding/steps/cover-photo-selection-step.tsx b/src/features/onboarding/steps/cover-photo-selection-step.tsx
index 67a6824ff..a2c559cec 100644
--- a/src/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/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'>
diff --git a/src/features/onboarding/steps/display-name-step.tsx b/src/features/onboarding/steps/display-name-step.tsx
index cb4cda543..fd8ea8171 100644
--- a/src/features/onboarding/steps/display-name-step.tsx
+++ b/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
diff --git a/src/features/onboarding/steps/suggested-accounts-step.tsx b/src/features/onboarding/steps/suggested-accounts-step.tsx
index a56c55cbf..384d17121 100644
--- a/src/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/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()}