1import useMediaQuery from "@repo/ui/hooks/use-media-query";

1const isMobile = useMediaQuery("(max-width: 768px)");
2
3return <p>{isMobile ? "Mobile" : "Desktop"}</p>;

1import { useState, useEffect } from "react";
2
3function useMediaQuery(query: string): boolean {
4  const [matches, setMatches] = useState(false);
5
6  useEffect(() => {
7    const mediaQueryList = window.matchMedia(query);
8
9    const updateMatch = () => setMatches(mediaQueryList.matches);
10    updateMatch();
11
12    mediaQueryList.addEventListener("change", updateMatch);
13    return () => mediaQueryList.removeEventListener("change", updateMatch);
14  }, [query]);
15
16  return matches;
17}
18
19export default useMediaQuery;