import React, { useEffect, useState } from "react"; import ComboBox from "../comboBox"; import LogoButton from "../../buttons/logoButton"; import PrimeButton from "../primeButton"; import RewardsButton from "../../buttons/rewardsButton"; import PmButton from "../../buttons/pmButton"; import MoreDropdown from "../moreItems"; import ProfileButton from "../../buttons/profileButton"; import ProfileDropdown from "../proDropdown"; import { UserProfile } from "../../../types/notifications"; import TooltipBottom from "../../../utils/helpers/tooltipBottom"; import classNames from "../../../utils/helpers/className"; import DropDown from "../../../utils/helpers/messageDropDown"; const TwitchBar = ({ profile, mobile, search, customCombo, props, mobileBrowse, }: { mobileBrowse?: React.Dispatch<React.SetStateAction<boolean>>; profile?: UserProfile; mobile?: boolean; search: boolean; customCombo: boolean; props?: { opened: boolean; handleClick: (e: any) => void; searchTab: boolean; setSearchTab: (e: any) => void; }; }) => { const handleNoMobile = (e: React.MouseEvent<HTMLElement>) => { e.preventDefault(); console.log("no mobile prop."); }; const [user, setUser] = useState<UserProfile | undefined>(); useEffect(() => { console.log(profile, "profile navbar"); if (profile !== undefined) { setUser(profile); } }, [profile]); // let showInfo = (e: any) => { // console.log("show info"); // }; console.log(mobileBrowse, "mobile browse"); const handleClick = () => { console.log("click"); }; if (profile) { return ( <nav> <div className="flex h-full w-full flex-row items-center justify-between bg-[#18181b] text-white"> <div className="flex"> <div className="flex shrink-0 items-start"> {/* Logo here */} <div className="flex shrink-0"> {/* ul here */} <div onClick={() => console.log("logo")}> <LogoButton /> </div> <ul className={classNames( mobile == false ? "gap-1 md:gap-4 md:max-lg:pl-2 lg:gap-2 " : "", "flex shrink-0 items-center justify-center" )} > <li> <div onClick={() => handleClick} role="button" className={classNames( mobile ? "hidden" : "flex", "flex flex-col items-center justify-center px-2 text-sm md:px-1.5 md:max-lg:pr-4" )} > <a onClick={() => handleClick} className="hidden w-full border-none bg-transparent text-[0.70rem] font-bold normal-case text-white hover:bg-transparent hover:text-violet-600 sm:block" > Following </a> <button onClick={() => handleClick} className="flex sm:hidden" > <svg type="color-fill-current" width="20px" height="20px" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" className="fill-white" onClick={() => console.log("yes")} > <g> <path fill-rule="evenodd" d="M9.171 4.171A4 4 0 006.343 3H6a4 4 0 00-4 4v.343a4 4 0 001.172 2.829L10 17l6.828-6.828A4 4 0 0018 7.343V7a4 4 0 00-4-4h-.343a4 4 0 00-2.829 1.172L10 5l-.829-.829zm.829 10l5.414-5.414A2 2 0 0016 7.343V7a2 2 0 00-2-2h-.343a2 2 0 00-1.414.586L10 7.828 7.757 5.586A2 2 0 006.343 5H6a2 2 0 00-2 2v.343a2 2 0 00.586 1.414L10 14.172z" clip-rule="evenodd" ></path> </g> </svg> </button> </div> </li> <li> <div className="flex flex-col items-center justify-center text-sm"> <a className={classNames( mobile ? "hidden" : "flex text-[0.7rem] max-md:pl-1", "hidden w-full border-none bg-transparent font-bold normal-case text-white hover:bg-transparent hover:text-violet-600 sm:block" )} > Browse </a> <a onClick={() => mobileBrowse ? mobileBrowse((prev) => !prev) : handleNoMobile } className={classNames( mobile ? "block" : "flex sm:hidden", " " )} > <svg type="color-fill-current" width="20px" height="20px" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" fill="#fffff" className=" fill-white" > <g> <path d="M5 2a2 2 0 00-2 2v8a2 2 0 002 2V4h8a2 2 0 00-2-2H5z"></path> <path fill-rule="evenodd" d="M7 8a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H9a2 2 0 01-2-2V8zm2 0h6v8H9V8z" clip-rule="evenodd" ></path> </g> </svg> </a> </div> </li> <li className="flex flex-col items-center justify-center bg-transparent hover:border-none hover:bg-transparent"> <div className=" flex h-full items-center justify-center px-3 md:px-1.5"> <MoreDropdown mobile={mobile} /> </div> </li> </ul> </div> </div> </div> <div className={classNames( mobile ? "justify-end" : "h-full justify-center", "flex w-full flex-1 grow " )} > {!mobile && props ? ( <ComboBox mobile={mobile} search={search} customCombo={false} profile={user} props={props} /> ) : customCombo == true && props ? ( <ComboBox mobile={mobile} search={search} customCombo={true} props={props} profile={user} /> ) : ( <div className=" flex flex-col items-center justify-center pl-0.5 2xs:max-sm:items-end 2xs:max-sm:bg-transparent"> <svg aria-hidden="true" focusable="false" data-icon="search" className={classNames( mobile ? "w-[2.5rem] bg-transparent" : "bg-gray-800 2xs:max-lg:w-[3.05vw] 2xs:max-sm:w-[6.15vw] 2xs:max-sm:bg-transparent lg:w-10", " h-auto rounded-r-md border border-transparent py-2 px-2 " )} role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" > <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" ></path> </svg> </div> )} </div> <div className="flex w-auto items-end justify-center "> <ul className="flex items-center justify-between pr-1"> <li className={classNames( mobile ? "hidden" : "flex", "flex items-center justify-center px-5 hover:border-none hover:bg-transparent xs:max-sm:pr-4 xs:max-sm:pl-1" )} > {/* <TooltipButton text={<PrimeButton />} tip={'New Prime Loot'} opened={open}/> */} <PrimeButton /> </li> <li className={classNames(mobile ? "hidden" : "block")}> <RewardsButton user={profile} /> </li> <li className={classNames(mobile ? "hidden" : "flex", "pr-2 pl-5")} > {/* <DropDown profile={profile} /> */} <PmButton user={profile} /> </li> <li className="pr-2 pl-[0.55rem]"> <ProfileDropdown mobile={mobile} /> </li> </ul> </div> </div> </nav> ); } else { return <div></div>; } }; export default TwitchBar;