Refactor search details into Explore Page (#13665)

web/src/components/icons/SearchSourceIcon.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+import { FaImage } from "react-icons/fa";
+import { LuText } from "react-icons/lu";
+
+type SearchSourceIconProps = {
+  className?: string;
+  onClick?: () => void;
+};
+
+const SearchSourceIcon = forwardRef<HTMLDivElement, SearchSourceIconProps>(
+  ({ className, onClick }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("relative flex items-center", className)}
+        onClick={onClick}
+      >
+        <LuText className="absolute size-3 translate-x-3 translate-y-3/4" />
+        <FaImage className="size-5" />
+      </div>
+    );
+  },
+);
+
+export default SearchSourceIcon;

web/src/components/icons/SubFilterIcon.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
 import { cn } from "@/lib/utils";
-import { FaCog, FaFilter } from "react-icons/fa";
+import { FaCog } from "react-icons/fa";
+import { MdLabelOutline } from "react-icons/md";
 
 type SubFilterIconProps = {
   className?: string;
@@ -15,8 +16,8 @@ const SubFilterIcon = forwardRef<HTMLDivElement, SubFilterIconProps>(
         className={cn("relative flex items-center", className)}
         onClick={onClick}
       >
-        <FaFilter className="size-full" />
-        <FaCog className="absolute size-3 translate-x-3 translate-y-3/4" />
+        <FaCog className="absolute size-3 translate-x-3 translate-y-[62%]" />
+        <MdLabelOutline className="size-5" />
       </div>
     );
   },