From 7efbbcfcfe8857dec475abf5ee88ba89b3b65ba7 Mon Sep 17 00:00:00 2001
From: Ashutosh Dash <dashashutosh1999@gmail.com>
Date: Wed, 15 May 2024 17:46:34 +0530
Subject: [PATCH 1/4] feat: custom component for select dropdown from radix-ui

---
 package.json                 |  1 +
 src/components/ui/select.tsx | 72 ++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 src/components/ui/select.tsx

diff --git a/package.json b/package.json
index 7332e55..543aac0 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..14689ac
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,72 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import classnames from "classnames";
+import { Filter } from "lucide-react";
+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;

From c0f2ae14e7d50d84e37cec2f7e36b629111a7c92 Mon Sep 17 00:00:00 2001
From: Ashutosh Dash <dashashutosh1999@gmail.com>
Date: Wed, 15 May 2024 17:47:33 +0530
Subject: [PATCH 2/4] feat: update filter with custom select component in
 explore page

---
 src/_root/pages/Explore.tsx | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/_root/pages/Explore.tsx b/src/_root/pages/Explore.tsx
index 8fbbee9..952370e 100644
--- a/src/_root/pages/Explore.tsx
+++ b/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">

From fec9ef1afa4aaccc9f8da154f903fb44e8cd5cc7 Mon Sep 17 00:00:00 2001
From: Ashutosh Dash <dashashutosh1999@gmail.com>
Date: Wed, 15 May 2024 17:48:02 +0530
Subject: [PATCH 3/4] chore: add .env to git-ignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index a547bf3..1cac559 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env
\ No newline at end of file

From 9353151cdea4b2d3dbcf3899c155a3a7e1f11586 Mon Sep 17 00:00:00 2001
From: Ashutosh Dash <dashashutosh1999@gmail.com>
Date: Wed, 15 May 2024 17:55:37 +0530
Subject: [PATCH 4/4] chore: remove unused imports

---
 src/components/ui/select.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 14689ac..ad5c0f7 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,6 +1,5 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import classnames from "classnames";
-import { Filter } from "lucide-react";
 import React, { FC } from "react";
 
 const Select = SelectPrimitive.Root;