change to carousel

src/components/Carousel/Carousel.jsx

@@ -7,17 +7,13 @@ import mainImage2 from "../../assets/images/MAINHEADER-02.webp";
 import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg";
 
 const Carousel = () => {
-  const isMobile = window.innerWidth <= 768; // Adjust breakpoint for mobile
   const items = [
     { img_src: mainImage1, alt_name: "Image 1" },
     { img_src: mainImage2, alt_name: "Image 2" },
   ];
 
-  const items_mobile = [
-    { img_src: mainImageMobile, alt_name: "Image 1" },
-  ];
 
-  const activeItems = isMobile ? items_mobile : items;
+  const activeItems = items;
   const [currentIndex, setCurrentIndex] = React.useState(0);
 
   const handlePrev = () => {
@@ -40,7 +36,6 @@ const Carousel = () => {
         alignItems: "center",
         justifyContent: "center",
         width: "100%",
-        height: "100vh", // Full viewport height
         overflow: "hidden",
       }}
     >
@@ -50,7 +45,7 @@ const Carousel = () => {
           position: "absolute",
           top: 0,
           right: 0,
-          backgroundColor: "rgba(0, 0, 0, 0.2)",
+          backgroundColor: "rgba(0, 0, 0, 0.1)",
           width: "100%",
           height: "100%",
           zIndex: 1,
@@ -65,7 +60,6 @@ const Carousel = () => {
         alt={activeItems[currentIndex].alt_name}
         sx={{
           width: "100%",
-          height: "100%",
           objectFit: "cover",
           transition: "opacity 0.5s ease-in-out",
           zIndex: 0,

src/components/SearchProduct/SearchProduct.jsx

@@ -1,164 +1,209 @@
-import { useState, useEffect } from 'react';
-import Grid from '@mui/material/Grid2';
-import { Box, Button, TextField, InputAdornment, Typography, Card, CardContent, CardMedia } from '@mui/material';
-import { useSelector } from 'react-redux';
+import { useState, useEffect } from "react";
+import Grid from "@mui/material/Grid2";
+import {
+  Box,
+  Button,
+  TextField,
+  InputAdornment,
+  Typography,
+  Card,
+  CardContent,
+  CardMedia,
+} from "@mui/material";
+import { useSelector } from "react-redux";
 
 const SearchProduct = ({ onClose }) => {
+  const products = useSelector((state) => state.products.products.data);
+  const [searchedProducts, setSearchedProducts] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
 
-    const products = useSelector((state) => state.products.products.data)
-    const [searchedProducts, setSearchedProducts] = useState([]);
-    const [searchQuery, setSearchQuery] = useState('');
+  const filterProduct = function () {
+    let filteredProducts = products.filter((product) => {
+      let title = product?.title?.toLowerCase();
+      let search = searchQuery.toLowerCase();
+      return title?.includes(search);
+    });
 
-    const filterProduct = function () {
+    // MAX show result
+    filteredProducts = filteredProducts?.slice(0, 5);
+    setSearchedProducts(filteredProducts);
+  };
 
-        let filteredProducts = products.filter((product) => {
+  return (
+    <Box
+      className="animate__animated animate__fadeIn"
+      sx={{
+        position: "fixed",
+        width: "100%",
+        height: "100%",
+        backgroundColor: "rgba(255,255,255,0.8)",
+        top: 0,
+        left: 0,
+        py: 2,
+        zIndex: 999,
+        backdropFilter: "blur(10px)",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      {/* Search Box */}
+      <Box
+        sx={{
+          backgroundColor: "rgba(0,0,0,0)",
+          borderRadius: 2,
+          padding: 2,
+          width: "90%",
+          marginBottom: 4,
+        }}
+      >
+        <Grid container spacing={2}>
+          <Grid size={12}>
+            <TextField
+              fullWidth
+              placeholder="Search for a product..."
+              variant="outlined"
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                if (!searchQuery || searchQuery.trim() === "") {
+                  setSearchedProducts([]);
+                } else {
+                  filterProduct();
+                }
+              }}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      sx={{ height: "100%" }}
+                      onClick={onClose}
+                    >
+                      Cancel
+                    </Button>
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </Grid>
+        </Grid>
+      </Box>
 
-            let title = product?.title?.toLowerCase();
-            let search = searchQuery.toLowerCase();
-            return title?.includes(search)
-        })
+      {/* Product List */}
+      <Grid container sx={{ width: "100%" }} columns={12}>
+        {searchedProducts.length > 0 ? (
+          searchedProducts.map((product) => {
 
-        // MAX show result 
-        filteredProducts = filteredProducts?.slice(0, 6);
-
-        setSearchedProducts(filteredProducts)
-
-    }
-
-    return (
-        <Box
-            className="animate__animated animate__fadeIn"
-            sx={{
-                position: 'fixed',
-                width: '100%',
-                height: '100%',
-                backgroundColor: 'rgba(255,255,255,0.8)',
-                top: 0,
-                left: 0,
-                py: 2,
-                zIndex: 999,
-                backdropFilter: 'blur(10px)',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-            }}
-        >
-            {/* Search Box */}
-            <Box
-                sx={{
-                    backgroundColor: 'rgba(0,0,0,0)',
-                    borderRadius: 2,
-                    padding: 2,
-                    width: '90%',
-                    marginBottom: 4,
-                }}
-            >
-                <Grid container spacing={2}>
-                    <Grid size={12}>
-                        <TextField
-                            fullWidth
-                            placeholder="Search for a product..."
-                            variant="outlined"
-                            value={searchQuery}
-                            onChange={(e) => {
-                                setSearchQuery(e.target.value)
-                                if ((!searchQuery || searchQuery.trim() === "")) {
-                                    setSearchedProducts([])
-                                } else {
-                                    filterProduct()
-                                }
-                            }}
-                            InputProps={{
-                                endAdornment: (
-                                    <InputAdornment position="end">
-                                        <Button
-                                            variant="contained"
-                                            color="primary"
-                                            sx={{ height: '100%' }}
-                                            onClick={onClose}
-                                        >
-                                            Cancel
-                                        </Button>
-                                    </InputAdornment>
-                                ),
-                            }}
-                        />
-                    </Grid>
-                </Grid>
-            </Box>
+            return (
+              <Grid
+                className="animate__animated animate__fadeIn"
+                item
+                size={12}
+              >
+                <Card
+                  key={product.id}
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    py: 2,
+                    px: 2,
+                    width: "100%",
+                    cursor: "pointer",
+                    backgroundColor: "rgba(255,255,255,0.2)",
+                    boxShadow: "none",
+                    borderBottom: "1px solid rgba(0,0,0,0.2)",
+                    transition: "all 0.3s ease-in-out",
+                    ":hover": {
+                      backgroundColor: "#95AAC5",
+                    },
+                  }}
+                  onClick={() => {
+                    window.location.href = `/products/${product?.handle}`;
+                  }}
+                >
+                  <CardMedia
+                    component="img"
+                    sx={{
+                      width: 100,
+                      height: 100,
+                      borderRadius: 1,
+                      marginRight: 2,
+                    }}
+                    image={product?.images[0]?.url}
+                    alt={product?.title}
+                  />
+                  <CardContent>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        fontWeight: "100",
+                        fontSize: {
+                          xs: "0.875rem",
+                          sm: "0.875rem",
+                          md: "1.1rem",
+                        },
+                      }}
+                    >
+                      {`${product?.collections[0]?.title}`}
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        fontWeight: "400",
+                        fontSize: {
+                          xs: "0.875rem",
+                          sm: "0.875rem",
+                          md: "1.1rem",
+                        },
+                      }}
+                    >
+                      {product?.title}
+                    </Typography>
+                    
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        fontWeight: "400",
+                        fontSize: {
+                          xs: "0.875rem",
+                          sm: "0.875rem",
+                          md: "1.1rem",
+                        },
+                      }}
+                    >
+                      {"Tags: "} {product?.tags?.map((tag) => <span>{`${tag} | `}</span> )}
+                    </Typography>
 
-            {/* Product List */}
-            <Grid
-                container
-                columns={12}
-            >
-                {searchedProducts.length > 0 ? (
-                    searchedProducts.map((product) => (
-                        <Grid className="animate__animated animate__fadeIn" item size={12}>
-                            <Card
-                                key={product.id}
-                                sx={{
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    py: 2,
-                                    px: 12.5,
-                                    cursor: "pointer",
-                                    backgroundColor: "rgba(255,255,255,0.2)",
-                                    boxShadow: "none",
-                                    borderBottom: "1px solid rgba(0,0,0,0.2)",
-                                    transition: "all 0.3s ease-in-out",
-                                    ":hover": {
-                                        backgroundColor: "#95AAC5"
-                                    }
-                                }}
-                                onClick={() => {
-                                    window.location.href = `/products/${product?.handle}`
-                                }}
-                            >
-                                <CardMedia
-                                    component="img"
-                                    sx={{ width: 100, height: 100, borderRadius: 1, marginRight: 2 }}
-                                    image={product?.images[0]?.url}
-                                    alt={product?.title}
-                                />
-                                <CardContent>
-                                    <Typography variant="body2" sx={{
-                                        fontWeight: "100", fontSize: {
-                                            xs: "0.875rem",
-                                            sm: "0.875rem",
-                                            md: "1.1rem",
-                                        }
-                                    }}>
-                                        {`${product?.collections[0]?.title}`}
-                                    </Typography>
-                                    <Typography variant="body2" sx={{
-                                        fontWeight: "400", fontSize: {
-                                            xs: "0.875rem",
-                                            sm: "0.875rem",
-                                            md: "1.1rem",
-                                        },
-                                    }}>{product?.title}</Typography>
-                                    <Typography variant="body2" sx={{
-                                        fontWeight: "100", fontSize: {
-                                            xs: "0.875rem",
-                                            sm: "0.875rem",
-                                            md: "1.1rem",
-                                        }
-                                    }}>
-                                        {`${product?.minVariantPrice?.currencyCode} ${parseFloat(product?.minVariantPrice?.amount).toFixed(2)}`}
-                                    </Typography>
-                                </CardContent>
-                            </Card>
-                        </Grid>
-                    ))
-                ) : (
-                    <Typography variant="body1" color="text.secondary">
-                        No products found. Please search
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        fontWeight: "100",
+                        fontSize: {
+                          xs: "0.875rem",
+                          sm: "0.875rem",
+                          md: "1.1rem",
+                        },
+                      }}
+                    >
+                      {`${product?.minVariantPrice?.currencyCode} ${parseFloat(
+                        product?.minVariantPrice?.amount
+                      ).toFixed(2)}`}
                     </Typography>
-                )}
-            </Grid>
-        </Box>
-    );
+                  </CardContent>
+                </Card>
+              </Grid>
+            );
+          })
+        ) : (
+          <Typography variant="body1" color="text.secondary" sx={{px:2}}>
+            No products found. Please search
+          </Typography>
+        )}
+      </Grid>
+    </Box>
+  );
 };
 
 export default SearchProduct;