fix: pass data-icon prop through FontAwesome icon wrappers

Replaced all bare `FC<{ className?: string }>` and `FC<HTMLAttributes<...>>`
wrappers that only forwarded `className` with `faIcon()` from
`src/lib/icon-wrapper.ts`, ensuring props like `data-icon` needed by the
Button component's CSS selector `*:data-icon:size-5` are correctly forwarded.
Also widened `NavItemBaseProps.icon` and `NavItemType.icon` prop types to
`FC<Record<string, any>>` to stay compatible with `faIcon()` return type.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-21 11:19:46 +05:30
parent 2ace6efae5
commit 631acf63dc
11 changed files with 65 additions and 95 deletions

View File

@@ -1,23 +1,16 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMagnifyingGlass, faUser, faCalendar } from '@fortawesome/pro-duotone-svg-icons';
import type { FC, HTMLAttributes } from 'react';
import { faIcon } from '@/lib/icon-wrapper';
import { Input } from '@/components/base/input/input';
import { Badge } from '@/components/base/badges/badges';
import { useData } from '@/providers/data-provider';
import { formatPhone } from '@/lib/format';
import { cx } from '@/utils/cx';
const SearchIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faMagnifyingGlass} className={className} />
);
const UserIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faUser} className={className} />
);
const CalendarIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
<FontAwesomeIcon icon={faCalendar} className={className} />
);
const SearchIcon = faIcon(faMagnifyingGlass);
const UserIcon = faIcon(faUser);
const CalendarIcon = faIcon(faCalendar);
type SearchResultType = 'lead' | 'patient' | 'appointment';
@@ -33,7 +26,7 @@ type GlobalSearchProps = {
onSelectResult?: (result: SearchResult) => void;
};
const TYPE_ICONS: Record<SearchResultType, FC<{ className?: string }>> = {
const TYPE_ICONS: Record<SearchResultType, ReturnType<typeof faIcon>> = {
lead: UserIcon,
patient: UserIcon,
appointment: CalendarIcon,