starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-22 09:29:42 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Hook up theme and clear responses

Browse Source
This commit is contained in:
Gregory Schier
2023-02-24 12:13:30 -08:00
parent 4319ce9a7b
commit 5a9fb5a3a7
10 changed files with 154 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src-web/components/Dropdown.tsx
View File

@@ -56,76 +56,26 @@ export function DropdownMenuRadio({
);
}
export function Dropdown() {
const [bookmarksChecked, setBookmarksChecked] = useState(true);
const [urlsChecked, setUrlsChecked] = useState(false);
const [person, setPerson] = useState('pedro');
export interface DropdownProps {
children: ReactNode;
items: {
label: string;
onSelect?: () => void;
disabled?: boolean;
}[];
}
export function Dropdown({ children, items }: DropdownProps) {
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<Button aria-label="Customise options">
<HamburgerMenuIcon />
</Button>
</DropdownMenu.Trigger>
<DropdownMenuTrigger>{children}</DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent>
<DropdownMenuItem rightSlot={<HotKey>⌘T</HotKey>}>New Tab</DropdownMenuItem>
<DropdownMenuItem rightSlot={<HotKey>⌘N</HotKey>}>New Window</DropdownMenuItem>
<DropdownMenuItem disabled rightSlot={<HotKey>⇧⌘N</HotKey>}>
New Private Window
</DropdownMenuItem>
<DropdownMenu.Sub>
<DropdownMenuSubTrigger rightSlot={<ChevronRightIcon />}>
More Tools
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem rightSlot={<HotKey>⌘S</HotKey>}>Save Page As…</DropdownMenuItem>
<DropdownMenuItem>Create Shortcut…</DropdownMenuItem>
<DropdownMenuItem>Name Window…</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenu.Sub>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
checked={bookmarksChecked}
onCheckedChange={(v) => setBookmarksChecked(!!v)}
rightSlot={<HotKey>⌘B</HotKey>}
leftSlot={
<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
<CheckIcon />
</DropdownMenu.ItemIndicator>
}
>
Show Bookmarks
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={urlsChecked}
onCheckedChange={(v) => setUrlsChecked(!!v)}
leftSlot={
<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
<CheckIcon />
</DropdownMenu.ItemIndicator>
}
>
Show Full URLs
</DropdownMenuCheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuLabel>People</DropdownMenuLabel>
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
<DropdownMenuRadioItem value="pedro">Pedro Duarte</DropdownMenuRadioItem>
<DropdownMenuRadioItem className="DropdownMenuRadioItem" value="colm">
Colm Tuite
</DropdownMenuRadioItem>
</DropdownMenu.RadioGroup>
{items.map((item, i) => (
<DropdownMenuItem key={i} onSelect={() => item.onSelect?.()} disabled={item.disabled}>
{item.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu.Root>
@@ -157,7 +107,7 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenu
<DropdownMenu.Content
ref={ref}
align="start"
className={classnames(className, dropdownMenuClasses, 'mt-1')}
className={classnames(className, dropdownMenuClasses, 'm-0.5')}
{...props}
>
{children}
@@ -173,12 +123,14 @@ function DropdownMenuItem({
rightSlot,
className,
children,
disabled,
...props
}: DropdownMenuItemProps) {
return (
<DropdownMenu.Item
asChild
className={classnames(className, { 'opacity-30': props.disabled })}
disabled={disabled}
className={classnames(className, { 'opacity-30': disabled })}
{...props}
>
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
@@ -311,7 +263,7 @@ const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
)}
{...props}
>
<div className="w-7">{leftSlot}</div>
{leftSlot && <div className="w-7">{leftSlot}</div>}
<div>{children}</div>
{rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
</div>