ホットキー

'use client';
 
import { cn } from '@/app/lib/utils';
import { useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
 
export default function Demo() {
  const [active, setActive] = useState(false);
 
  useHotkeys('meta+u, ctrl+u', () => setActive((v) => !v), {
    preventDefault: true,
  });
 
  return (
    <>
      <kbd
        data-active={active}
        className="
        rounded-md transition-all duration-500 border px-2 py-1.5 text-sm font-semibold font-mono bg-muted text-muted-foreground shadow-sm
      data-[active=true]:bg-sky-400 data-[active=true]:text-white data-[active=true]:shadow-[0_1px_20px] data-[active=true]:shadow-sky-400 data-[active=true]:border-sky-400
        "
      >
        <span className="mr-1">⌘</span>U
      </kbd>
    </>
  );
}