diff --git a/packages/frontend/src/components/fabric/FabricIcon.tsx b/packages/frontend/src/components/fabric/FabricIcon.tsx index 59dc973..7a27e65 100644 --- a/packages/frontend/src/components/fabric/FabricIcon.tsx +++ b/packages/frontend/src/components/fabric/FabricIcon.tsx @@ -1,4 +1,3 @@ -import { useMemo } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faAmazon } from "@fortawesome/free-brands-svg-icons/faAmazon"; import { faApple } from "@fortawesome/free-brands-svg-icons/faApple"; @@ -6,27 +5,34 @@ import { faGoogle } from "@fortawesome/free-brands-svg-icons/faGoogle"; import { Tooltip } from "@mui/material"; import QuestionMark from "@mui/icons-material/QuestionMark"; import { BridgeFabric } from "@home-assistant-matter-hub/common"; +import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; export interface FabricIconProps { fabric: BridgeFabric; } +const iconsPerKeyword: Record = { + Alexa: faAmazon, + Apple: faApple, + Google: faGoogle, +}; + +const vendorIdFallback: Record = { + 24582: faGoogle, +}; + export const FabricIcon = ({ fabric }: FabricIconProps) => { - const icon = useMemo(() => { - if (fabric.label.includes("Alexa")) { - return ; - } else if (fabric.label.includes("Apple")) { - return ; - } else if (fabric.label.includes("Google")) { - return ; - } else { - return ; - } - }, [fabric]); + let icon = Object.entries(iconsPerKeyword).find(([keyword]) => + fabric.label.toUpperCase().includes(keyword.toUpperCase()), + )?.[1]; + + if (!icon) { + icon = vendorIdFallback[fabric.rootVendorId]; + } return ( - {icon} + {icon ? : } ); };