mirror of
https://github.com/tailscale/tailscale.git
synced 2025-04-01 22:12:31 +00:00
72140da000
Update vite-plugin-svgr to the latest version (4.2.0) ahead of updating vite to 5.x. This is a major version bump from our previous 3.x, and requires changing the import paths used for SVGs. Updates https://github.com/tailscale/corp/issues/17715 Signed-off-by: Mario Minardi <mario@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 ChevronDown from "src/assets/icons/chevron-down.svg?react"
|
|
|
|
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>
|
|
)
|
|
}
|