nandi.uk
This repository has no description
feat: search link on profile cards tab
author
Pouria Delfanazari
date
(Jan 26, 2026, 2:43 PM -0800)
commit
a92686ae
a92686ae76a6ff0ff3462d2476ef708267ebe32e
parent
9336e2fe
9336e2fed28688a6e907d65c6b69a52672d2762b
+18
-104
+18
-3
src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx
+18
-3
src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx
···
1
1
'use client';
2
2
3
-
import { Container, Stack } from '@mantine/core';
3
+
import { Button, Container, Stack } from '@mantine/core';
4
4
import { Suspense } from 'react';
5
5
import CardsContainerContent from '../cardsContainerContent/CardsContainerContent';
6
6
import CardsContainerContentSkeleton from '../cardsContainerContent/Skeleton.CardsContainerContent';
7
7
import { CardFilters } from '@/features/cards/components/cardFilters/CardFilters';
8
+
import Link from 'next/link';
9
+
import { IoSearch } from 'react-icons/io5';
8
10
9
-
export default function CardsContainer({ handle }: { handle: string }) {
11
+
interface Props {
12
+
handle: string;
13
+
}
14
+
15
+
export default function CardsContainer(props: Props) {
10
16
return (
11
17
<Container p="xs" size="xl">
12
18
<Stack>
···
14
20
<CardFilters.SortSelect />
15
21
<CardFilters.TypeFilter />
16
22
<CardFilters.ViewToggle />
23
+
<Button
24
+
component={Link}
25
+
href={`/search/cards?handle:${props.handle}`}
26
+
variant="light"
27
+
color="gray"
28
+
rightSection={<IoSearch />}
29
+
>
30
+
Search
31
+
</Button>
17
32
</CardFilters.Root>
18
33
19
34
<Suspense fallback={<CardsContainerContentSkeleton />}>
20
-
<CardsContainerContent handle={handle} />
35
+
<CardsContainerContent handle={props.handle} />
21
36
</Suspense>
22
37
</Stack>
23
38
</Container>
-101
src/webapp/features/search/containers/searchResultsContainer/SearchResultsContainer.tsx
-101
src/webapp/features/search/containers/searchResultsContainer/SearchResultsContainer.tsx
···
1
-
import {
2
-
Box,
3
-
Container,
4
-
Group,
5
-
ScrollAreaAutosize,
6
-
Stack,
7
-
Tabs,
8
-
TabsList,
9
-
TabsPanel,
10
-
} from '@mantine/core';
11
-
import CardSearchResultsContainer from '../cardSearchResultsContainer/CardSearchResultsContainer';
12
-
import ProfileSearchResultsContainer from '../profileSearchResultsContainer/ProfileSearchResultsContainer';
13
-
import SearchBar from '../../components/searchBar/SearchBar';
14
-
import { BiCollection } from 'react-icons/bi';
15
-
import { FaRegNoteSticky } from 'react-icons/fa6';
16
-
import { MdOutlinePeopleAlt } from 'react-icons/md';
17
-
import CollectionSearchResultsContainer from '../collectionSearchResultsContainer/CollectionSearchResultsContainer';
18
-
import CollectionSearchResultsContainerSkeleton from '../collectionSearchResultsContainer/Skeleton.CollectionSearchResultsContainer';
19
-
import CardSearchResultsContainerSkeleton from '../cardSearchResultsContainer/Skeleton.CardSearchresultsContainerSkeleton';
20
-
import ProfileSearchResultsContainerSkeleton from '../profileSearchResultsContainer/Skeleton.ProfileSearchResultsContainer';
21
-
import SearchTabItem from '../../components/searchTabItem/SearchTabItem';
22
-
import { Suspense } from 'react';
23
-
import { UrlType } from '@semble/types';
24
-
25
-
interface Props {
26
-
query: string;
27
-
handle?: string;
28
-
urlType?: UrlType;
29
-
content?: string;
30
-
}
31
-
32
-
export default function SearchResultsContainer(props: Props) {
33
-
const activeTab = props.content || 'cards';
34
-
35
-
// build search params for each tab
36
-
const buildTabHref = (tabValue: string) => {
37
-
const params = new URLSearchParams();
38
-
if (props.query) params.set('query', props.query);
39
-
if (props.handle) params.set('handle', props.handle);
40
-
if (props.urlType) params.set('urlType', props.urlType);
41
-
42
-
const route = tabValue === 'cards' ? '/search' : `/search/${tabValue}`;
43
-
const queryString = params.toString();
44
-
return queryString ? `${route}?${queryString}` : route;
45
-
};
46
-
47
-
return (
48
-
<Container p={'xs'} pt={0} size={'sm'}>
49
-
<Tabs value={activeTab}>
50
-
<Box
51
-
style={{
52
-
position: 'sticky',
53
-
top: 55,
54
-
zIndex: 1,
55
-
}}
56
-
pt={'xs'}
57
-
bg={'var(--mantine-color-body'}
58
-
>
59
-
<Stack gap={'xs'}>
60
-
<SearchBar variant="compact" query={props.query} />
61
-
62
-
<ScrollAreaAutosize type="scroll">
63
-
<TabsList>
64
-
<Group gap={0} wrap="nowrap">
65
-
<SearchTabItem
66
-
value="cards"
67
-
label="Cards"
68
-
icon={<FaRegNoteSticky />}
69
-
/>
70
-
71
-
<SearchTabItem
72
-
value="collections"
73
-
label="Collections"
74
-
icon={<BiCollection />}
75
-
/>
76
-
77
-
<SearchTabItem
78
-
value="profiles"
79
-
label="Profiles"
80
-
icon={<MdOutlinePeopleAlt />}
81
-
/>
82
-
</Group>
83
-
</TabsList>
84
-
</ScrollAreaAutosize>
85
-
</Stack>
86
-
</Box>
87
-
88
-
<TabsPanel value="profiles">
89
-
<Container py={'xs'} px={0} size={'xl'}>
90
-
<Suspense
91
-
fallback={<ProfileSearchResultsContainerSkeleton />}
92
-
key={props.query}
93
-
>
94
-
<ProfileSearchResultsContainer query={props.query} />
95
-
</Suspense>
96
-
</Container>
97
-
</TabsPanel>
98
-
</Tabs>
99
-
</Container>
100
-
);
101
-
}