cursor

1import { Children, type HTMLAttributes, type SVGProps } from "react";
2import { cn } from "@/lib/utils";
3 
4export type CursorProps = HTMLAttributes<HTMLSpanElement>;
5 
6export const Cursor = ({ className, children, ...props }: CursorProps) => (
7  <span
8    className={cn("pointer-events-none relative select-none", className)}
9    {...props}
10  >
11    {children}
12  </span>
13);
14 
15export type CursorPointerProps = SVGProps<SVGSVGElement>;
16 
17export const CursorPointer = ({ className, ...props }: CursorPointerProps) => (
18  <svg
19    aria-hidden="true"
20    className={cn("size-3.5", className)}
21    fill="none"
22    focusable="false"
23    height="20"
24    viewBox="0 0 20 20"
25    width="20"
26    xmlns="http://www.w3.org/2000/svg"
27    {...props}
28  >
29    <path
30      d="M19.438 6.716 1.115.05A.832.832 0 0 0 .05 1.116L6.712 19.45a.834.834 0 0 0 1.557.025l3.198-8 7.995-3.2a.833.833 0 0 0 0-1.559h-.024Z"
31      fill="currentColor"
32    />
33  </svg>
34);
35 
36export type CursorBodyProps = HTMLAttributes<HTMLSpanElement>;
37 
38export const CursorBody = ({
39  children,
40  className,
41  ...props
42}: CursorBodyProps) => (
43  <span
44    className={cn(
45      "relative ml-3.5 flex flex-col whitespace-nowrap rounded-xl py-1 pr-3 pl-2.5 text-xs",
46      Children.count(children) > 1 && "rounded-tl [&>:first-child]:opacity-70",
47      "bg-secondary text-foreground",
48      className
49    )}
50    {...props}
51  >
52    {children}
53  </span>
54);
55 
56export type CursorNameProps = HTMLAttributes<HTMLSpanElement>;
57 
58export const CursorName = (props: CursorNameProps) => <span {...props} />;
59 
60export type CursorMessageProps = HTMLAttributes<HTMLSpanElement>;
61 
62export const CursorMessage = (props: CursorMessageProps) => <span {...props} />;