docs/src/layouts/Page.tsx at cooper/test · hmmhmmhm/docs

Repository navigation

History

import Fuse from "fuse.js";

import { useRouter } from "next/router";

import React, { useEffect, useMemo } from "react";

import tinykeys from "tinykeys";

import "twin.macro";

import { Footer } from "../components/Footer";

import { Modal } from "../components/Modal";

import { MobileNav, Nav } from "../components/Nav";

import { SearchModal } from "../components/Search";

import { Props as SEOProps, SEO } from "../components/SEO";

import { Sidebar } from "../components/Sidebar";

import { sidebarContent } from "../data/sidebar";

import { useStore } from "../store";

export interface Props {

seo?: SEOProps;

}

export const Page: React.FC<Props> = props => {

const { isSearchOpen, setIsSearchOpen } = useStore();

useEffect(() => {

const unsubscribe = tinykeys(window, {

"$mod+K": e => {

e.preventDefault();

setIsSearchOpen(!isSearchOpen);

});

return () => unsubscribe();

}, [isSearchOpen]);

const fuse = useMemo(() => {

const pages = sidebarContent.map(section => section.pages).flat();

const fuse = new Fuse(pages, {

keys: ["title", "tags", "category"],

includeScore: true,

});

return fuse;

}, [sidebarContent]);

return (

<Nav />

{props.children}

</main>

</div>

<Modal

title="Search Docs"

isOpen={isSearchOpen}

=> setIsSearchOpen(false)}

<SearchModal fuse={fuse} closeModal={() => setIsSearchOpen(false)} />

</Modal>

</>

);

};

FilesExpand file tree

Page.tsx

Latest commit

History

Page.tsx

File metadata and controls