diff options
Diffstat (limited to 'apps/web/src/components/ui/split-button.tsx')
| -rw-r--r-- | apps/web/src/components/ui/split-button.tsx | 180 |
1 files changed, 90 insertions, 90 deletions
diff --git a/apps/web/src/components/ui/split-button.tsx b/apps/web/src/components/ui/split-button.tsx index dfc4cdfe..aa8b331a 100644 --- a/apps/web/src/components/ui/split-button.tsx +++ b/apps/web/src/components/ui/split-button.tsx @@ -1,90 +1,90 @@ -import { Button, type ButtonProps } from "@/components/ui/button"; -import { Separator } from "@/components/ui/separator"; -import { type ReactNode, forwardRef } from "react"; -import { cn } from "@/utils/ui"; - -interface SplitButtonProps { - children: ReactNode; - className?: string; -} - -interface SplitButtonSideProps extends Omit<ButtonProps, "variant" | "size"> { - children: ReactNode; -} - -const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>( - ({ children, className, ...props }, ref) => { - return ( - <div - ref={ref} - className={cn( - "border-input bg-accent inline-flex h-7 overflow-hidden rounded-lg border", - className, - )} - {...props} - > - {children} - </div> - ); - }, -); -SplitButton.displayName = "SplitButton"; - -const SplitButtonSide = forwardRef< - HTMLButtonElement, - SplitButtonSideProps & { paddingClass: string } ->(({ children, className, paddingClass, onClick, ...props }, ref) => { - return ( - <Button - ref={ref} - variant="text" - className={cn( - "bg-accent disabled:text-muted-foreground h-full gap-0 rounded-none border-0 font-normal !opacity-100", - onClick - ? "hover:bg-foreground/10 cursor-pointer hover:opacity-100" - : "cursor-default select-text", - paddingClass, - className, - )} - onClick={onClick} - {...props} - > - {typeof children === "string" ? ( - <span className="cursor-text font-normal">{children}</span> - ) : ( - children - )} - </Button> - ); -}); -SplitButtonSide.displayName = "SplitButtonSide"; - -const SplitButtonLeft = forwardRef<HTMLButtonElement, SplitButtonSideProps>( - ({ ...props }, ref) => { - return <SplitButtonSide ref={ref} paddingClass="pl-3 pr-2" {...props} />; - }, -); -SplitButtonLeft.displayName = "SplitButtonLeft"; - -const SplitButtonRight = forwardRef<HTMLButtonElement, SplitButtonSideProps>( - ({ ...props }, ref) => { - return <SplitButtonSide ref={ref} paddingClass="pl-2 pr-3" {...props} />; - }, -); -SplitButtonRight.displayName = "SplitButtonRight"; - -const SplitButtonSeparator = forwardRef<HTMLDivElement, { className?: string }>( - ({ className, ...props }, ref) => { - return ( - <Separator - ref={ref} - orientation="vertical" - className={cn("bg-foreground/15 h-full", className)} - {...props} - /> - ); - }, -); -SplitButtonSeparator.displayName = "SplitButtonSeparator"; - -export { SplitButton, SplitButtonLeft, SplitButtonRight, SplitButtonSeparator }; +import { Button, type ButtonProps } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { type ReactNode, forwardRef } from "react";
+import { cn } from "@/utils/ui";
+
+interface SplitButtonProps {
+ children: ReactNode;
+ className?: string;
+}
+
+interface SplitButtonSideProps extends Omit<ButtonProps, "variant" | "size"> {
+ children: ReactNode;
+}
+
+const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
+ ({ children, className, ...props }, ref) => {
+ return (
+ <div
+ ref={ref}
+ className={cn(
+ "border-input bg-accent inline-flex h-7 overflow-hidden rounded-lg border",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ </div>
+ );
+ },
+);
+SplitButton.displayName = "SplitButton";
+
+const SplitButtonSide = forwardRef<
+ HTMLButtonElement,
+ SplitButtonSideProps & { paddingClass: string }
+>(({ children, className, paddingClass, onClick, ...props }, ref) => {
+ return (
+ <Button
+ ref={ref}
+ variant="text"
+ className={cn(
+ "bg-accent disabled:text-muted-foreground h-full gap-0 rounded-none border-0 font-normal !opacity-100",
+ onClick
+ ? "hover:bg-foreground/10 cursor-pointer hover:opacity-100"
+ : "cursor-default select-text",
+ paddingClass,
+ className,
+ )}
+ onClick={onClick}
+ {...props}
+ >
+ {typeof children === "string" ? (
+ <span className="cursor-text font-normal">{children}</span>
+ ) : (
+ children
+ )}
+ </Button>
+ );
+});
+SplitButtonSide.displayName = "SplitButtonSide";
+
+const SplitButtonLeft = forwardRef<HTMLButtonElement, SplitButtonSideProps>(
+ ({ ...props }, ref) => {
+ return <SplitButtonSide ref={ref} paddingClass="pl-3 pr-2" {...props} />;
+ },
+);
+SplitButtonLeft.displayName = "SplitButtonLeft";
+
+const SplitButtonRight = forwardRef<HTMLButtonElement, SplitButtonSideProps>(
+ ({ ...props }, ref) => {
+ return <SplitButtonSide ref={ref} paddingClass="pl-2 pr-3" {...props} />;
+ },
+);
+SplitButtonRight.displayName = "SplitButtonRight";
+
+const SplitButtonSeparator = forwardRef<HTMLDivElement, { className?: string }>(
+ ({ className, ...props }, ref) => {
+ return (
+ <Separator
+ ref={ref}
+ orientation="vertical"
+ className={cn("bg-foreground/15 h-full", className)}
+ {...props}
+ />
+ );
+ },
+);
+SplitButtonSeparator.displayName = "SplitButtonSeparator";
+
+export { SplitButton, SplitButtonLeft, SplitButtonRight, SplitButtonSeparator };
|