<script>
// Filter data with multiple checkboxes / input groups with $state and $derived
// https://dev.to/mandrasch/svelte-5-share-state-between-components-for-dummies-4gd2
// TODO: Use URL params and load selected values for checkboxes/selects, add pagination
import {
selectedColorsState,
selectedStylesState,
selectedSizeState,
searchTextState
} from './state.svelte';
import FilterCheckboxes from './FilterCheckboxes.svelte';
import FilterSelect from './FilterSelect.svelte';
import FilterInput from './FilterInput.svelte';
import ResultList from './ResultList.svelte';
const availableColorOptions = [
{
label: "Red",
value: "red"
},{
label: "Green",
value: "green"
},
{
label: "Beige",
value: "beige"
}
];
const availableStyleOptions = [
{
label: "Casual",
value: "casual"