import { useDevice } from "~/hooks/useDevice";
 
function Component() {
  const { isMobile, isDesktop, isTablet, DesktopView, MobileView, TabletView } =
    useDevice();
 
  return (
    <div>
      <div>
        {isMobile && <div>Mobile View</div>}
        {isDesktop && <div>Desktop View</div>}
        {isTablet && <div>Tablet View</div>}
      </div>
      <button onClick={DesktopView}>
        {isDesktop ? "Hide" : "Show"} Desktop View
      </button>
      <button onClick={MobileView}>
        {isMobile ? "Hide" : "Show"} Mobile View
      </button>
      <button onClick={TabletView}>
        {isTablet ? "Hide" : "Show"} Tablet View
      </button>
    </div>
  );
}

function useDevice(): {
  isMobile: boolean;
  isDesktop: boolean;
  isTablet: boolean;
  DesktopView: () => void;
  MobileView: () => void;
  TabletView: () => void;
};