feat: add side bar components disclosure constants classes

This commit is contained in:
Igor Carvalho 2023-07-04 20:17:09 -03:00
commit b6192162b0
2 changed files with 17 additions and 5 deletions

View file

@ -227,4 +227,16 @@ The cursor: default; property value restores the browser's default cursor style
.message-button-icon { .message-button-icon {
@apply w-6 fill-chat-trigger stroke-chat-trigger stroke-1 @apply w-6 fill-chat-trigger stroke-chat-trigger stroke-1
} }
.components-disclosure-arrangement {
@apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2
}
.text-color {
@apply text-primary
}
.components-disclosure-title {
@apply flex items-center text-sm text-color
}
.components-disclosure-div {
@apply flex gap-2
}
} }

View file

@ -12,14 +12,14 @@ export default function DisclosureComponent({
{({ open }) => ( {({ open }) => (
<> <>
<div> <div>
<Disclosure.Button className="-mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2"> <Disclosure.Button className="components-disclosure-arrangement">
<div className="flex gap-4"> <div className="flex gap-4">
<Icon strokeWidth={1.5} size={22} className="text-primary " /> <Icon strokeWidth={1.5} size={22} className="text-color" />
<span className="flex items-center text-sm text-primary"> <span className="components-disclosure-title">
{title} {title}
</span> </span>
</div> </div>
<div className="flex gap-2"> <div className="components-disclosure-div">
{buttons.map((x, index) => ( {buttons.map((x, index) => (
<button key={index} onClick={x.onClick}> <button key={index} onClick={x.onClick}>
{x.Icon} {x.Icon}
@ -35,7 +35,7 @@ export default function DisclosureComponent({
</div> </div>
</Disclosure.Button> </Disclosure.Button>
</div> </div>
<Disclosure.Panel as="div" className="-mt-px" static={openDisc}> <Disclosure.Panel as="div" static={openDisc}>
{children} {children}
</Disclosure.Panel> </Disclosure.Panel>
</> </>