feat(fs.dev): Initial search implementation

packages/freesewing.shared/components/layouts/default.js

@@ -8,6 +8,7 @@ import get from 'lodash.get'
 // Site components
 import Header from 'site/components/header'
 import Footer from 'site/components/footer'
+import Search from 'site/components/search'
 
 const iconSize= 48
 
@@ -59,7 +60,7 @@ const Breadcrumbs = ({ app, slug=false, title }) => {
 }
 
 
-const DefaultLayout = ({ app, title=false, children=[]}) => {
+const DefaultLayout = ({ app, title=false, children=[], search, setSearch}) => {
 
   const router = useRouter()
   router?.events?.on('routeChangeStart', () => app.startLoading())
@@ -117,6 +118,11 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
           </div>
         </section>
       </main>
+      {search && (
+        <div className={`fixed w-full min-h-screen bg-base-200 px-4 lg:py-24 top-0 z-20`}>
+          <Search app={app} search={search} setSearch={setSearch}/>
+        </div>
+      )}
       <Footer app={app} />
     </div>
   )

packages/freesewing.shared/components/wrappers/page.js

@@ -1,18 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { useSwipeable } from 'react-swipeable'
 import { useRouter } from 'next/router'
-//import Head from 'next/head'
-//import { useHotkeys } from 'react-hotkeys-hook'
-//import themes from '@/shared/themes'
-//import config from '@/site/freesewing.config.js'
+import { useHotkeys } from 'react-hotkeys-hook'
 // Shared components
 import Layout from 'shared/components/layouts/default'
-//import ProgressBar from '@/shared/components/progress-bar'
-//import Navbar from '@/shared/components/sections/navbar'
-//import Footer from '@/site/components/footer'
-//import useNavigation from '@/shared/hooks/useNavigation'
-//
-
 
 /* This component should wrap all page content */
 const AppWrapper= props => {
@@ -25,34 +16,20 @@ const AppWrapper= props => {
 
   const router = useRouter()
   props.app.setSlug(router.asPath.slice(1))
-  //const locale = router.locale || config.language
-  //const tree = useNavigation(locale, path)
 
   // Trigger search with Ctrl+k
-  //useHotkeys('ctrl+k', (evt) => {
-  //  evt.preventDefault()
-  //  setSearch(true)
-  //})
+  useHotkeys('ctrl+k', (evt) => {
+    evt.preventDefault()
+    setSearch(true)
+  })
 
-  //const [menu, setMenu] = useState(false)
-  //const [search, setSearch] = useState(false)
-
-  //useEffect(() => {
-  //  themeChange(false)
-  //}, [menu])
+  const [search, setSearch] = useState(false)
 
   const childProps = {
     app: props.app,
     title: props.title,
+    search, setSearch, toggleSearch: () => setSearch(!search),
   }
-  //  menu, setMenu, toggleMenu: () => setMenu(!menu),
-  //  search, setSearch, toggleSearch: () => setSearch(!search),
-  //  path, tree,
-  //  title: props.title,
-  //  t: props.t ? props.t : (x) => x,
-  //  locale, languages: config.languages,
-  //}
-
 
   return (
     <div