From e7b7db64c14b59a3cfc8ae164f0126e4c28464c2 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 7 Aug 2024 15:21:37 -0300
Subject: [PATCH] Add "x" button on component BigCard

---
 src/components/big-card.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
index f71c86480..126444b32 100644
--- a/src/components/big-card.tsx
+++ b/src/components/big-card.tsx
@@ -1,19 +1,25 @@
 import React from 'react';
 
 import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+
+const closeIcon = require('@tabler/icons/outline/x.svg');
 
 interface IBigCard {
   title: React.ReactNode;
   subtitle?: React.ReactNode;
   children: React.ReactNode;
+  onClose?: boolean;
+  buttonEvent?(): void;
 }
 
-const BigCard: React.FC<IBigCard> = ({ title, subtitle, children }) => {
+const BigCard: React.FC<IBigCard> = ({ title, subtitle, children, buttonEvent, onClose = false }) => {
   return (
     <Card variant='rounded' size='xl'>
-      <CardBody>
+      <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} />)}
             <Text size='2xl' align='center' weight='bold'>{title}</Text>
             {subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}
           </Stack>