Skip to content

Commit 83a5e6e

Browse files
avivkelleravivkeller
committed
fixup!
1 parent c8c51c1 commit 83a5e6e

File tree

11 files changed

+239
-175
lines changed

11 files changed

+239
-175
lines changed

‎apps/site/components/Common/Searchbox/index.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@reference "../../../styles/index.css";
2+
3+
.searchResultsContainer {
4+
@apply flex
5+
grow
6+
flex-col
7+
overflow-y-auto;
8+
}

‎apps/site/components/Common/Searchbox/index.tsx‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
'use client';
22

3-
import Search from '@node-core/ui-components/Common/Search';
3+
import ChatTrigger from '@node-core/ui-components/Common/Search/Chat/Trigger';
44
import SearchModal from '@node-core/ui-components/Common/Search/Modal';
5+
import SearchResults from '@node-core/ui-components/Common/Search/Results';
6+
import SearchSuggestions from '@node-core/ui-components/Common/Search/Suggestions';
57
import { useTranslations } from 'next-intl';
68
import { useState, type FC } from 'react';
79

810
import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
911

1012
import type { Document } from './DocumentLink';
1113
import { Footer } from './Footer';
14+
import styles from './index.module.css';
1215
import { oramaClient } from './orama-client';
1316
import { SearchItem } from './SearchItem';
1417
import { SlidingChatPanel } from './SlidingChatPanel';
@@ -17,34 +20,38 @@ const Searchbox: FC = () => {
1720
const t = useTranslations();
1821
const [mode, setMode] = useState<'chat' | 'search'>('search');
1922

23+
const sharedProps = {
24+
searchParams: DEFAULT_ORAMA_QUERY_PARAMS,
25+
tabIndex: mode === 'search' ? 0 : -1,
26+
'aria-hidden': mode === 'chat',
27+
};
28+
2029
return (
2130
<SearchModal
2231
client={oramaClient}
2332
placeholder={t('components.search.searchPlaceholder')}
2433
>
25-
<Search
26-
input={{
27-
placeholder: t('components.search.searchPlaceholder'),
28-
ariaLabel: t('components.search.searchPlaceholder'),
29-
}}
30-
results={{
31-
suggestions: [
32-
t('components.search.suggestionOne'),
33-
t('components.search.suggestionTwo'),
34-
t('components.search.suggestionThree'),
35-
],
36-
suggestionsTitle: t('components.search.suggestions'),
37-
noResultsTitle: t('components.search.noResultsFoundFor'),
38-
chatLabel: t('components.search.chatButtonLabel'),
39-
onChat: () => setMode('chat'),
40-
onHit: hit => (
34+
<div className={styles.searchResultsContainer}>
35+
<ChatTrigger onClick={() => setMode('chat')}>
36+
{t('components.search.chatButtonLabel')}
37+
</ChatTrigger>
38+
<SearchResults
39+
noResultsTitle={t('components.search.noResultsFoundFor')}
40+
onHit={hit => (
4141
<SearchItem document={hit.document as Document} mode={mode} />
42-
),
43-
}}
44-
tabIndex={mode === 'search' ? 0 : -1}
45-
aria-hidden={mode === 'chat'}
46-
searchParams={DEFAULT_ORAMA_QUERY_PARAMS}
47-
/>
42+
)}
43+
{...sharedProps}
44+
>
45+
<SearchSuggestions
46+
suggestions={[
47+
t('components.search.suggestionOne'),
48+
t('components.search.suggestionTwo'),
49+
t('components.search.suggestionThree'),
50+
]}
51+
label={t('components.search.suggestions')}
52+
/>
53+
</SearchResults>
54+
</div>
4855
<Footer />
4956
<SlidingChatPanel
5057
open={mode === 'chat'}

‎packages/ui-components/src/Common/Search/Chat/Trigger/index.module.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@reference "../../../../styles/index.css";
2+
3+
.chatButtonWrapper {
4+
@apply block
5+
border-b
6+
border-neutral-200
7+
p-2
8+
dark:border-neutral-900;
9+
10+
svg {
11+
@apply size-4;
12+
}
13+
}
14+
15+
.chatButton {
16+
@apply flex
17+
w-full
18+
cursor-pointer
19+
items-center
20+
gap-2
21+
rounded-lg
22+
border
23+
border-transparent
24+
bg-transparent
25+
p-3
26+
text-sm
27+
duration-300
28+
hover:bg-neutral-300
29+
focus-visible:border-green-600
30+
focus-visible:outline-none
31+
motion-safe:transition-colors
32+
dark:hover:bg-neutral-900
33+
dark:focus-visible:border-green-400;
34+
}
35+
36+
.chatButtonWithSearch {
37+
@apply bg-neutral-300
38+
dark:bg-neutral-900;
39+
}

‎packages/ui-components/src/Common/Search/Chat/Trigger/index.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { SparklesIcon } from '@heroicons/react/24/outline';
2+
import { SlidingPanel } from '@orama/ui/components/SlidingPanel';
3+
import { useSearch } from '@orama/ui/hooks/useSearch';
4+
import classNames from 'classnames';
5+
import type { ComponentProps, FC } from 'react';
6+
7+
import styles from './index.module.css';
8+
9+
const ChatTrigger: FC<ComponentProps<typeof SlidingPanel.Trigger>> = ({
10+
children,
11+
...props
12+
}) => {
13+
const {
14+
context: { searchTerm },
15+
} = useSearch();
16+
17+
return (
18+
<div className={styles.chatButtonWrapper}>
19+
<SlidingPanel.Trigger
20+
className={classNames(styles.chatButton, {
21+
[styles.chatButtonWithSearch]: searchTerm,
22+
})}
23+
initialPrompt={searchTerm || undefined}
24+
data-focus-on-arrow-nav
25+
{...props}
26+
>
27+
<SparklesIcon />
28+
<span>
29+
{searchTerm ? `${searchTerm} - ` : ''}
30+
{children}
31+
</span>
32+
</SlidingPanel.Trigger>
33+
</div>
34+
);
35+
};
36+
37+
export default ChatTrigger;

‎packages/ui-components/src/Common/Search/Modal/index.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,21 @@
33
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
44
import type { OramaCloud } from '@orama/core';
55
import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
6-
import type { FC, PropsWithChildren } from 'react';
6+
import type { ComponentProps, FC, PropsWithChildren } from 'react';
77

88
import styles from './index.module.css';
9+
import SearchInput from '../Input';
910

10-
const SearchModal: FC<
11-
PropsWithChildren<{ client: OramaCloud | null; placeholder: string }>
12-
> = ({ children, client, placeholder }) => (
11+
type SearchModalProps = {
12+
client: OramaCloud | null;
13+
placeholder: string;
14+
} & ComponentProps<typeof SearchInput>;
15+
16+
const SearchModal: FC<PropsWithChildren<SearchModalProps>> = ({
17+
children,
18+
client,
19+
placeholder,
20+
}) => (
1321
<div className={styles.searchboxContainer}>
1422
<Modal.Root>
1523
<Modal.Trigger
@@ -34,6 +42,10 @@ const SearchModal: FC<
3442
<ChatRoot client={client} askOptions={{ throttle_delay: 50 }}>
3543
<Modal.Inner className={styles.modalInner}>
3644
<Modal.Content className={styles.modalContent}>
45+
<SearchInput
46+
placeholder={placeholder}
47+
ariaLabel={placeholder}
48+
/>
3749
{children}
3850
</Modal.Content>
3951
</Modal.Inner>

‎packages/ui-components/src/Common/Search/Results/Empty/index.tsx‎

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,24 @@
1-
import { SparklesIcon } from '@heroicons/react/24/outline';
21
import { SearchResults, Suggestions } from '@orama/ui/components';
3-
import type { ComponentProps, FC } from 'react';
2+
import type { ComponentProps, FC, PropsWithChildren } from 'react';
43

54
import styles from './index.module.css';
65

76
type EmptyResultsProps = {
8-
suggestions: Array<string>;
9-
suggestionsTitle?: string;
10-
noResultsTitle?: string;
7+
label?: string;
118
} & Omit<ComponentProps<typeof Suggestions.Item>, 'children'>;
129

13-
const SearchResultsEmpty: FC<EmptyResultsProps> = ({
14-
suggestions,
15-
noResultsTitle,
16-
suggestionsTitle,
17-
...props
10+
const SearchResultsEmpty: FC<PropsWithChildren<EmptyResultsProps>> = ({
11+
children,
12+
label,
1813
}) => (
1914
<SearchResults.NoResults>
2015
{term =>
2116
term ? (
2217
<div className={styles.noResultsWrapper}>
23-
{noResultsTitle} "{term}"
18+
{label} "{term}"
2419
</div>
2520
) : (
26-
<Suggestions.Wrapper className={styles.suggestionsWrapper}>
27-
<p className={styles.suggestionsTitle}>{suggestionsTitle}</p>
28-
{suggestions.map(suggestion => (
29-
<Suggestions.Item {...props} className={styles.suggestionItem}>
30-
<SparklesIcon />
31-
{suggestion}
32-
</Suggestions.Item>
33-
))}
34-
</Suggestions.Wrapper>
21+
children
3522
)
3623
}
3724
</SearchResults.NoResults>

‎packages/ui-components/src/Common/Search/Results/index.module.css‎

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,5 @@
11
@reference "../../../styles/index.css";
22

3-
.searchResultsContainer {
4-
@apply flex
5-
grow
6-
flex-col
7-
overflow-y-auto;
8-
}
9-
10-
.chatButtonWrapper {
11-
@apply block
12-
border-b
13-
border-neutral-200
14-
p-2
15-
dark:border-neutral-900;
16-
17-
svg {
18-
@apply size-4;
19-
}
20-
}
21-
22-
.chatButton {
23-
@apply flex
24-
w-full
25-
cursor-pointer
26-
items-center
27-
gap-2
28-
rounded-lg
29-
border
30-
border-transparent
31-
bg-transparent
32-
p-3
33-
text-sm
34-
duration-300
35-
hover:bg-neutral-300
36-
focus-visible:border-green-600
37-
focus-visible:outline-none
38-
motion-safe:transition-colors
39-
dark:hover:bg-neutral-900
40-
dark:focus-visible:border-green-400;
41-
}
42-
43-
.chatButtonWithSearch {
44-
@apply bg-neutral-300
45-
dark:bg-neutral-900;
46-
}
47-
483
.searchResultsWrapper {
494
@apply grow-0
505
overflow-y-auto

0 commit comments

Comments
 (0)