[enhancement]: support serach on settings page

This commit is contained in:
Kendall Garner 2024-05-05 13:25:05 -07:00
parent 683bb0222c
commit 645697367d
No known key found for this signature in database
GPG key ID: 18D2767419676C87
21 changed files with 439 additions and 385 deletions

View file

@ -1,5 +1,7 @@
import { ReactNode } from 'react';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import { useSettingSearchContext } from '/@/renderer/features/settings/context/search-context';
import { Divider } from '@mantine/core';
export type SettingOption = {
control: ReactNode;
@ -10,20 +12,27 @@ export type SettingOption = {
};
interface SettingsSectionProps {
divider?: boolean;
options: SettingOption[];
}
export const SettingsSection = ({ options }: SettingsSectionProps) => {
export const SettingsSection = ({ divider, options }: SettingsSectionProps) => {
const keyword = useSettingSearchContext();
const hasKeyword = keyword !== '';
const values = options.filter(
(o) => !o.isHidden && (!hasKeyword || o.title.toLocaleLowerCase().includes(keyword)),
);
return (
<>
{options
.filter((o) => !o.isHidden)
.map((option) => (
<SettingsOptions
key={`option-${option.title}`}
{...option}
/>
))}
{values.map((option) => (
<SettingsOptions
key={`option-${option.title}`}
{...option}
/>
))}
{divider !== false && values.length > 0 && <Divider />}
</>
);
};