Edit LeftPanelButton to add variants

Took 8 minutes

src/components/layout/dashboard/left_panel/LeftPanel.jsx

@@ -7,10 +7,14 @@ import {
   Spacer,
 } from '@chakra-ui/react';
 import {useRouter} from 'next/router';
+
 import {AiFillMessage} from 'react-icons/ai';
 import {BsFillPersonFill} from 'react-icons/bs';
+import {BiLogOut} from 'react-icons/bi';
+
 import LeftPanelButton
   from '@/components/layout/dashboard/left_panel/LeftPanelButton';
+import {signOut} from 'next-auth/react';
 
 export default function LeftPanel(props) {
   const router = useRouter();
@@ -42,6 +46,10 @@ export default function LeftPanel(props) {
                            onClickHandler={() => router.push('/dashboard')}>
             Profile
           </LeftPanelButton>
+          <LeftPanelButton variant={"outline"} leftIcon={<BiLogOut/>}
+                           onClickHandler={() => signOut()}>
+            Deconnexion
+          </LeftPanelButton>
         </Flex>
       </Flex>
     </Card>

src/components/layout/dashboard/left_panel/LeftPanelButton.tsx

@@ -1,19 +1,20 @@
-import {Button} from '@chakra-ui/react';
+import {Button, ResponsiveValue} from '@chakra-ui/react';
 import {ReactJSXElement} from '@emotion/react/types/jsx-namespace';
 
 type Props = {
   children?: ReactJSXElement
   onClickHandler: () => void
-  leftIcon ?: ReactJSXElement
+  leftIcon?: ReactJSXElement,
+  variant?: ResponsiveValue<'link' | 'outline' | string | 'ghost' | 'solid' | 'unstyled'>
 }
 
 export default function LeftPanelButton(props: Props) {
-  const {children, onClickHandler, leftIcon: icon} = props;
+  const {children, onClickHandler, leftIcon: icon, variant = "ghost"} = props;
 
   return (
       <Button
           colorScheme={'purple'}
-          variant={'ghost'}
+          variant={variant}
           width={'100%'}
           justifyContent={'left'}
           onClick={onClickHandler}