Add search section to home page

chanzuckerberg · Jun 13, 2023 · 658a295 · 658a295
1 parent 4bb5022
commit 658a295
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/frontend/src/components/HomePage/HomePage.tsx b/frontend/src/components/HomePage/HomePage.tsx
@@ -1,10 +1,34 @@
+import { useTranslation } from 'next-i18next';
+
+import { Link } from '@/components/Link';
+import { SearchBar } from '@/components/SearchBar';
+import { SearchSection } from '@/components/SearchSection';
+import { useOpenSearchPage } from '@/hooks/useOpenSearchPage';
+
 import { FeaturedPlugins } from './FeaturedPlugins';
 import { HomePageLayout } from './HomePageLayout';
 
 export function HomePage() {
+  const { t } = useTranslation(['homePage']);
+  const openSearchPage = useOpenSearchPage();
+
   return (
     <HomePageLayout>
-      {/* TODO Home page search section */}
+      <SearchSection
+        title={t('homePage:discoverPlugins')}
+        subtitle={
+          <Link className="underline" href="/plugins">
+            {t('homePage:browseAll')}
+          </Link>
+        }
+        searchBar={
+          <SearchBar
+            inputProps={{ placeholder: t('homePage:searchBar') }}
+            onSubmit={(query) => openSearchPage(query)}
+            changeOnSubmit
+          />
+        }
+      />
       <FeaturedPlugins />
     </HomePageLayout>
   );