sort

src/components/ProductList/ProductList.jsx

 
   //filter
   const [category, setCategory] = useState('all');
-  const [sort, setSort] = useState('all')
+  const [sort, setSort] = useState('title')
 
   useEffect(() => {
 
         }
       );
 
+      if (sort === "title") {
+        newFilteredProducts = newFilteredProducts.sort((a, b) => a.title.localeCompare(b.title));
+      } else if (sort === "new") {
+        newFilteredProducts = newFilteredProducts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+      } else if (sort === "old") {
+        newFilteredProducts = newFilteredProducts.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
+      }
+
       setFilteredProducts(newFilteredProducts)
 
     }
 
-  }, [category])
-
-
+  }, [category, sort])
 
   useEffect(() => {
     if (products) console.log(products)
         sx={{
           display: "flex",
           justifyContent: "space-between",
+          py:1,
+          flexDirection:{
+            xs:"column",
+            sm:"row",
+            md:"row",
+            lg:"row"
+          },
           alignItems: "center",
           backgroundColor: "background.black",
           color: "white",
         }}
       >
         {/* Left Side: Page Title */}
-        <Typography variant="body2">
+        <Typography variant="body2" sx={{fontSize:10}}>
           {`${filteredProducts.length} Item`}
         </Typography>
 
         {/* Right Side: Option Inputs */}
-        <Box sx={{ display: "flex", gap: 2 }}>
+        <Box sx={{ display: "flex", gap: 2, flexDirection:{
+            xs:"column",
+            sm:"row",
+            md:"row",
+            lg:"row"
+          }, }}>
 
           <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
-            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Filter By Category</Typography>
+            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Category</Typography>
             <Select
               value={category}
               onChange={(event) => {
             </Select>
           </FormControl>
 
-          <FormControl sx={{ m: 1, display: { xs: "none", sm: "none", md: "flex" }, flexDirection: "row" }} variant="standard">
-            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Sort By</Typography>
+          <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
+            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Sort</Typography>
             <Select
               value={sort}
-              onChange={handleChange}
+              onChange={(event) => {
+                setSort(event.target.value);
+              }}
               input={<BootstrapInput />}
               name="sort"
             >
-              <MenuItem defaultValue value={''}>All</MenuItem>
-              <MenuItem defaultValue value={'all'}>Newest</MenuItem>
-
+              <MenuItem defaultValue value={'title'}>Title</MenuItem>
+              <MenuItem defaultValue value={'new'}>Newest</MenuItem>
+              <MenuItem defaultValue value={'old'}>Oldest</MenuItem>
             </Select>
           </FormControl>
 

src/pages/Collection.jsx

         }
       }}>
       </Box>
+      <SocialMedia />
+      <Feature />
     </>
   )
 }

src/services/ProductService.js

         nodes {
           id
           title
+          createdAt
           productType
           tags
           compareAtPriceRange {