This commit is contained in:
Hachi-R 2024-11-12 04:10:43 -03:00
parent 2c1c3e3c98
commit ca953de464
2 changed files with 19 additions and 21 deletions

View file

@ -1,7 +1,6 @@
@use "../../scss/globals.scss"; @use "../../scss/globals.scss";
.dropdown-menu { .dropdown-menu {
&__content { &__content {
background-color: globals.$dark-background-color; background-color: globals.$dark-background-color;
border: 1px solid globals.$border-color; border: 1px solid globals.$border-color;
@ -22,7 +21,7 @@
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: globals.$muted-color; color: globals.$muted-color;
} }
&__separator { &__separator {
width: 100%; width: 100%;
@ -42,7 +41,7 @@
cursor: pointer; cursor: pointer;
transition: background-color 0.1s ease-in-out; transition: background-color 0.1s ease-in-out;
font-size: 14px; font-size: 14px;
} }
&__item--disabled { &__item--disabled {
cursor: default; cursor: default;

View file

@ -46,30 +46,29 @@ export default ({
> >
{title && ( {title && (
<DropdownMenu.Group className="dropdown-menu__group"> <DropdownMenu.Group className="dropdown-menu__group">
<div className="dropdown-menu__title-bar"> <div className="dropdown-menu__title-bar">{title}</div>
{title}
</div>
</DropdownMenu.Group> </DropdownMenu.Group>
)} )}
<DropdownMenu.Separator className="dropdown-menu__separator" /> <DropdownMenu.Separator className="dropdown-menu__separator" />
<DropdownMenu.Group className="dropdown-menu__group"> <DropdownMenu.Group className="dropdown-menu__group">
{items.map((item) => {items.map(
item.show !== false && ( (item) =>
<DropdownMenu.Item item.show !== false && (
key={item.label} <DropdownMenu.Item
aria-label={item.label} key={item.label}
onSelect={item.onClick} aria-label={item.label}
className={`dropdown-menu__item ${item.disabled ? "dropdown-menu__item--disabled" : ""}`} onSelect={item.onClick}
disabled={item.disabled} className={`dropdown-menu__item ${item.disabled ? "dropdown-menu__item--disabled" : ""}`}
> disabled={item.disabled}
{item.icon && ( >
<div className="dropdown-menu__item-icon">{item.icon}</div> {item.icon && (
)} <div className="dropdown-menu__item-icon">{item.icon}</div>
{item.label} )}
</DropdownMenu.Item> {item.label}
) </DropdownMenu.Item>
)
)} )}
</DropdownMenu.Group> </DropdownMenu.Group>
</DropdownMenu.Content> </DropdownMenu.Content>