mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 16:45:24 +02:00
style: relocate search bar to top toolbar for better visibility
This commit is contained in:
Christian Vidal Wolf
+53
-49
@@ -813,9 +813,59 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
|
||||
<div className="bg-surface border border-border rounded-xl shadow-lg flex flex-col">
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="p-4 border-b border-border bg-slate-900/50 flex flex-col lg:flex-row gap-4 justify-between items-start lg:items-center rounded-t-xl">
|
||||
<div className="p-4 border-b border-border bg-slate-900/50 flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center rounded-t-xl">
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 w-full xl:w-auto">
|
||||
{/* Search Bar */}
|
||||
<div className="flex items-center gap-2 mr-2">
|
||||
<div className="relative w-full sm:w-64 lg:w-80">
|
||||
{showBulkSearch ? (
|
||||
<textarea
|
||||
placeholder="Bulk Search (ASINs/SKUs)..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all min-h-[40px] max-h-[120px] font-mono leading-tight"
|
||||
rows={1}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search SKU, ASIN..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
|
||||
/>
|
||||
<svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
{searchTerm && (
|
||||
<button
|
||||
onClick={() => setSearchTerm('')}
|
||||
className={`absolute right-3 ${showBulkSearch ? 'top-2' : 'top-2.5'} text-slate-500 hover:text-white`}
|
||||
>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowBulkSearch(!showBulkSearch)}
|
||||
className={`p-2 rounded-lg border transition-all flex items-center justify-center ${showBulkSearch
|
||||
? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)]'
|
||||
: 'bg-slate-800/50 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
|
||||
}`}
|
||||
title={showBulkSearch ? "Switch to Single Search" : "Enable Bulk Search"}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-white/10 hidden xl:block mx-1" />
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 w-full lg:w-auto">
|
||||
{/* Dimensions Selector */}
|
||||
<div className="relative z-30" ref={dimensionRef}>
|
||||
<button
|
||||
@@ -1350,55 +1400,9 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination and Search */}
|
||||
{/* Pagination and Info */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-slate-900/50 p-4 rounded-xl border border-white/5 shadow-lg">
|
||||
<div className="flex flex-wrap items-center gap-4 w-full md:w-auto">
|
||||
{/* Search Bar */}
|
||||
<div className="flex flex-col gap-2 w-full md:w-auto">
|
||||
<div className="relative w-full md:w-80">
|
||||
{showBulkSearch ? (
|
||||
<textarea
|
||||
placeholder="Paste ASINs or SKUs (separated by commas or newlines)..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all min-h-[100px] font-mono"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search SKU, Title, or ASIN..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
|
||||
/>
|
||||
<svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
{searchTerm && (
|
||||
<button
|
||||
onClick={() => setSearchTerm('')}
|
||||
className={`absolute right-3 ${showBulkSearch ? 'top-2' : 'top-2.5'} text-slate-500 hover:text-white`}
|
||||
>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowBulkSearch(!showBulkSearch)}
|
||||
className={`text-[10px] uppercase tracking-wider font-bold px-3 py-1 rounded-lg border transition-all self-start ${showBulkSearch
|
||||
? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)]'
|
||||
: 'bg-slate-800/50 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
|
||||
}`}
|
||||
>
|
||||
{showBulkSearch ? '← Back to Single Search' : 'Bulk Search Mode'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="h-8 w-px bg-white/10 hidden md:block" />
|
||||
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl text-sm font-black uppercase tracking-widest transition-all shadow-lg active:scale-95 border border-emerald-500/50"
|
||||
|
||||
Reference in New Issue
Block a user