diff --git a/src/components/PeerSelector.tsx b/src/components/PeerSelector.tsx index 05afa5b..8a5f5dc 100644 --- a/src/components/PeerSelector.tsx +++ b/src/components/PeerSelector.tsx @@ -1,7 +1,6 @@ import { CommandItem } from "@components/Command"; import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover"; import { ScrollArea } from "@components/ScrollArea"; -import SmallOSIcon from "@components/ui/SmallOSIcon"; import TextWithTooltip from "@components/ui/TextWithTooltip"; import { IconArrowBack } from "@tabler/icons-react"; import useFetchApi from "@utils/api"; @@ -11,6 +10,7 @@ import { sortBy, trim, unionBy } from "lodash"; import { ChevronsUpDown, MapPin, SearchIcon } from "lucide-react"; import * as React from "react"; import { useEffect, useMemo, useState } from "react"; +import { FcLinux } from "react-icons/fc"; import { useElementSize } from "@/hooks/useElementSize"; import { getOperatingSystem } from "@/hooks/useOperatingSystem"; import { OperatingSystem } from "@/interfaces/OperatingSystem"; @@ -45,7 +45,7 @@ export function PeerSelector({ // Filter out peers that are not linux options = options.filter((peer) => { - return getOperatingSystem(peer.os) == OperatingSystem.LINUX; + return getOperatingSystem(peer.os) === OperatingSystem.LINUX; }); // Filter out excluded peers @@ -56,7 +56,7 @@ export function PeerSelector({ }); } - setDropdownOptions(unionBy(options, dropdownOptions, "name")); + setDropdownOptions(unionBy(options, dropdownOptions, "id")); // eslint-disable-next-line react-hooks/exhaustive-deps }, [peers]); @@ -100,6 +100,12 @@ export function PeerSelector({ } }, [open, dropdownOptions]); + const LinuxIcon = ( + + + + ); + return (
- + {LinuxIcon}
@@ -249,7 +255,7 @@ export function PeerSelector({ }} >
- + {LinuxIcon}
diff --git a/src/components/ui/SmallOSIcon.tsx b/src/components/ui/SmallOSIcon.tsx deleted file mode 100644 index 0a7dbd5..0000000 --- a/src/components/ui/SmallOSIcon.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import Image from "next/image"; -import { useMemo } from "react"; -import { FaWindows } from "react-icons/fa6"; -import { FcAndroidOs, FcLinux } from "react-icons/fc"; -import AppleLogo from "@/assets/os-icons/apple.svg"; -import { getOperatingSystem } from "@/hooks/useOperatingSystem"; -import { OperatingSystem } from "@/interfaces/OperatingSystem"; - -export default function SmallOSIcon({ os }: { os: string }) { - const icon = useMemo(() => { - return getOperatingSystem(os.toLowerCase()); - }, [os]); - - if (icon === OperatingSystem.WINDOWS) - return ; - if (icon === OperatingSystem.APPLE) - return ( -
- {""} -
- ); - if (icon === OperatingSystem.ANDROID) - return ; - - return ; -} diff --git a/src/hooks/useOperatingSystem.ts b/src/hooks/useOperatingSystem.ts index f60493e..6eb0dc9 100644 --- a/src/hooks/useOperatingSystem.ts +++ b/src/hooks/useOperatingSystem.ts @@ -13,10 +13,13 @@ export default function useOperatingSystem() { } export const getOperatingSystem = (os: string) => { - if (os.includes("darwin")) return OperatingSystem.APPLE as const; - if (os.includes("mac")) return OperatingSystem.APPLE as const; - if (os.includes("android")) return OperatingSystem.ANDROID as const; - if (os.includes("ios")) return OperatingSystem.IOS as const; - if (os.includes("win")) return OperatingSystem.WINDOWS as const; + if (os.toLowerCase().includes("darwin")) + return OperatingSystem.APPLE as const; + if (os.toLowerCase().includes("mac")) return OperatingSystem.APPLE as const; + if (os.toLowerCase().includes("android")) + return OperatingSystem.ANDROID as const; + if (os.toLowerCase().includes("ios")) return OperatingSystem.IOS as const; + if (os.toLowerCase().includes("windows")) + return OperatingSystem.WINDOWS as const; return OperatingSystem.LINUX as const; }; diff --git a/src/modules/peers/PeerOSCell.tsx b/src/modules/peers/PeerOSCell.tsx index a823bed..13e1f31 100644 --- a/src/modules/peers/PeerOSCell.tsx +++ b/src/modules/peers/PeerOSCell.tsx @@ -42,7 +42,7 @@ export function PeerOSCell({ os }: { os: string }) { export function OSLogo({ os }: { os: string }) { const icon = useMemo(() => { - return getOperatingSystem(os.toLowerCase()); + return getOperatingSystem(os); }, [os]); if (icon === OperatingSystem.WINDOWS)