row click & filters + ...

src/components/Button.tsx

@@ -15,7 +15,7 @@ interface ButtonProps {
 const Button: FC<ButtonProps> = (props) => {
 
     const buttonClass = clx(
-        'w-full bg-primary text-white rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
+        'w-full bg-primary text-white cursor-pointer rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
         props.variant === 'secondary' && 'bg-[#ECEEF5] text-black',
         props.className
     )

src/components/Filters.tsx

@@ -1,4 +1,5 @@
 import { FC, useEffect, useState, ChangeEvent } from 'react';
+import { Filter, CloseCircle } from 'iconsax-react';
 import DatePicker from './DatePicker';
 import Input from './Input';
 import Select, { ItemsSelectType } from './Select';
@@ -49,6 +50,7 @@ const Filters: FC<FiltersProps> = ({
     searchField = "search" // پیش‌فرض فیلد سرچ با نام search
 }) => {
     const [filters, setFilters] = useState<FilterValues>({});
+    const [isFiltersOpen, setIsFiltersOpen] = useState(false);
 
     // تنظیم مقادیر اولیه
     useEffect(() => {
@@ -125,12 +127,61 @@ const Filters: FC<FiltersProps> = ({
 
     return (
         <div className={className}>
-            <div className={fieldClassName}>
-                {otherFields.map(renderField)}
+            {/* آیکون فیلتر برای موبایل */}
+            <div className="flex md:hidden items-center justify-between w-full mb-2">
+                <button
+                    onClick={() => setIsFiltersOpen(!isFiltersOpen)}
+                    className="flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                    <Filter size={18} color="#000" />
+                    <span className="text-sm">فیلترها</span>
+                </button>
+                {searchFieldObj && (
+                    <div className="flex-1 mr-4">
+                        {renderField(searchFieldObj)}
+                    </div>
+                )}
             </div>
-            {searchFieldObj && (
-                <div className="w-full md:w-auto">
-                    {renderField(searchFieldObj)}
+
+            {/* فیلترها برای دسکتاپ (همیشه نمایش داده می‌شوند) */}
+            <div className="hidden md:flex md:flex-row justify-between items-center gap-4 w-full">
+                <div className={fieldClassName}>
+                    {otherFields.map(renderField)}
+                </div>
+                {searchFieldObj && (
+                    <div className="w-full md:w-auto">
+                        {renderField(searchFieldObj)}
+                    </div>
+                )}
+            </div>
+
+            {/* فیلترها برای موبایل (قابل باز و بسته شدن) */}
+            {isFiltersOpen && (
+                <div className="md:hidden w-full animate-fadeInDown">
+                    <div className="bg-gradient-to-br from-white to-gray-50 border border-gray-200 rounded-xl p-5 space-y-4">
+                        <div className="flex items-center justify-between pb-3 border-b border-gray-100">
+                            <div className="flex items-center gap-2">
+                                <Filter size={16} color="#6B7280" />
+                                <span className="text-sm font-medium text-gray-700">فیلتر کردن نتایج</span>
+                            </div>
+                            <button
+                                onClick={() => setIsFiltersOpen(false)}
+                                className="p-1 hover:bg-gray-100 rounded-full transition-colors"
+                            >
+                                <CloseCircle size={18} color="#6B7280" />
+                            </button>
+                        </div>
+                        {otherFields.map(field => (
+                            <div key={field.name} className="w-full">
+                                <label className="block text-xs font-medium text-gray-600 mb-2">
+                                    {field.placeholder}
+                                </label>
+                                <div className="transform hover:scale-[1.02] transition-transform duration-200">
+                                    {renderField(field)}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
                 </div>
             )}
         </div>