Trade Buttons

1"use client";
2 
3import React from "react";
4import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
5import { cn } from "@/lib/utils";
6 
7interface TradeButtonsProps {
8  defaultValue?: string;
9  value?: string;
10  onValueChange?: (value: string) => void;
11  labels?: [string, string];
12  className?: string;
13}
14 
15const TradeButtons = ({
16  defaultValue = "long",
17  value,
18  onValueChange,
19  labels = ["Long", "Short"],
20  className,
21}: TradeButtonsProps) => {
22  const [internalValue, setInternalValue] = React.useState(defaultValue);
23  const currentValue = value ?? internalValue;
24 
25  const handleValueChange = (newValue: string) => {
26    if (!newValue) return;
27    setInternalValue(newValue);
28    onValueChange?.(newValue);
29  };
30 
31  return (
32    <ToggleGroup
33      type="single"
34      variant="outline"
35      spacing={2}
36      value={currentValue}
37      onValueChange={handleValueChange}
38      className={cn("w-full", className)}
39    >
40      <ToggleGroupItem
41        value="long"
42        aria-label={`Toggle ${labels[0]}`}
43        className={cn(
44          "flex-1 shrink transition-colors",
45          currentValue === "long"
46            ? "bg-emerald-500/15 text-emerald-500 border-emerald-500/25 hover:bg-emerald-500/25 hover:text-emerald-500 data-[state=on]:bg-emerald-500/15 data-[state=on]:text-emerald-500"
47            : "hover:bg-muted/80",
48        )}
49      >
50        {labels[0]}
51      </ToggleGroupItem>
52      <ToggleGroupItem
53        value="short"
54        aria-label={`Toggle ${labels[1]}`}
55        className={cn(
56          "flex-1 shrink transition-colors",
57          currentValue === "short"
58            ? "bg-red-400/15 text-red-400 border-red-400/25 hover:bg-red-400/25 hover:text-red-400 data-[state=on]:bg-red-400/15 data-[state=on]:text-red-400"
59            : "hover:bg-muted/80",
60        )}
61      >
62        {labels[1]}
63      </ToggleGroupItem>
64    </ToggleGroup>
65  );
66};
67 
68export type { TradeButtonsProps };
69export { TradeButtons };