mirror of
https://github.com/tailscale/tailscale.git
synced 2025-04-18 12:32:13 +00:00
95e9d22a16
Makes the following changes: * Use “link” class in various spots * Remove button appearance on Exit Node dropdown in readonly mode * Update `-stone-` colors to `-gray-` (couple spots missed by original color config commit) * Pull full ui/button component from admin panel, and update buttons throughout UI to use this component * Remove various buttons in readonly view to match mocks * Add route (and “pending approval”) highlights to Subnet router settings card * Delete legacy client button styles from index.css * Fix overflow of IPv6 address on device details view Updates #10261 Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
// Copyright (c) Tailscale Inc & AUTHORS
|
|
// SPDX-License-Identifier: BSD-3-Clause
|
|
|
|
import * as Primitive from "@radix-ui/react-collapsible"
|
|
import React, { useState } from "react"
|
|
import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
|
|
|
|
type CollapsibleProps = {
|
|
trigger?: string
|
|
children: React.ReactNode
|
|
open?: boolean
|
|
onOpenChange?: (open: boolean) => void
|
|
}
|
|
|
|
export default function Collapsible(props: CollapsibleProps) {
|
|
const { children, trigger, onOpenChange } = props
|
|
const [open, setOpen] = useState(props.open)
|
|
|
|
return (
|
|
<Primitive.Root
|
|
open={open}
|
|
onOpenChange={(open) => {
|
|
setOpen(open)
|
|
onOpenChange?.(open)
|
|
}}
|
|
>
|
|
<Primitive.Trigger className="inline-flex items-center text-gray-600 cursor-pointer hover:bg-gray-100 rounded text-sm font-medium pr-3 py-1 transition-colors">
|
|
<span className="ml-2 mr-1.5 group-hover:text-gray-500 -rotate-90 state-open:rotate-0">
|
|
<ChevronDown strokeWidth={3} className="stroke-gray-400 w-4" />
|
|
</span>
|
|
{trigger}
|
|
</Primitive.Trigger>
|
|
<Primitive.Content className="mt-2">{children}</Primitive.Content>
|
|
</Primitive.Root>
|
|
)
|
|
}
|