refactor: 💡 add motion and theme for orchid card

Hoang-Nguyen-Huy · Oct 2, 2024 · 1636c0b · 1636c0b
1 parent 4e18f4c
commit 1636c0b
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 28 deletions.
diff --git a/src/assets/images/avt.jpg b/src/assets/images/avt.jpg
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import avt from "../assets/images/avt.jpg";
 import {
   Container,
   Typography,
@@ -99,7 +100,7 @@ export default function About() {
               <Box textAlign='center'>
                 <Avatar
                   alt='Nguyen Huy Hoang'
-                  src=''
+                  src={avt}
                   sx={{ width: 200, height: 200, margin: "auto", mb: 2 }}
                 />
                 <Typography

diff --git a/src/components/MainContent/OrchidCard.jsx b/src/components/MainContent/OrchidCard.jsx
@@ -12,6 +12,9 @@ import Modal from "@mui/material/Modal";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
 import CategoryIcon from "@mui/icons-material/Category";
 import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import { useContext } from "react";
+import { ThemeContext } from "../../themes/ThemeContext";
 
 const style = {
   position: "absolute",
@@ -26,25 +29,31 @@ const style = {
   color: "white",
 };
 
+const MotionCard = motion(Card);
+
 export default function OrchidCard({ orchid }) {
   const { isVisible, showModal, hideModal } = useModal({ orchid });
   const navigate = useNavigate();
+  const { theme } = useContext(ThemeContext);
 
   const navigateDetailPage = () => {
     navigate(`/fer-lab1/${orchid.Id}`);
   };
 
   return (
     <>
-      <Card
-        variant='solid'
+      <MotionCard
+        variant='outlined'
         sx={{
           width: 320,
-          bgcolor: "black",
-          color: "white",
-          "&:hover": {
-            boxShadow: "0 0 10px rgba(255, 255, 255, 0.8)",
-          },
+          bgcolor: theme.card.backgroundColor,
+          color: theme.card.color,
+          borderColor: theme.divider,
+        }}
+        whileHover={{
+          scale: 1.05,
+          boxShadow: theme.elevation[3],
+          transition: { duration: 0.3 },
         }}
       >
         <CardOverflow>
@@ -53,85 +62,125 @@ export default function OrchidCard({ orchid }) {
             ratio='2'
             onClick={() => showModal(orchid)}
           >
-            <img
+            <motion.img
               src={orchid.image + "?auto=format&fit=crop&w=318"}
               srcSet={orchid.image + "?auto=format&fit=crop&w=318&dpr=2 2x"}
               loading='lazy'
-              alt=''
+              alt={orchid.name}
+              whileHover={{ scale: 1.1 }}
+              transition={{ duration: 0.3 }}
             />
           </AspectRatio>
         </CardOverflow>
         <CardContent>
           <Typography
             level='title-md'
-            sx={{ color: "white", fontWeight: "bold", mb: 0.5 }}
+            sx={{ color: theme.text.primary, fontWeight: "bold", mb: 0.5 }}
           >
             {orchid.name}
           </Typography>
           <Box>
             <Typography
               level='body-sm'
               sx={{
-                color: "grey.400",
+                color: theme.text.secondary,
                 mb: 2,
                 alignItems: "center",
                 display: "flex",
               }}
             >
-              <LocationOnIcon sx={{ marginRight: "4px", width: "16px" }} />
+              <LocationOnIcon
+                sx={{
+                  marginRight: "4px",
+                  width: "16px",
+                  color: theme.icon.color,
+                }}
+              />
               {orchid.origin}
             </Typography>
             <Typography
               level='body-sm'
               sx={{
-                color: "grey.400",
+                color: theme.text.secondary,
                 mb: 2,
                 alignItems: "center",
                 display: "flex",
               }}
             >
-              <CategoryIcon sx={{ marginRight: "4px", width: "16px" }} />
+              <CategoryIcon
+                sx={{
+                  marginRight: "4px",
+                  width: "16px",
+                  color: theme.icon.color,
+                }}
+              />
               {orchid.category}
             </Typography>
           </Box>
         </CardContent>
-        <CardOverflow
-          variant='soft'
-          sx={{ bgcolor: "rgba(255, 255, 255, 0.1)" }}
-        >
-          <Divider inset='context' sx={{ bgcolor: "white" }} />
+        <CardOverflow variant='soft' sx={{ bgcolor: theme.action.hover }}>
+          <Divider inset='context' sx={{ bgcolor: theme.divider }} />
           <CardContent
             orientation='horizontal'
             sx={{ justifyContent: "space-between" }}
           >
             <Rating name='read-only' value={orchid.rating} readOnly />
-            <Button variant='outlined' onClick={navigateDetailPage}>
-              Detail
-            </Button>
+            <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
+              <Button
+                variant='outlined'
+                onClick={navigateDetailPage}
+                sx={{
+                  color: theme.button.primary,
+                  borderColor: theme.button.primary,
+                  "&:hover": {
+                    backgroundColor: theme.button.hover,
+                    borderColor: theme.button.hover,
+                  },
+                }}
+              >
+                Detail
+              </Button>
+            </motion.div>
           </CardContent>
         </CardOverflow>
-      </Card>
+      </MotionCard>
 
       <Modal
         open={isVisible}
         onClose={hideModal}
         aria-labelledby='modal-modal-title'
         aria-describedby='modal-modal-description'
       >
-        <Box sx={style}>
+        <Box
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 400,
+            bgcolor: theme.card.backgroundColor,
+            border: `2px solid ${theme.divider}`,
+            boxShadow: 24,
+            p: 4,
+            color: theme.card.color,
+          }}
+        >
           <Card>
             <CardOverflow>
               <AspectRatio ratio='2'>
                 <img
                   src={orchid.image + "?auto=format&fit=crop&w=318"}
                   srcSet={orchid.image + "?auto=format&fit=crop&w=318&dpr=2 2x"}
                   loading='lazy'
-                  alt=''
+                  alt={orchid.name}
                 />
               </AspectRatio>
             </CardOverflow>
           </Card>
-          <Typography id='modal-modal-description' sx={{ mt: 2 }}>
+          <Typography
+            id='modal-modal-description'
+            sx={{ mt: 2, color: theme.text.primary }}
+          >
             {orchid.detail}
           </Typography>
         </Box>

diff --git a/src/themes/ThemeContext.jsx b/src/themes/ThemeContext.jsx
@@ -30,11 +30,16 @@ const themes = {
       3: "0px 3px 3px -2px rgba(255,255,255,0.2),0px 3px 4px 0px rgba(255,255,255,0.14),0px 1px 8px 0px rgba(255,255,255,0.12)",
     },
     card: {
-      backgroundColor: "#333333",
+      backgroundColor: "#1e1e1e",
+      color: "rgba(255, 255, 255, 0.87)",
     },
     icon: {
       color: "#bb86fc",
     },
+    button: {
+      primary: "#bb86fc",
+      hover: "#c39dff",
+    },
   },
   light: {
     header: {
@@ -67,10 +72,15 @@ const themes = {
     },
     card: {
       backgroundColor: "#ffffff",
+      color: "rgba(0, 0, 0, 0.87)",
     },
     icon: {
       color: "#6200ee",
     },
+    button: {
+      primary: "#6200ee",
+      hover: "#7722ff",
+    },
   },
 };