manifold/web/components/advanced-panel.tsx

39 lines
935 B
TypeScript
Raw Normal View History

2022-01-05 18:23:44 +00:00
import clsx from 'clsx'
import { useState } from 'react'
export function AdvancedPanel(props: { children: any }) {
const { children } = props
const [collapsed, setCollapsed] = useState(true)
return (
<div
tabIndex={0}
className={clsx(
'relative collapse collapse-arrow',
2022-01-05 18:23:44 +00:00
collapsed ? 'collapse-close' : 'collapse-open'
)}
>
<div
onClick={() => setCollapsed((collapsed) => !collapsed)}
className="cursor-pointer"
>
2022-01-05 18:23:44 +00:00
<div className="mt-4 mr-6 text-sm text-gray-400 text-right">
Advanced
</div>
<div
className="collapse-title p-0 absolute w-0 h-0 min-h-0"
style={{
top: -2,
right: -15,
color: '#9ca3af' /* gray-400 */,
}}
/>
</div>
<div className="collapse-content !p-0 m-0 !bg-transparent">
{children}
</div>
</div>
)
}