cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests 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', 'mt-12',
'z-20', 'z-20',
'absolute', 'absolute',
'px-1',
'py-1',
'flex-col', 'flex-col',
'gap-0.5', 'gap-0.5',
'min-w-full', 'min-w-full',
@ -39,6 +37,7 @@ export const userSelectTheme = tv({
'border-gray-200', 'border-gray-200',
'rounded-xl', 'rounded-xl',
], ],
popoverItemWrapper: ['flex', 'flex-col', 'px-2', 'py-2', 'gap-1'],
}, },
variants: { variants: {
isOpen: { isOpen: {

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

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