Cursor Demo

1import {
2  Cursor,
3  CursorFollow,
4  CursorProvider,
5  type CursorFollowProps,
6} from "@/components/unlumen-ui/primitives/cursor";
7 
8interface CursorDemoProps {
9  global?: boolean;
10  enableCursor?: boolean;
11  enableCursorFollow?: boolean;
12  side?: CursorFollowProps["side"];
13  sideOffset?: number;
14  align?: CursorFollowProps["align"];
15  alignOffset?: number;
16}
17 
18export const CursorDemo = ({
19  global = false,
20  enableCursor = true,
21  enableCursorFollow = true,
22  side = "bottom",
23  sideOffset = 15,
24  align = "end",
25  alignOffset = 5,
26}: CursorDemoProps) => {
27  return (
28    <div
29      key={String(global)}
30      className="max-w-[400px] h-[400px] w-full bg-accent rounded-lg flex items-center justify-center"
31    >
32      <p className="font-medium italic text-muted-foreground">
33        Move your mouse over the div
34      </p>
35      <CursorProvider global={global}>
36        {enableCursor && <Cursor />}
37        {enableCursorFollow && (
38          <CursorFollow
39            side={side}
40            sideOffset={sideOffset}
41            align={align}
42            alignOffset={alignOffset}
43          >
44            Designer
45          </CursorFollow>
46        )}
47      </CursorProvider>
48    </div>
49  );
50};