Bugfixes and updates

src/pages/homepage/components/SettingsButton/SettingsCard.tsx

@@ -0,0 +1,121 @@
+import {
+	type ComboboxItem,
+	Group,
+	MultiSelect,
+	Select,
+	Slider,
+	Stack,
+	Text,
+} from '@mantine/core';
+import { multiSelectClasses, selectClasses, sliderClasses, stackClasses } from 'styles';
+
+function SettingsCard({
+	categories,
+	sectionTitle,
+	filter,
+	setFilter,
+	sort,
+	setSort,
+	density,
+	setDensity,
+}: {
+	categories: ComboboxItem[];
+	sectionTitle: string;
+	filter: any;
+	setFilter: any;
+	sort: any;
+	setSort: any;
+	density: any;
+	setDensity: any;
+}) {
+	return (
+		<Stack
+			gap={0}
+			align='center'
+			justify='space-between'
+			className={stackClasses.menuStack}
+			classNames={stackClasses}
+			pos={'relative'}
+		>
+			<Text
+				style={{
+					fontSize: '.75rem',
+					paddingLeft: '.5rem',
+					paddingRight: '.5rem',
+					paddingTop: '.125rem',
+					paddingBottom: '.125rem',
+					borderRadius: 8,
+					position: 'absolute',
+					left: -12,
+					top: -8,
+					backgroundColor: 'var(--mantine-color-primary-0)',
+					color: 'var(--mantine-color-background-0)',
+				}}
+			>
+				{sectionTitle}
+			</Text>
+			<Text fz={'.875rem'} mt={'1rem'}>
+				Density
+			</Text>
+			<Stack m={0} p={0} gap={0} w={'90%'}>
+				<Slider
+					className={sliderClasses.default}
+					classNames={sliderClasses}
+					restrictToMarks
+					value={density}
+					onChange={(value) => setDensity(value)}
+					min={1}
+					max={8}
+				/>
+			</Stack>
+			<Group justify='center' mb={'.25rem'}>
+				<MultiSelect
+					label='Filter'
+					data={
+						categories.toSorted((a: ComboboxItem, b: ComboboxItem) =>
+							a.label.localeCompare(b.label),
+						) ?? []
+					}
+					placeholder={
+						filter.length > 0
+							? filter.length === 1
+								? filter[0]
+								: `${filter.length} ${sectionTitle.toLocaleLowerCase()}s selected`
+							: `No ${sectionTitle.toLocaleLowerCase()}s selected`
+					}
+					defaultValue={filter}
+					onChange={(data: string[]) => {
+						setFilter(data);
+					}}
+					classNames={multiSelectClasses}
+					comboboxProps={{
+						withinPortal: false,
+						position: 'top',
+					}}
+				/>
+				<Select
+					label={'Sorting'}
+					placeholder={`Sort ${sectionTitle}...`}
+					value={sort}
+					data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
+					classNames={{
+						root: selectClasses.menuSelectRoot,
+						input: selectClasses.menuSelectInput,
+						label: selectClasses.menuSelectLabel,
+						options: selectClasses.menuSelectOptions,
+						option: selectClasses.menuSelectOption,
+					}}
+					comboboxProps={{
+						withinPortal: false,
+						position: 'top',
+					}}
+					onChange={(_value, option: ComboboxItem) => {
+						setSort(option.value);
+					}}
+				/>
+			</Group>
+		</Stack>
+	);
+}
+
+export default SettingsCard;