category page

app/category/components/CategoryFilters.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Input from "@/app/components/Input";
 import { cn } from "@/app/lib/cn";
 import { AddSquare, MinusSquare } from "iconsax-reactjs";
 import { useState, type FC } from "react";
@@ -19,9 +18,7 @@ const CategoryFilters: FC = () => {
   };
 
   return (
-    <div className="w-full shrink-0 space-y-3 lg:w-70 xl:w-75">
-      <Input variant="search" placeholder="جستجو..." className="rounded-xl border-[#E9EFF4]" />
-
+    <div className="w-full shrink-0 lg:w-70 xl:w-75">
       <aside className="rounded-2xl bg-white p-4 shadow-[0_0_6px_rgba(50,103,137,0.18)] sm:rounded-3xl sm:p-5">
         <h2 className="mb-4 text-center text-lg font-bold text-[#0A1B2C]">فیلترها</h2>
 

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>
   );

app/category/page.tsx

@@ -9,12 +9,14 @@ const CategoryDetailPage = () => {
     <div>
       <CategoryHero />
 
-      <div className="px-4 mt-10 sm:px-8 lg:px-30 pt-8 sm:pt-10 pb-8 sm:pb-10">
+      <div className="space-y-4 px-4 mt-10 sm:space-y-5 sm:px-8 lg:px-30 pt-8 sm:pt-10 pb-8 sm:pb-10">
+        <div className="lg:grid lg:gap-x-6">
+          <CategoryToolbar />
+        </div>
+
         <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-6">
           <CategoryFilters />
-
-          <div className="min-w-0 w-full flex-1 space-y-4 sm:space-y-5">
-            <CategoryToolbar />
+          <div className="min-w-0 flex-1">
             <CategoryProducts />
           </div>
         </div>

app/components/Select.tsx

@@ -8,7 +8,7 @@ export type SelectOption = {
 };
 
 type Props = {
-  options?: SelectOption[];
+  options?: readonly SelectOption[];
   className?: string;
   placeholder?: string;
 } & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "placeholder">;