chore: code refactor

Author: buzzracharyeah-rejan

src/scenes/Dashboard/fragments/Banner.tsx

@@ -2,57 +2,11 @@ import React from 'react';
 import { Box, Button, Typography, useTheme } from '@mui/material';
 
 import '../dashboard.styles.css';
+import useStyles from '../useStyles';
 
 const Banner = () => {
   const theme = useTheme();
-  const classes = {
-    bannerContainer: {
-      height: '1007.93px',
-      background: "url('/assets/heroImage.png')",
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-      opacity: '0.85',
-      position: 'relative',
-      zIndex: 1,
-    },
-    bannerAdv: {
-      letterSpacing: '3px',
-      fontWeight: '600',
-      fontSize: '16px',
-      '&.MuiTypography-subtitle1': {},
-    },
-    bannerTitle: {
-      color: '#B88E2F',
-      fontSize: '52px',
-      fontStyle: 'normal',
-      fontWeight: '700',
-      lineHeight: '65px',
-      '&.MuiTypography-h6': {},
-    },
-    bannerDesc: {
-      width: '546px',
-      fontSize: '18px',
-      fontWeight: '500',
-      lineHeight: '24px',
-      letterSpacing: '1.2px',
-      m: '1rem 0',
-      '&.MuiTypography-body1': {},
-    },
-    button: {
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.primary.main,
-      p: '1.7rem 4rem',
-      width: '190px',
-      height: '24px',
-      textAlign: 'center',
-      borderRadius: 'none',
-      '&:hover': {
-        backgroundColor: theme.palette.secondary[400],
-        color: theme.palette.primary.main,
-      },
-    },
-  };
+  const classes = useStyles();
   return (
     <Box component='main' sx={classes.bannerContainer}>
       <Box
@@ -75,7 +29,7 @@ const Banner = () => {
           </Typography>
         </Box>
 
-        <Button variant='contained' size='small' sx={classes.button}>
+        <Button variant='contained' size='small' sx={classes.bannerButton}>
           Buy Now
         </Button>
       </Box>

src/scenes/Dashboard/fragments/FeaturedProducts.tsx

@@ -1,70 +1,21 @@
-import {
-  Box,
-  Card,
-  CardMedia,
-  CardContent,
-  Typography,
-  CardActions,
-  Button,
-  Container,
-  useTheme,
-  Hidden,
-  Fade,
-  Backdrop,
-} from '@mui/material';
+import { Box, Card, CardMedia, CardContent, Typography, Button, Fade } from '@mui/material';
 import { dataSource } from '../../../data';
 import { useState } from 'react';
+import useStyles from '../useStyles';
 
 const FeaturedProducts = () => {
-  const theme = useTheme();
+  const classes = useStyles();
   const [hoveredCard, setHoveredCard] = useState<string | null>(null);
+  const [isHovered, setIsHovered] = useState<boolean>(false);
 
   const handleCardHover = (cardId: string) => {
     setHoveredCard(cardId);
+    setIsHovered(true);
   };
 
   const handleCardLeave = () => {
     setHoveredCard(null);
-  };
-
-  const classes = {
-    card: {
-      maxWidth: '285px',
-      maxHeight: '446px',
-      gap: '1rem',
-      m: '1rem 0.5rem',
-      borderRadius: 'none',
-    },
-    cardMedia: {
-      width: '285px',
-      height: '301px',
-      flexShrink: '0',
-    },
-    cardContent: {
-      width: '285px',
-      height: '145px',
-      flexShrink: '0',
-      backgroundColor: 'var(--color-light-bg, #F4F5F7)',
-    },
-    title: {
-      fontSize: '40px',
-      fontStyle: 'normal',
-      fontWeight: '700',
-      lineHeight: '120%',
-      m: '1.5rem',
-    },
-    button: {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.secondary.main,
-      width: '202px',
-      height: '48px',
-      textAlign: 'center',
-      border: `1px solid ${theme.palette.secondary[200]}`,
-      '&:hover': {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.secondary.main[600],
-      },
-    },
+    setIsHovered(false);
   };
 
   return (
@@ -96,6 +47,7 @@ const FeaturedProducts = () => {
                 </Typography>
               </CardContent>
             </Card>
+
             <Fade in={hoveredCard === item.id}>
               <Button
                 variant='contained'

src/scenes/Dashboard/useStyles.ts

@@ -0,0 +1,102 @@
+import { useTheme } from '@mui/material';
+
+const useStyles = () => {
+  const theme = useTheme();
+
+  const bannerStyles = {
+    bannerContainer: {
+      height: '1007.93px',
+      background: "url('/assets/heroImage.png')",
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      opacity: '0.85',
+      position: 'relative',
+      zIndex: 1,
+    },
+    bannerAdv: {
+      letterSpacing: '3px',
+      fontWeight: '600',
+      fontSize: '16px',
+    },
+    bannerTitle: {
+      color: '#B88E2F',
+      fontSize: '52px',
+      fontStyle: 'normal',
+      fontWeight: '700',
+      lineHeight: '65px',
+    },
+    bannerDesc: {
+      width: '546px',
+      fontSize: '18px',
+      fontWeight: '500',
+      lineHeight: '24px',
+      letterSpacing: '1.2px',
+      m: '1rem 0',
+    },
+    bannerButton: {
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.primary.main,
+      p: '1.7rem 4rem',
+      width: '190px',
+      height: '24px',
+      textAlign: 'center',
+      borderRadius: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.secondary[400],
+        color: theme.palette.primary.main,
+      },
+    },
+  };
+
+  const featProductStyles = {
+    card: {
+      maxWidth: '285px',
+      maxHeight: '446px',
+      gap: '1rem',
+      m: '1rem 0.5rem',
+      borderRadius: 'none',
+    },
+    cardMedia: {
+      width: '285px',
+      height: '301px',
+      flexShrink: '0',
+    },
+    cardContent: {
+      width: '285px',
+      height: '145px',
+      flexShrink: '0',
+      backgroundColor: 'var(--color-light-bg, #F4F5F7)',
+    },
+    title: {
+      fontSize: '40px',
+      fontStyle: 'normal',
+      fontWeight: '700',
+      lineHeight: '120%',
+      m: '1.5rem',
+    },
+    button: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.secondary.main,
+      width: '202px',
+      height: '48px',
+      textAlign: 'center',
+      border: `1px solid ${theme.palette.secondary[200]}`,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.secondary.main[600],
+      },
+    },
+    backdrop: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      background: ' rgba(0, 0, 0, 0.5)',
+      zIndex: 10,
+    },
+  };
+
+  return { ...bannerStyles, ...featProductStyles };
+};
+
+export default useStyles;