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">
|
<div className="bg-surface border border-border rounded-xl shadow-lg flex flex-col">
|
||||||
|
|
||||||
{/* Toolbar */}
|
{/* 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 */}
|
{/* Dimensions Selector */}
|
||||||
<div className="relative z-30" ref={dimensionRef}>
|
<div className="relative z-30" ref={dimensionRef}>
|
||||||
<button
|
<button
|
||||||
@@ -1350,55 +1400,9 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</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-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">
|
<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
|
<button
|
||||||
onClick={handleExport}
|
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"
|
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