Merge pull request #76 from AshutoshDash1999/FEAT/explore-page-filter

FEAT/explore-page-filter

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@tanstack/react-query": "^5.32.1",

src/_root/pages/Explore.tsx

@@ -1,11 +1,13 @@
 import GridPostList from "@/components/shared/GridPostList";
 import Loader from "@/components/shared/Loader";
 import { Input } from "@/components/ui/input";
+import DropdownSelect from "@/components/ui/select";
 import useDebounce from "@/hooks/useDebounce";
 import {
   useGetPosts,
   useSearchPosts,
 } from "@/lib/react-query/queriesAndMutations";
+import { Filter } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useInView } from "react-intersection-observer";
 
@@ -56,6 +58,25 @@ const Explore = () => {
     !shouldShowSearchResults &&
     posts.pages.every((item) => item.documents.length === 0);
 
+  const filterOptionData = [
+    {
+      label: "Most Liked",
+      value: "most-liked",
+    },
+    {
+      label: "Most Recent",
+      value: "most-recent",
+    },
+    {
+      label: "A-Z",
+      value: "a-z",
+    },
+    {
+      label: "Z-A",
+      value: "z-a",
+    },
+  ];
+
   return (
     <div className="explore-container">
       <div className="explore-inner_container">
@@ -83,15 +104,11 @@ const Explore = () => {
       <div className="w-full max-w-5xl mt-16 flex-between mb-7">
         <h3 className="body-bold md:h3-bold">Popular Today</h3>
 
-        <div className="gap-3 px-4 py-2 cursor-pointer flex-center bg-dark-3 rounded-xl">
-          <p className="small-medium md:base-medium text-light-2">All</p>
-          <img
-            src="/assets/icons/filter.svg"
-            width={20}
-            height={20}
-            alt="filter"
-          />
-        </div>
+        <DropdownSelect
+          placeholder="All"
+          selectIcon={<Filter className="h-5" />}
+          optionsData={filterOptionData}
+        />
       </div>
 
       <div className="flex flex-wrap w-full max-w-5xl gap-9">

src/components/ui/select.tsx

@@ -0,0 +1,71 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import classnames from "classnames";
+import React, { FC } from "react";
+
+const Select = SelectPrimitive.Root;
+const SelectTrigger = SelectPrimitive.Trigger;
+const SelectPortal = SelectPrimitive.Portal;
+const SelectValue = SelectPrimitive.Value;
+const SelectIcon = SelectPrimitive.Icon;
+const SelectContent = SelectPrimitive.Content;
+const SelectItemText = SelectPrimitive.ItemText;
+const SelectGroup = SelectPrimitive.Group;
+const SelectViewport = SelectPrimitive.Viewport;
+
+interface DropdownSelectProps {
+  placeholder?: React.ReactNode;
+  selectIcon?: React.ReactNode;
+  optionsData: {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+  }[];
+}
+
+const SelectItem = React.forwardRef<
+  HTMLDivElement,
+  SelectPrimitive.SelectItemProps
+>(({ children, className, ...props }) => {
+  return (
+    <SelectPrimitive.Item
+      className={classnames(
+        "flex flex-row gap-1 items-center relative select-none px-4 py-2  data-[disabled]:text-neutral-600 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-hover-primary-500",
+        className
+      )}
+      {...props}
+    >
+      <SelectItemText>{children}</SelectItemText>
+    </SelectPrimitive.Item>
+  );
+});
+
+const DropdownSelect: FC<DropdownSelectProps> = ({
+  placeholder,
+  selectIcon,
+  optionsData,
+}) => (
+  <Select>
+    <SelectTrigger className="inline-flex items-center justify-center rounded-lg  bg-dark-3 text-light-2 focus:shadow-black outline-none gap-3 px-4 py-2">
+      <SelectValue placeholder={placeholder} />
+      <SelectIcon className="text-neutral-600">{selectIcon}</SelectIcon>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent className="overflow-hidden bg-dark-3 text-light-2 rounded-lg">
+        <SelectViewport className="">
+          <SelectGroup>
+            {optionsData?.map((item) => {
+              return (
+                <SelectItem value={item?.value}>
+                  {item?.label} {item?.icon}
+                </SelectItem>
+              );
+            })}
+          </SelectGroup>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </Select>
+);
+
+export default DropdownSelect;