mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-11 16:53:05 +00:00
feat: add multiple way to show collections and links
This commit is contained in:
66
inertia/components/common/combo_list/combo_list.tsx
Normal file
66
inertia/components/common/combo_list/combo_list.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
|
||||
import { ComboListItem } from '~/components/common/combo_list/combo_list_item';
|
||||
|
||||
export type ValueWithIcon = {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
|
||||
export function ComboList({
|
||||
selectedValue,
|
||||
values,
|
||||
setValue,
|
||||
}: {
|
||||
selectedValue: string;
|
||||
values: ValueWithIcon[];
|
||||
setValue: (value: string) => void;
|
||||
}) {
|
||||
const combobox = useCombobox({
|
||||
onDropdownClose: () => combobox.resetSelectedOption(),
|
||||
});
|
||||
|
||||
const selectedOption = values.find((item) => item.value === selectedValue);
|
||||
|
||||
const options = values.map((item) => (
|
||||
<Combobox.Option value={item.value} key={item.value}>
|
||||
<ComboListItem emoji={item.icon} label={item.label} />
|
||||
</Combobox.Option>
|
||||
));
|
||||
|
||||
return (
|
||||
<Combobox
|
||||
store={combobox}
|
||||
withinPortal={false}
|
||||
onOptionSubmit={(val) => {
|
||||
setValue(val as string);
|
||||
combobox.closeDropdown();
|
||||
}}
|
||||
>
|
||||
<Combobox.Target>
|
||||
<InputBase
|
||||
component="button"
|
||||
type="button"
|
||||
pointer
|
||||
rightSection={<Combobox.Chevron />}
|
||||
onClick={() => combobox.toggleDropdown()}
|
||||
rightSectionPointerEvents="none"
|
||||
multiline
|
||||
>
|
||||
{selectedOption ? (
|
||||
<ComboListItem
|
||||
emoji={selectedOption.icon}
|
||||
label={selectedOption.label}
|
||||
/>
|
||||
) : (
|
||||
<Input.Placeholder>Pick value</Input.Placeholder>
|
||||
)}
|
||||
</InputBase>
|
||||
</Combobox.Target>
|
||||
|
||||
<Combobox.Dropdown>
|
||||
<Combobox.Options>{options}</Combobox.Options>
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
);
|
||||
}
|
||||
16
inertia/components/common/combo_list/combo_list_item.tsx
Normal file
16
inertia/components/common/combo_list/combo_list_item.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { Group, Text } from '@mantine/core';
|
||||
|
||||
export const ComboListItem = ({
|
||||
emoji,
|
||||
label,
|
||||
}: {
|
||||
emoji: React.ReactNode;
|
||||
label: string;
|
||||
}) => (
|
||||
<Group gap="xs" align="center">
|
||||
{emoji}
|
||||
<Text fz="sm" fw={500}>
|
||||
{label}
|
||||
</Text>
|
||||
</Group>
|
||||
);
|
||||
Reference in New Issue
Block a user