import classNames from "classnames"; import { memo, useEffect, useRef } from "react"; export enum Icons { SEARCH = "search", BOOKMARK = "bookmark", BOOKMARK_OUTLINE = "bookmark_outline", CLOCK = "clock", EYE = "eye", EYE_SLASH = "eyeSlash", ARROW_LEFT = "arrowLeft", ARROW_RIGHT = "arrowRight", CHEVRON_DOWN = "chevronDown", CHEVRON_UP = "chevronUp", CHEVRON_RIGHT = "chevronRight", CHEVRON_LEFT = "chevronLeft", CLAPPER_BOARD = "clapperBoard", FILM = "film", DRAGON = "dragon", WARNING = "warning", MOVIE_WEB = "movieWeb", DISCORD = "discord", GITHUB = "github", PLAY = "play", PAUSE = "pause", EXPAND = "expand", COMPRESS = "compress", VOLUME = "volume", VOLUME_X = "volume_x", X = "x", EDIT = "edit", AIRPLAY = "airplay", EPISODES = "episodes", SKIP_FORWARD = "skip_forward", SKIP_BACKWARD = "skip_backward", FILE = "file", CAPTIONS = "captions", LINK = "link", CASTING = "casting", CIRCLE_EXCLAMATION = "circle_exclamation", DOWNLOAD = "download", GEAR = "gear", WATCH_PARTY = "watch_party", PICTURE_IN_PICTURE = "pictureInPicture", CHECKMARK = "checkmark", TACHOMETER = "tachometer", MAIL = "mail", CIRCLE_CHECK = "circle_check", SKIP_EPISODE = "skip_episode", MORE_VERTICAL = "more_vertical", IOS_SHARE = "ios_share", IOS_FILES = "ios_files", WAND = "wand", COPY = "copy", USER = "user", UP_DOWN_ARROW = "up_down_arrow", RISING_STAR = "rising_star", SETTINGS = "settings", COINS = "coins", LOGOUT = "logout", MENU = "menu", LOCK = "lock", UNLOCK = "unlock", DONATION = "donation", CIRCLE_QUESTION = "circle_question", BRUSH = "brush", } export interface IconProps { icon: Icons; className?: string; } const iconList: Record = { search: ``, bookmark: ``, clock: ``, eye: ``, eyeSlash: ``, arrowLeft: ``, chevronDown: ``, chevronUp: ``, chevronRight: ``, chevronLeft: ``, clapperBoard: ``, film: ``, dragon: ``, warning: ``, arrowRight: ``, movieWeb: ``, discord: ``, github: ``, play: ``, pause: ``, expand: ``, compress: ``, volume: ``, volume_x: ``, x: ``, edit: ``, bookmark_outline: ``, airplay: ``, episodes: ``, skip_forward: ``, skip_backward: ``, file: ``, captions: ``, link: ``, circle_exclamation: ``, casting: "", download: ``, gear: ``, watch_party: ``, pictureInPicture: ``, checkmark: ``, tachometer: ``, mail: ``, circle_check: ``, skip_episode: ``, more_vertical: ``, ios_share: ``, ios_files: ``, wand: ``, copy: ``, user: ``, up_down_arrow: ``, rising_star: ``, settings: ``, coins: ``, logout: ``, menu: ``, lock: ``, unlock: ``, donation: ``, circle_question: ``, brush: ``, }; function ChromeCastButton() { const ref = useRef(null); useEffect(() => { const tag = document.createElement("google-cast-launcher"); tag.setAttribute("id", "castbutton"); ref.current?.appendChild(tag); }, []); return

; } export const Icon = memo((props: IconProps) => { if (props.icon === Icons.CASTING) { return ; } const flipClass = props.icon === Icons.ARROW_LEFT || props.icon === Icons.ARROW_RIGHT || props.icon === Icons.CHEVRON_LEFT || props.icon === Icons.CHEVRON_RIGHT ? "rtl:-scale-x-100" : ""; return ( ); });