feat: add clear X button to all search inputs

This commit is contained in:
Christian Vidal Wolf
2026-04-10 12:39:31 +02:00
parent dbcd6d622f
commit be584600fc
8 changed files with 84 additions and 19 deletions
+11 -3
View File
@@ -1,6 +1,6 @@
import React, { useState, useMemo } from 'react';
import { ExcelRow, COLUMNS } from '../types';
import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, RefreshCw, Layers, Link2, Search, Filter, X as XIcon, Undo2 } from 'lucide-react';
import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, RefreshCw, Layers, Link2, Search, Filter, X, Undo2 } from 'lucide-react';
import { cn } from '../lib/utils';
import { ConfirmModal } from './ConfirmModal';
import { ColumnFilterPopover } from './ColumnFilterPopover';
@@ -307,8 +307,16 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
placeholder="Search SKU or Name in groups..."
value={search}
onChange={e => setSearch(e.target.value)}
className="w-full pl-9 pr-4 py-2 bg-slate-900 border border-slate-700 rounded-md text-sm text-white focus:outline-none focus:border-blue-500"
className="w-full pl-9 pr-10 py-2 bg-slate-900 border border-slate-700 rounded-md text-sm text-white focus:outline-none focus:border-blue-500"
/>
{search && (
<button
onClick={() => setSearch('')}
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
>
<X className="w-4 h-4" />
</button>
)}
</div>
<div className="flex items-center gap-2">
@@ -368,7 +376,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
className="p-2 text-red-400 hover:text-red-300 transition-colors"
title="Clear all filters"
>
<XIcon className="w-5 h-5" />
<X className="w-5 h-5" />
</button>
)}
</div>