Skip to content

Commit 18f2004

Browse files
rjborbarjborba
committed
feat(search): make oramasearchbox as a client component
1 parent 446de4a commit 18f2004

File tree

4 files changed

+141
-609
lines changed

4 files changed

+141
-609
lines changed

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

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,25 @@
1+
'use client';
2+
13
import { OramaSearchBox, OramaSearchButton } from '@orama/react-components';
24
import { useTheme } from 'next-themes';
3-
import type { FC } from 'react';
4-
import { useState } from 'react';
5-
import '@orama/searchbox/dist/index.css';
5+
import { type FC } from 'react';
66

77
import {
88
ORAMA_CLOUD_ENDPOINT,
99
ORAMA_CLOUD_API_KEY,
1010
} from '@/next.constants.mjs';
1111

12-
export const SearchButton: FC = () => {
13-
const [isOpen, setIsOpen] = useState(false);
12+
const SearchButton: FC = () => {
1413
const { resolvedTheme } = useTheme();
1514
const colorScheme = resolvedTheme as 'light' | 'dark';
1615

1716
return (
1817
<>
19-
<OramaSearchButton
20-
id="orama-ui-search-button"
21-
colorScheme={colorScheme}
22-
onClick={() => setIsOpen(true)}
23-
>
18+
<OramaSearchButton style={{ flexGrow: 1 }} colorScheme={colorScheme}>
2419
Search
2520
</OramaSearchButton>
2621

2722
<OramaSearchBox
28-
id="orama-ui-searchbox"
29-
open={isOpen}
30-
onSearchboxClosed={() => setIsOpen(false)}
3123
colorScheme={colorScheme}
3224
index={{ api_key: ORAMA_CLOUD_API_KEY, endpoint: ORAMA_CLOUD_ENDPOINT }}
3325
facetProperty="siteSection"
@@ -52,3 +44,5 @@ export const SearchButton: FC = () => {
5244
</>
5345
);
5446
};
47+
48+
export default SearchButton;

‎apps/site/components/Containers/NavBar/index.tsx‎

Lines changed: 82 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,97 @@
1-
"use client";
1+
'use client';
22

3-
import Hamburger from "@heroicons/react/24/solid/Bars3Icon";
4-
import XMark from "@heroicons/react/24/solid/XMarkIcon";
5-
import * as Label from "@radix-ui/react-label";
6-
import { useState } from "react";
7-
import type { FC, ComponentProps, HTMLAttributeAnchorTarget } from "react";
3+
import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
4+
import XMark from '@heroicons/react/24/solid/XMarkIcon';
5+
import * as Label from '@radix-ui/react-label';
6+
import dynamic from 'next/dynamic';
7+
import { useState } from 'react';
8+
import type { FC, ComponentProps, HTMLAttributeAnchorTarget } from 'react';
89

9-
import LanguageDropdown from "@/components/Common/LanguageDropDown";
10-
import { SearchButton } from "@/components/Common/Search";
11-
import ThemeToggle from "@/components/Common/ThemeToggle";
12-
import NavItem from "@/components/Containers/NavBar/NavItem";
13-
import GitHub from "@/components/Icons/Social/GitHub";
14-
import Link from "@/components/Link";
15-
import WithNodejsLogo from "@/components/withNodejsLogo";
16-
import type { FormattedMessage } from "@/types";
10+
import LanguageDropdown from '@/components/Common/LanguageDropDown';
11+
import ThemeToggle from '@/components/Common/ThemeToggle';
12+
import NavItem from '@/components/Containers/NavBar/NavItem';
13+
import GitHub from '@/components/Icons/Social/GitHub';
14+
import Link from '@/components/Link';
15+
import WithNodejsLogo from '@/components/withNodejsLogo';
16+
import type { FormattedMessage } from '@/types';
1717

18-
import style from "./index.module.css";
18+
import style from './index.module.css';
19+
20+
const SearchButton = dynamic(() => import('@/components/Common/Search'), {
21+
ssr: false,
22+
});
1923

2024
const navInteractionIcons = {
21-
show: <Hamburger className={style.navInteractionIcon} />,
22-
close: <XMark className={style.navInteractionIcon} />,
25+
show: <Hamburger className={style.navInteractionIcon} />,
26+
close: <XMark className={style.navInteractionIcon} />,
2327
};
2428

2529
type NavbarProps = {
26-
navItems: Array<{
27-
text: FormattedMessage;
28-
link: string;
29-
target?: HTMLAttributeAnchorTarget | undefined;
30-
}>;
31-
languages: ComponentProps<typeof LanguageDropdown>;
32-
onThemeTogglerClick: () => void;
30+
navItems: Array<{
31+
text: FormattedMessage;
32+
link: string;
33+
target?: HTMLAttributeAnchorTarget | undefined;
34+
}>;
35+
languages: ComponentProps<typeof LanguageDropdown>;
36+
onThemeTogglerClick: () => void;
3337
};
3438

3539
const NavBar: FC<NavbarProps> = ({
36-
navItems,
37-
languages,
38-
onThemeTogglerClick,
40+
navItems,
41+
languages,
42+
onThemeTogglerClick,
3943
}) => {
40-
const [isMenuOpen, setIsMenuOpen] = useState(false);
41-
42-
return (
43-
<nav className={`${style.container}`}>
44-
<div className={style.nodeIconAndMobileItemsToggler}>
45-
<Link className={style.nodeIconWrapper} href="/" aria-label="Home">
46-
<WithNodejsLogo />
47-
</Link>
48-
49-
<Label.Root
50-
onClick={() => setIsMenuOpen((prev) => !prev)}
51-
className={style.sidebarItemTogglerLabel}
52-
htmlFor="sidebarItemToggler"
53-
>
54-
{navInteractionIcons[isMenuOpen ? "close" : "show"]}
55-
</Label.Root>
56-
</div>
57-
58-
<input className="peer hidden" id="sidebarItemToggler" type="checkbox" />
59-
60-
<div className={`${style.main} peer-checked:flex`}>
61-
<div className={style.navItems}>
62-
{navItems.map(({ text, link, target }) => (
63-
<NavItem key={link} href={link} target={target}>
64-
{text}
65-
</NavItem>
66-
))}
67-
</div>
68-
69-
<div className={style.actionsWrapper}>
70-
<SearchButton />
71-
72-
<ThemeToggle onClick={onThemeTogglerClick} />
73-
74-
<LanguageDropdown
75-
onChange={languages.onChange}
76-
availableLanguages={languages.availableLanguages}
77-
currentLanguage={languages.currentLanguage}
78-
/>
79-
80-
<Link
81-
className={style.ghIconWrapper}
82-
href="https://github.com/nodejs/node"
83-
aria-label="Node.js Github"
84-
>
85-
<GitHub />
86-
</Link>
87-
</div>
88-
</div>
89-
</nav>
90-
);
44+
const [isMenuOpen, setIsMenuOpen] = useState(false);
45+
46+
return (
47+
<nav className={`${style.container}`}>
48+
<div className={style.nodeIconAndMobileItemsToggler}>
49+
<Link className={style.nodeIconWrapper} href="/" aria-label="Home">
50+
<WithNodejsLogo />
51+
</Link>
52+
53+
<Label.Root
54+
onClick={() => setIsMenuOpen(prev => !prev)}
55+
className={style.sidebarItemTogglerLabel}
56+
htmlFor="sidebarItemToggler"
57+
>
58+
{navInteractionIcons[isMenuOpen ? 'close' : 'show']}
59+
</Label.Root>
60+
</div>
61+
62+
<input className="peer hidden" id="sidebarItemToggler" type="checkbox" />
63+
64+
<div className={`${style.main} peer-checked:flex`}>
65+
<div className={style.navItems}>
66+
{navItems.map(({ text, link, target }) => (
67+
<NavItem key={link} href={link} target={target}>
68+
{text}
69+
</NavItem>
70+
))}
71+
</div>
72+
73+
<div className={style.actionsWrapper}>
74+
<SearchButton />
75+
76+
<ThemeToggle onClick={onThemeTogglerClick} />
77+
78+
<LanguageDropdown
79+
onChange={languages.onChange}
80+
availableLanguages={languages.availableLanguages}
81+
currentLanguage={languages.currentLanguage}
82+
/>
83+
84+
<Link
85+
className={style.ghIconWrapper}
86+
href="https://github.com/nodejs/node"
87+
aria-label="Node.js Github"
88+
>
89+
<GitHub />
90+
</Link>
91+
</div>
92+
</div>
93+
</nav>
94+
);
9195
};
9296

9397
export default NavBar;

‎apps/site/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,7 @@
4040
"@mdx-js/mdx": "^3.0.1",
4141
"@nodevu/core": "~0.1.0",
4242
"@orama/highlight": "^0.1.6",
43-
"@orama/react-components": "^0.0.18",
44-
"@orama/searchbox": "^1.0.0-rc48",
43+
"@orama/react-components": "^0.0.22",
4544
"@oramacloud/client": "^1.3.2",
4645
"@radix-ui/react-accessible-icon": "^1.0.3",
4746
"@radix-ui/react-avatar": "^1.0.4",

0 commit comments

Comments
 (0)