cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

⚡️ feat: add squiggly line and personal TODO

Browse Source
This commit is contained in:
Andre H 2024-02-29 09:30:53 +07:00
parent ee397d0e6e
commit 91a80cac8a
2 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts
View File

@ -25,8 +25,6 @@ export const userSelectTheme = tv({
'mt-12',
'z-20',
'absolute',
'px-1',
'py-1',
'flex-col',
'gap-0.5',
'min-w-full',
@ -39,6 +37,7 @@ export const userSelectTheme = tv({
'border-gray-200',
'rounded-xl',
],
popoverItemWrapper: ['flex', 'flex-col', 'px-2', 'py-2', 'gap-1'],
},
variants: {
isOpen: {

93
packages/frontend/src/components/shared/UserSelect/UserSelect.tsx
View File

@ -10,6 +10,7 @@ import {
BuildingIcon,
ChevronUpDown,
SettingsSlidersIcon,
SquigglyLine,
} from 'components/shared/CustomIcon';
import { cn } from 'utils/classnames';
import { UserSelectTheme, userSelectTheme } from './UserSelect.theme';
@ -143,48 +144,66 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
{...getMenuProps({ ref: popoverRef }, { suppressRefError: true })}
id="popover"
ref={popoverRef}
className={cn(
theme.popover({ isOpen }),
{
// Position the popover based on the dropdown position
'top-[27.5%]': dropdownPosition === 'bottom',
'bottom-[92.5%]': dropdownPosition === 'top',
},
'px-2 py-2',
)}
className={cn(theme.popover({ isOpen }), {
// Position the popover based on the dropdown position
'top-[27.5%]': dropdownPosition === 'bottom',
'bottom-[92.5%]': dropdownPosition === 'top',
})}
>
{/* Settings header */}
<div className="flex justify-between h-8 items-center">
<div className="flex gap-1 text-elements-mid-em">
<BuildingIcon size={16} />
<p className="text-xs font-medium">Other teams</p>
</div>
<div
className="flex gap-1 text-elements-link cursor-pointer"
onClick={handleManage}
>
<p className="text-xs font-medium">Manage</p>
<SettingsSlidersIcon size={16} />
<div className={theme.popoverItemWrapper()}>
{/* Settings header */}
<div className="flex justify-between h-8 items-center">
<div className="flex gap-1 text-elements-mid-em">
<BuildingIcon size={16} />
<p className="text-xs font-medium">Other teams</p>
</div>
<div
className="flex gap-1 text-elements-link cursor-pointer"
onClick={handleManage}
>
<p className="text-xs font-medium">Manage</p>
<SettingsSlidersIcon size={16} />
</div>
</div>
{/* Organization */}
{isOpen && options.length !== 0 ? (
options.map((item, index) => (
<UserSelectItem
{...getItemProps({ item, index })}
key={item.value}
selected={isSelected(item)}
option={item}
hovered={highlightedIndex === index}
/>
))
) : (
<EmptyUserSelectItem />
)}
</div>
{/* Organization */}
{isOpen && options.length !== 0 ? (
options.map((item, index) => (
<UserSelectItem
{...getItemProps({ item, index })}
key={item.value}
selected={isSelected(item)}
option={item}
hovered={highlightedIndex === index}
/>
))
) : (
<EmptyUserSelectItem />
)}
{/* Squiggly line */}
{/* //TODO:remove if personal dont exist */}
<div>
<SquigglyLine />
</div>
{/* //TODO:Squiggly line */}
{/* //TODO:Personal */}
<div className={theme.popoverItemWrapper()}>
{/* //TODO:Personal (replace options with Personal Options) */}
{isOpen && options.length !== 0 ? (
options.map((item, index) => (
<UserSelectItem
{...getItemProps({ item, index: 99 })}
key={item.value}
selected={isSelected(item)}
option={item}
hovered={highlightedIndex === index}
/>
))
) : (
<EmptyUserSelectItem />
)}
</div>
</ul>
</div>
);