| 26 | } |
| 27 | |
| 28 | function Group({ name, open, onClick }: { name?: string; open: boolean; onClick: (nextValue: boolean) => void }) { |
| 29 | const { t } = useLocale(); |
| 30 | return ( |
| 31 | name && ( |
| 32 | <div |
| 33 | className={cn( |
| 34 | "group w-full inline-flex items-center justify-start relative gap-2 cursor-pointer pt-4 pr-2 pb-2 pl-3 transition-all duration-300 ease-in-out", |
| 35 | "hover:pl-4", |
| 36 | )} |
| 37 | onClick={() => onClick(!open)} |
| 38 | > |
| 39 | <Icon |
| 40 | icon="eva:arrow-ios-forward-fill" |
| 41 | className={cn("absolute left-[-4px] h-4 w-4 inline-flex shrink-0 transition-all duration-300 ease-in-out", "opacity-0 group-hover:opacity-100", { |
| 42 | "rotate-90": open, |
| 43 | })} |
| 44 | /> |
| 45 | |
| 46 | <span className={cn("text-xs font-medium transition-all duration-300 ease-in-out text-text-disabled", "hover:text-text-primary")}>{t(name)}</span> |
| 47 | </div> |
| 48 | ) |
| 49 | ); |
| 50 | } |