christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 12:15:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add custom icons to stock and coverage filters for better visibility

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-29 08:51:36 +01:00
parent d19f0cddac
commit 12ca24b9f6
5 changed files with 72 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/InColumnStockFilter.tsx
+14 -6
View File
@@ -5,6 +5,7 @@ interface InColumnStockFilterProps {
onFilterChange: (newFilters: string[]) => void;
title?: string;
options?: string[];
icon?: React.ReactNode;
}
const DEFAULT_STOCK_OPTIONS = [
@@ -17,7 +18,8 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
currentFilters,
onFilterChange,
title = "Stock Filter",
options = DEFAULT_STOCK_OPTIONS
options = DEFAULT_STOCK_OPTIONS,
icon
}) => {
const [isOpen, setIsOpen] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
@@ -55,12 +57,18 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
e.stopPropagation();
setIsOpen(!isOpen);
}}
className={`p-1 rounded hover:bg-white/10 transition-colors ${currentFilters.length > 0 ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`}
title="Filter by Stock"
className={`flex flex-col items-center gap-0.5 p-1 rounded hover:bg-white/10 transition-all ${currentFilters.length > 0 ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`}
title={`Filter by ${title}`}
>
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
{icon ? (
<div className="transition-transform group-hover:scale-110">
{icon}
</div>
) : (
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
)}
</button>
{isOpen && (