44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
import * as React from "react"
|
||
|
|
import { Plus } from "lucide-react"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
import { Button } from "./button"
|
||
|
|
|
||
|
|
const Toggle = ({
|
||
|
|
children,
|
||
|
|
className,
|
||
|
|
value,
|
||
|
|
setValue,
|
||
|
|
}: {
|
||
|
|
children: React.ReactNode
|
||
|
|
className?: string
|
||
|
|
value: boolean
|
||
|
|
setValue: React.Dispatch<React.SetStateAction<boolean>>
|
||
|
|
}) => {
|
||
|
|
if (value)
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={() => setValue(false)}
|
||
|
|
className={cn(
|
||
|
|
className,
|
||
|
|
`gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-2 h-9 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className="rounded-[6px] w-full gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-full">
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
else
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
className="w-full"
|
||
|
|
variant="outline"
|
||
|
|
onClick={() => setValue(true)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Toggle
|