5e9bdfed70
* feat(composable-api): Step 1, new core package, pull basic state up higer (#2771) * feat(composable-api): Step 1, new core package, pull basic state up higher * Package cleanup, update core Readme * Cleanup to fix weird import behavior * Fix dependencies * Try fixing deps again * Track new package dist in CI * Make sure to restore core package * feat(composable-api): Step 2, composable DocSearchButton (#2772) * feat(composable-api): Step 1, new core package, pull basic state up higher * Package cleanup, update core Readme * Cleanup to fix weird import behavior * Fix dependencies * Try fixing deps again * Track new package dist in CI * Make sure to restore core package * feat(composable-api): Step 2, move DocSearchButton to be composable * Implement keyboard shortcuts props * Set modal package version * Render new DocSearchButton in react package * Bump allowed bundle size for now * feat(composable-api): Step 3, composable DocSearchModal (#2774) * feat(composable-api): Step 1, new core package, pull basic state up higher * Package cleanup, update core Readme * Cleanup to fix weird import behavior * Fix dependencies * Try fixing deps again * Track new package dist in CI * Make sure to restore core package * feat(composable-api): Step 2, move DocSearchButton to be composable * Implement keyboard shortcuts props * Set modal package version * Render new DocSearchButton in react package * Bump allowed bundle size for now * feat(composable-api): Step 3, make DocSearchModal composable * Clean up needed dependencies, add more bundle checks * fix: CI * add test cases to core package * add test cases to modal package * fixes after rebase * fix: lint * Memoize modal props to stabalize rendering * Dont track isModalActive in props * bump @docsearch/modal bundlesize * remove icons dir from @docsearch-modal * update version definition for @docsearch-react and @docsearch-modal * fix: lint
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
/* eslint-disable react/react-in-jsx-scope */
|
|
import { version } from '@docsearch/react';
|
|
import type { JSX } from 'react';
|
|
|
|
import './App.css';
|
|
import '@docsearch/css/dist/style.css';
|
|
|
|
import Basic from './examples/basic';
|
|
import BasicAskAI from './examples/basic-askai';
|
|
import Composable from './examples/composable';
|
|
import DynamicImportModal from './examples/dynamic-import-modal';
|
|
import MultiIndex from './examples/multi-index';
|
|
import WHitComponent from './examples/w-hit-component';
|
|
import WTransformItems from './examples/w-hit-transformItems';
|
|
import WResultsFooter from './examples/w-results-footer';
|
|
|
|
function App(): JSX.Element {
|
|
return (
|
|
<div className="body-container">
|
|
<div className="app-container">
|
|
<header className="app-header">
|
|
<h1 className="app-title">DocSearch v{version}</h1>
|
|
<p className="app-subtitle">Experience the power of intelligent documentation search</p>
|
|
</header>
|
|
|
|
<main>
|
|
<section className="demo-section">
|
|
<p className="section-description">basic search functionality</p>
|
|
<div className="search-wrapper">
|
|
<Basic />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="demo-section">
|
|
<p className="section-description">search with ask ai integration</p>
|
|
<div className="search-wrapper">
|
|
<BasicAskAI />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="demo-section">
|
|
<p className="section-description">custom hit rendering</p>
|
|
<div className="search-wrapper">
|
|
<WHitComponent />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="demo-section">
|
|
<p className="section-description">transform items before rendering</p>
|
|
<div className="search-wrapper">
|
|
<WTransformItems />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="demo-section">
|
|
<p className="section-description">multi index search</p>
|
|
<div className="search-wrapper">
|
|
<MultiIndex />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="demo-section">
|
|
<p className="section-description">composable</p>
|
|
<div className="search-wrapper">
|
|
<Composable />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="demo-section">
|
|
<p className="section-description">dynamically imported modal</p>
|
|
<div className="search-wrapper">
|
|
<DynamicImportModal />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="demo-section">
|
|
<p className="section-description">results footer component</p>
|
|
<div className="search-wrapper">
|
|
<WResultsFooter />
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|