pnpm add @rouf-dev/pantheon-ui

"use client";

import { useMediaQuery } from "@rouf-dev/pantheon-ui";

export function ResponsiveDemo() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isDesktop = useMediaQuery('(min-width: 1024px)');
  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');

  return (
    <div>
      <p>Mobile: {isMobile ? 'Yes' : 'No'}</p>
      <p>Desktop: {isDesktop ? 'Yes' : 'No'}</p>
      <p>Prefers dark: {prefersDark ? 'Yes' : 'No'}</p>
    </div>
  );
}