akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 07:37:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use fancy menu for presets
Some checks failed
Deploy to GitHub Pages / build (push) Has been cancelled
Details
Deploy to GitHub Pages / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Misode
2025-01-28 01:14:35 +01:00
parent 111855f3ea
commit 59642b2ff5
7 changed files with 38 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/FancyMenu.tsx
View File

@@ -4,10 +4,12 @@ import { useFocus } from '../hooks/index.js'
interface Props {
placeholder?: string
relative?: boolean
class?: string
getResults: (search: string, close: () => void) => ComponentChildren
children: ComponentChildren
}
export function FancyMenu({ placeholder, getResults, children }: Props) {
export function FancyMenu({ placeholder, relative, class: clazz, getResults, children }: Props) {
const [active, setActive] = useFocus()
const [search, setSearch] = useState('')
const inputRef = useRef<HTMLInputElement>(null)
@@ -51,13 +53,13 @@ export function FancyMenu({ placeholder, getResults, children }: Props) {
}
}, [setActive, inputRef])
return <div class="px-1 relative">
return <div class={`px-1 ${relative ? 'relative' : ''}`}>
<div onClick={open}>
{children}
</div>
<div class={`fancy-menu absolute flex flex-col gap-2 p-2 rounded-lg drop-shadow-xl ${active ? '' : 'hidden'}`} onKeyDown={handleKeyDown}>
<div class={`fancy-menu absolute flex flex-col gap-2 p-2 rounded-lg drop-shadow-xl ${clazz} ${active ? '' : 'hidden'}`} onKeyDown={handleKeyDown}>
<input ref={inputRef} type="text" class="py-1 px-2 w-full rounded" value={search} placeholder={placeholder} onInput={(e) => setSearch((e.target as HTMLInputElement).value)} onClick={(e) => e.stopPropagation()} />
{active && <div ref={resultsRef} class="overflow-y-auto overscroll-none flex flex-col pr-2 h-96 max-h-max min-w-max">
{active && <div ref={resultsRef} class="fancy-menu-results overflow-y-auto overscroll-none flex flex-col pr-2 h-96 max-h-max w-max max-w-full">
{results}
</div>}
</div>