useMediaQuery

import { useMediaQuery } from "@/hooks/use-media-query";

function ResponsiveComponent() {
  const isDesktop = useMediaQuery("(min-width: 1024px)");
  const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
  const isMobile = useMediaQuery("(max-width: 767px)");

  return (
    <div>
      {isDesktop && <p>Desktop View</p>}
      {isTablet && <p>Tablet View</p>}
      {isMobile && <p>Mobile View</p>}
    </div>
  );
}

// Breakpoints
const isMobile = useMediaQuery("(max-width: 767px)");
const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
const isDesktop = useMediaQuery("(min-width: 1024px)");

// Orientation
const isPortrait = useMediaQuery("(orientation: portrait)");
const isLandscape = useMediaQuery("(orientation: landscape)");

// Dark mode
const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");