category page

app/category/components/CategoryToolbar.tsx

@@ -1,19 +1,17 @@
-import { Sort } from "iconsax-reactjs";
+import Input from "@/app/components/Input";
+import Select from "@/app/components/Select";
 import { type FC } from "react";
 import { SORT_OPTIONS } from "../constants";
 
 const CategoryToolbar: FC = () => {
   return (
-    <div className="flex items-center justify-start">
-      <div className="relative w-37">
-        <select defaultValue="bestseller" aria-label="مرتب‌سازی" className="h-10 w-full appearance-none rounded-xl border border-[#E9EFF4] bg-white px-3 pr-10 text-right text-sm text-[#5B6A74]">
-          {SORT_OPTIONS.map((option) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-        <Sort aria-hidden className="pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-primary" color="currentColor" size={18} />
+    <div className="flex items-center gap-4">
+      <div className="max-w-50">
+        <Input variant="search" placeholder="جستجو..." className="rounded-xl border-[#E9EFF4]" />
+      </div>
+
+      <div className="max-w-50">
+        <Select options={SORT_OPTIONS} placeholder="مرتب‌سازی" className="min-w-50 rounded-xl border-[#E9EFF4]" />
       </div>
     </div>
   );