add: dropdown component

2025-07-11 18:04:26 +03:30
parent 20e8be4d09
commit cec8ac0041
6 changed files with 173 additions and 16 deletions
@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import ArrowDownIcon from '../icons/ArrowDownIcon';
+
+export interface DropdownOption {
+    id: string;
+    title: string;
+}
+
+type Props = {
+    title: string;
+    options: Array<DropdownOption>;
+    expanded?: boolean;
+    selectedId: string;
+    onSelectionChange: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void,
+} & React.HTMLAttributes<HTMLDivElement>
+
+function MultiOption({ title, options, expanded, selectedId, onSelectionChange, ...props }: Props) {
+    const [expand, setExpand] = useState(expanded);
+    const toggleExpand = () => {
+        setExpand((state) => !state);
+    }
+
+    return (
+        <div className="relative" {...props}>
+            <div
+                className="flex w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
+                tabIndex={0}
+                onClick={toggleExpand}
+                role='combobox'
+                aria-expanded={expanded}
+                aria-haspopup='listbox'
+                aria-controls=''
+                aria-label={title}>
+                <label
+                    htmlFor='content-select'
+                    className='inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]'>
+                    <span className='relative w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap'>
+                        {title}
+                    </span>
+                </label>
+
+
+                <div className='w-full text-sm2'>
+                    {options.filter(x => x.id === selectedId)[0]?.title ?? ''}
+                </div>
+
+                <ArrowDownIcon />
+            </div>
+
+            {expand &&
+                <div
+                    className='absolute top-full left-0 w-full mt-1 bg-white rounded-xl border border-solid border-neutral-200 shadow-lg z-10'
+                    role='listbox'
+                    aria-label={`${title} options`}>
+                    {options.map((v, i) => {
+                        return (
+                            <div
+                                onClick={(e) => {setExpand(() => false); onSelectionChange(e, i) }}
+                                key={v.id}
+                                data-selected={v.id === selectedId}
+                                className='flex items-center justify-end px-3 py-3 cursor-pointer hover:bg-gray-50 first:rounded-t-xl last:rounded-b-xl'
+                                tabIndex={0}
+                                role='option'
+                                aria-selected>
+                                <span
+                                    className='text-sm2 tracking-[0.13px] leading-5 w-full'
+                                >
+                                    {v.title}
+                                </span>
+                            </div>
+                        )
+                    })}
+                </div>
+            }
+        </div>
+    )
+}
+
+export default MultiOption