chore: 🤖 click on picture to show modal

Hoang-Nguyen-Huy · Sep 28, 2024 · a571b82 · a571b82
1 parent 6e8934b
commit a571b82
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 30 deletions.
diff --git a/src/components/MainContent/Content.jsx b/src/components/MainContent/Content.jsx
@@ -12,7 +12,7 @@ export default function Content() {
     <Grid
       container
       spacing={{ xs: 2, md: 3, lg: 4 }}
-      columns={{ xs: 1, sm: 2, md: 3, lg: 4 }}
+      // columns={{ xs: 1, sm: 2, md: 3, lg: 4 }}
       sx={{
         flexGrow: 1,
         justifyContent: "center",
@@ -24,7 +24,7 @@ export default function Content() {
     >
       {Orchids.map((orchid) => {
         return (
-          <Grid key={orchid.Id} size={{ xs: 2, sm: 4, md: 4 }}>
+          <Grid key={orchid.Id} size={{ xs: 1, sm: 3, md: 4 }}>
             <OrchidCard key={orchid.Id} orchid={orchid} />
           </Grid>
         );

diff --git a/src/components/MainContent/OrchidCard.jsx b/src/components/MainContent/OrchidCard.jsx
@@ -4,11 +4,13 @@ import Card from "@mui/joy/Card";
 import CardContent from "@mui/joy/CardContent";
 import CardOverflow from "@mui/joy/CardOverflow";
 import Divider from "@mui/joy/Divider";
-import { Rating } from "@mui/material";
+import { Button, Rating } from "@mui/material";
 import useModal from "../../hooks/useModal";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Modal from "@mui/material/Modal";
+import LocationOnIcon from "@mui/icons-material/LocationOn";
+import CategoryIcon from "@mui/icons-material/Category";
 
 const style = {
   position: "absolute",
@@ -24,7 +26,7 @@ const style = {
 };
 
 export default function OrchidCard({ orchid }) {
-  const { isVisible, detail, showModal, hideModal } = useModal({ orchid });
+  const { isVisible, showModal, hideModal } = useModal({ orchid });
 
   return (
     <>
@@ -38,10 +40,13 @@ export default function OrchidCard({ orchid }) {
             boxShadow: "0 0 10px rgba(255, 255, 255, 0.8)",
           },
         }}
-        onClick={() => showModal(orchid)}
       >
         <CardOverflow>
-          <AspectRatio ratio='2'>
+          <AspectRatio
+            variant='outlined'
+            ratio='2'
+            onClick={() => showModal(orchid)}
+          >
             <img
               src={orchid.image + "?auto=format&fit=crop&w=318"}
               srcSet={orchid.image + "?auto=format&fit=crop&w=318&dpr=2 2x"}
@@ -57,38 +62,44 @@ export default function OrchidCard({ orchid }) {
           >
             {orchid.name}
           </Typography>
-          <Typography level='body-sm' sx={{ color: "grey.400", mb: 2 }}>
-            {orchid.origin}
-          </Typography>
+          <Box>
+            <Typography
+              level='body-sm'
+              sx={{
+                color: "grey.400",
+                mb: 2,
+                alignItems: "center",
+                display: "flex",
+              }}
+            >
+              <LocationOnIcon sx={{ marginRight: "4px", width: "16px" }} />
+              {orchid.origin}
+            </Typography>
+            <Typography
+              level='body-sm'
+              sx={{
+                color: "grey.400",
+                mb: 2,
+                alignItems: "center",
+                display: "flex",
+              }}
+            >
+              <CategoryIcon sx={{ marginRight: "4px", width: "16px" }} />
+              {orchid.category}
+            </Typography>
+          </Box>
         </CardContent>
         <CardOverflow
           variant='soft'
           sx={{ bgcolor: "rgba(255, 255, 255, 0.1)" }}
         >
           <Divider inset='context' sx={{ bgcolor: "white" }} />
-          <CardContent orientation='horizontal'>
-            {/* <Typography
-            level="body-xs"
-            textColor="text.secondary"
-            sx={{
-              fontWeight: "md",
-              color: "white",
-            }}
+          <CardContent
+            orientation='horizontal'
+            sx={{ justifyContent: "space-between" }}
           >
-            {orchid.rating} rating
-          </Typography> */}
             <Rating name='read-only' value={orchid.rating} readOnly />
-            <Divider orientation='vertical' sx={{ color: "white" }} />
-            <Typography
-              level='body-xs'
-              textColor='text.secondary'
-              sx={{
-                fontWeight: "md",
-                color: "white",
-              }}
-            >
-              {orchid.category}
-            </Typography>
+            <Button variant='outlined'>Detail</Button>
           </CardContent>
         </CardOverflow>
       </Card>