nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
containers
/
collectionsContainer
/
CollectionsContainer.tsx
1.9 kB
56 lines
1'use client';
2
3import { CloseButton, Container, Group, Stack, TextInput } from '@mantine/core';
4import { Suspense, useState } from 'react';
5import CollectionsContainerContent from '../collectionsContainerContent/CollectionsContainerContent';
6import CollectionsContainerContentSkeleton from '../collectionsContainerContent/Skeleton.collectionsContainerContent';
7import { CollectionFilters } from '../../components/collectionFilters/CollectionFilters';
8import { IoSearch } from 'react-icons/io5';
9import { useDebouncedValue } from '@mantine/hooks';
10
11interface Props {
12 handle: string;
13}
14
15export default function CollectionsContainer(props: Props) {
16 const [search, setSearch] = useState('');
17 const [debouncedSearch] = useDebouncedValue(search, 300);
18
19 return (
20 <Container p={0} size={'xl'}>
21 <Group justify="space-between" gap="xs" px="xs" pt="xs">
22 <CollectionFilters.Root>
23 <CollectionFilters.SortSelect />
24 <CollectionFilters.ViewToggle />
25 </CollectionFilters.Root>
26 <TextInput
27 variant="filled"
28 placeholder="Search..."
29 leftSection={<IoSearch />}
30 rightSection={
31 <CloseButton
32 aria-label="Clear input"
33 onClick={() => setSearch('')}
34 style={{ display: search ? undefined : 'none' }}
35 />
36 }
37 radius={'xl'}
38 value={search}
39 onChange={(e) => setSearch(e.currentTarget.value)}
40 w={160}
41 />
42 </Group>
43
44 <Container p="xs" size="xl">
45 <Stack>
46 <Suspense fallback={<CollectionsContainerContentSkeleton />}>
47 <CollectionsContainerContent
48 handle={props.handle}
49 query={debouncedSearch || undefined}
50 />
51 </Suspense>
52 </Stack>
53 </Container>
54 </Container>
55 );
56}