"use client"
 
import * as React from "react"
 
import { useBreakpoint } from "@/hooks/use-breakpoint"
 
export function Component() {
  const { currentBreakpoint, isAbove } = useBreakpoint()
 
  return (
    <div>
      <h2>Current Breakpoint: {currentBreakpoint}</h2>
      <div
        style={{
          padding: isAbove("xl") ? "40px" : "20px",
          fontSize: isAbove("2xl") ? "24px" : "16px",
          backgroundColor: isAbove("lg") ? "#e3f2fd" : "#fff8e1",
        }}
      >
        {isAbove("2xl")
          ? "Extra Large Desktop View"
          : isAbove("xl")
            ? "Desktop View"
            : isAbove("lg")
              ? "Laptop View"
              : isAbove("md")
                ? "Tablet View"
                : "Mobile View"}
      </div>
    </div>
  )
}