search filter component

2025-05-27 14:02:50 +03:00
parent 7915221fc4
commit c897d25a7d
5 changed files with 126 additions and 131 deletions
--- a/frontend/app/(urls)/search/components/SearchFilters.tsx
+++ b/frontend/app/(urls)/search/components/SearchFilters.tsx
@@ -0,0 +1,110 @@
+'use client'
+
+import React, { useState } from 'react'
+import MultiSelect from '@/components/ui/Selector'
+
+const transportOptions = [
+  { id: 1, value: 'road', label: 'Авто' },
+  { id: 2, value: 'avia', label: 'Авиа' },
+  { id: 3, value: 'both', label: 'Любой' },
+]
+
+const packageTypeOptions = [
+  { id: 1, value: 'letter', label: 'Письмо или Документы' },
+  { id: 2, value: 'package', label: 'Посылка (до 30кг)' },
+  { id: 3, value: 'passenger', label: 'Попутчик' },
+  { id: 4, value: 'parcel', label: 'Бандероль (до 5кг)' },
+  { id: 5, value: 'cargo', label: 'Груз (свыше 30 кг)' },
+]
+
+interface SearchFiltersProps {
+  onFiltersChange?: (filters: { transport: number[]; packageTypes: number[] }) => void
+}
+
+const SearchFilters: React.FC<SearchFiltersProps> = ({ onFiltersChange }) => {
+  const [selectedTransport, setSelectedTransport] = useState<number[]>([])
+  const [selectedPackageTypes, setSelectedPackageTypes] = useState<number[]>([])
+
+  const handleTransportChange = (e: { target: { value: number[] } }) => {
+    setSelectedTransport(e.target.value)
+    onFiltersChange?.({
+      transport: e.target.value,
+      packageTypes: selectedPackageTypes,
+    })
+  }
+
+  const handlePackageTypesChange = (e: { target: { value: number[] } }) => {
+    setSelectedPackageTypes(e.target.value)
+    onFiltersChange?.({
+      transport: selectedTransport,
+      packageTypes: e.target.value,
+    })
+  }
+
+  const handleReset = () => {
+    setSelectedTransport([])
+    setSelectedPackageTypes([])
+    onFiltersChange?.({
+      transport: [],
+      packageTypes: [],
+    })
+  }
+
+  const hasActiveFilters = selectedTransport.length > 0 || selectedPackageTypes.length > 0
+
+  return (
+    <div className="w-full rounded-2xl bg-white p-6 shadow-sm">
+      <div className="mb-6 flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-gray-900">Ищете что-то конкретное?</h2>
+        {hasActiveFilters && (
+          <button
+            onClick={handleReset}
+            className="hover:text-orange/80 flex items-center text-sm font-medium text-blue-600"
+          >
+            <svg
+              className="mr-2 h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+            Сбросить фильтры
+          </button>
+        )}
+      </div>
+      <div className="grid gap-6 md:grid-cols-2">
+        <div className="space-y-2">
+          <MultiSelect
+            value={selectedTransport}
+            handleChange={handleTransportChange}
+            label="Способ перевозки"
+            placeholder="Выберите способ перевозки"
+            name="transport"
+            options={transportOptions}
+            className="w-full"
+          />
+        </div>
+        <div className="space-y-2">
+          <MultiSelect
+            value={selectedPackageTypes}
+            handleChange={handlePackageTypesChange}
+            label="Тип посылки"
+            placeholder="Выберите тип посылки"
+            name="packageType"
+            options={packageTypeOptions}
+            className="w-full"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SearchFilters