UseKeypressDemo

1'use client';
2 
3import React from 'react';
4 
5import confetti from 'canvas-confetti';
6 
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from '@/components/ui/card';
14 
15import { useKeypress } from '@/hooks/guarahooks/use-keypress';
16 
17export default function UseKeypressDemo() {
18  const popStars = () => {
19    const defaults = {
20      spread: 360,
21      ticks: 50,
22      gravity: 0,
23      decay: 0.94,
24      startVelocity: 30,
25      colors: ['#FFE400', '#FFBD00', '#E89400', '#FFCA6C', '#FDFFB8'],
26    };
27 
28    const shoot = () => {
29      confetti({
30        ...defaults,
31        particleCount: 40,
32        scalar: 1.2,
33        shapes: ['star'],
34      });
35 
36      confetti({
37        ...defaults,
38        particleCount: 10,
39        scalar: 0.75,
40        shapes: ['circle'],
41      });
42    };
43 
44    setTimeout(shoot, 0);
45    setTimeout(shoot, 100);
46    setTimeout(shoot, 200);
47  };
48 
49  useKeypress({
50    combo: ['ctrl+m', 'meta+m'],
51    callback: (e) => {
52      popStars();
53    },
54    preventDefault: true,
55  });
56 
57  return (
58    <Card className="relative max-w-sm w-full">
59      <CardHeader>
60        <CardTitle>useKeypress</CardTitle>
61        <CardDescription>
62          This component uses the <code>useKeypress</code> hook to detect key
63          combinations.
64        </CardDescription>
65      </CardHeader>
66      <CardContent className="space-y-2">
67        <p>Press Ctrl+M (Windows/Linux) or Cmd+M (Mac) to see some magic.</p>
68      </CardContent>
69    </Card>
70  );
71}