"use client"
 
import * as React from "react"
 
import { useMediaQuery } from "@/hooks/use-media-query"
 
export function Component() {
  const isSmallDevice = useMediaQuery("only screen and (max-width: 768px)")
  const isMediumDevice = useMediaQuery(
    "only screen and (min-width: 769px) and (max-width: 992px)"
  )
  const isLargeDevice = useMediaQuery(
    "only screen and (min-width: 993px) and (max-width: 1200px)"
  )
  const isExtraLargeDevice = useMediaQuery(
    "only screen and (min-width: 1201px)"
  )
 
  return (
    <section>
      <h1>useMediaQuery</h1>
      <p>Resize your browser window to see changes.</p>
      <article>
        <figure className={isSmallDevice ? "active" : ""}>
          📱 <figcaption>Small Device</figcaption>
        </figure>
        <figure className={isMediumDevice ? "active" : ""}>
          💻 <figcaption>Medium Device</figcaption>
        </figure>
        <figure className={isLargeDevice ? "active" : ""}>
          🖥️ <figcaption>Large Device</figcaption>
        </figure>
        <figure className={isExtraLargeDevice ? "active" : ""}>
          🖼️ <figcaption>Extra Large Device</figcaption>
        </figure>
      </article>
    </section>
  )
}