feat: proposal: some kind of home page

adevinta · Nov 3, 2023 · 9c28919 · 9c28919
1 parent 7d20e32
commit 9c28919
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 12 deletions.
diff --git a/src/components/CmdK/CmdKContext.tsx b/src/components/CmdK/CmdKContext.tsx
@@ -0,0 +1,10 @@
+import { createContext, useContext, Dispatch, SetStateAction } from 'react'
+
+const CmdKContext = createContext<{
+  isOpen: boolean
+  setIsOpen?: Dispatch<SetStateAction<boolean>>
+}>({ isOpen: false, setIsOpen: undefined })
+
+export const useCmdK = () => useContext(CmdKContext)
+
+export const CmdKProvider = CmdKContext.Provider
diff --git a/src/components/Shared/CmdK.tsx → src/components/CmdK/CmdKModal.tsx b/src/components/Shared/CmdK.tsx → src/components/CmdK/CmdKModal.tsx
diff --git a/src/components/CmdK/CmdKTrigger.tsx b/src/components/CmdK/CmdKTrigger.tsx
@@ -0,0 +1,35 @@
+import { Kbd } from '@spark-ui/kbd'
+import { Button } from '@spark-ui/button'
+import { Icon } from '@spark-ui/icon'
+import { IconButton } from '@spark-ui/icon-button'
+import { Search as SearchIcon } from '@spark-ui/icons/dist/icons/Search'
+import { cx } from 'class-variance-authority'
+import { useCmdK } from '@/components/CmdK/CmdKContext'
+
+export function CmdKTrigger({ isResponsive = true }) {
+  const { isOpen, setIsOpen } = useCmdK()
+
+  return (
+    <>
+      <Button
+        className={cx({ 'hidden lg:block': !!isResponsive, block: !isResponsive })}
+        design="outlined"
+        intent="basic"
+        onClick={() => setIsOpen(true)}
+      >
+        Search... <Kbd className="uppercase">cmd+K</Kbd>
+      </Button>
+      <IconButton
+        className={cx({ 'block lg:hidden': !!isResponsive, hidden: !isResponsive })}
+        aria-label="search"
+        intent="neutral"
+        design="ghost"
+        onClick={() => setIsOpen(true)}
+      >
+        <Icon>
+          <SearchIcon />
+        </Icon>
+      </IconButton>
+    </>
+  )
+}
diff --git a/src/components/CmdK/index.tsx b/src/components/CmdK/index.tsx
@@ -0,0 +1,2 @@
+export { useCmdK, CmdKProvider } from './CmdKContext'
+export { CmdKModal } from './CmdKModal'
diff --git a/src/components/Layout/LayoutHeader.tsx b/src/components/Layout/LayoutHeader.tsx
@@ -9,11 +9,13 @@ import Link from 'next/link'
 import { LogoIcon } from '@/components/Shared/Logo'
 import { LayoutContainer } from './LayoutContainer'
 import { LayoutNavButton } from './LayoutNavButton'
-import { CmdK } from '@/components/Shared/CmdK'
+import { CmdKTrigger } from '@/components/CmdK/CmdKTrigger'
 
-export type LayoutHeaderProps = ComponentPropsWithoutRef<'header'>
+export interface LayoutHeaderProps extends ComponentPropsWithoutRef<'header'> {
+  hasSearch?: boolean
+}
 
-export const LayoutHeader = ({ className, ...others }: LayoutHeaderProps) => {
+export const LayoutHeader = ({ hasSearch, className, ...others }: LayoutHeaderProps) => {
   return (
     <header
       className={cx(
@@ -43,7 +45,7 @@ export const LayoutHeader = ({ className, ...others }: LayoutHeaderProps) => {
             </a>
           </IconButton>
 
-          <CmdK />
+          {hasSearch && <CmdKTrigger />}
 
           <LayoutNavButton className="lg:hidden" intent="neutral" design="ghost" />
         </div>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -10,14 +10,20 @@ const nunito = Nunito_Sans({
 import { AppProps } from 'next/app'
 import { LayoutProgress } from '@/components/Layout/LayoutProgress'
 import { DefaultSeo } from '@/components/Shared/DefaultSeo'
+import { CmdKProvider, CmdKModal } from '@/components/CmdK'
+import { useState } from 'react'
 
 function App({ Component, pageProps }: AppProps) {
+  const [isOpen, setIsOpen] = useState(false)
   return (
     <ThemeProvider>
       <div className={nunito.className}>
         <DefaultSeo />
         <LayoutProgress />
-        <Component {...pageProps} />
+        <CmdKProvider value={{ isOpen, setIsOpen }}>
+          <Component {...pageProps} />
+          <CmdKModal />
+        </CmdKProvider>
       </div>
     </ThemeProvider>
   )

diff --git a/src/pages/docs/[category]/[[...slug]]/index.tsx b/src/pages/docs/[category]/[[...slug]]/index.tsx
@@ -53,7 +53,7 @@ const DocsDetailPage = ({
     <>
       <NextSeo title={doc.title} />
 
-      <LayoutHeader />
+      <LayoutHeader hasSearch />
 
       <LayoutContainer className="flex min-h-[calc(100dvh-var(--sz-64))] w-full">
         <LayoutSideNav />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,20 +1,48 @@
 import { NextSeo } from 'next-seo'
 
 import { LayoutHeader } from '@/components/Layout/LayoutHeader'
-import { LayoutContainer } from '@/components/Layout/LayoutContainer'
+import { useCmdK } from '@/components/CmdK'
+import { CmdKTrigger } from '@/components/CmdK/CmdKTrigger'
+
+const boxShadow = [
+  'inset 0em 0 3em rgb(var(--colors-surface))',
+  'inset 0 -1em 3em rgb(var(--colors-support))',
+  'inset 1em 0 3em rgb(var(--colors-alert))',
+  'inset -1em 0 3em rgb(var(--colors-accent))',
+  'inset 0 1em 3em rgb(var(--colors-main))',
+  '0 0 2em rgb(var(--colors-surface))',
+  '1em 0 30em rgb(var(--colors-accent))',
+  '0 1em 10em rgb(var(--colors-accent))',
+  '-1em 0 30em rgb(var(--colors-alert))',
+  '0 -1em 10em rgb(var(--colors-alert))',
+].join(',')
 
 export default function IndexPage() {
+  const { isOpen, setIsOpen } = useCmdK()
   return (
     <>
       <NextSeo title="Home" />
 
       <LayoutHeader />
 
-      <LayoutContainer className="my-xl flex flex-col gap-sm" asChild>
-        <main>
-          <h1 className="text-display-2">Home</h1>
-        </main>
-      </LayoutContainer>
+      <main>
+        <div className="fixed h-[calc(100dvh-64px)] w-full overflow-hidden">
+          <div className="ml-[-50%] mr-[-50%] aspect-square w-[200%] pt-[75dvh]">
+            <div
+              className="flex aspect-square w-full rounded-full text-[10em]"
+              style={{ boxShadow }}
+            />
+          </div>
+        </div>
+        <div className="absolute flex h-[calc(100dvh-64px)] w-full flex-col items-center justify-center">
+          <span className="text-[3rem] font-[900] sm:text-[5rem] md:text-[7rem] lg:text-[10rem]">
+            @spark-ui
+          </span>
+          <div>
+            <CmdKTrigger isResponsive={false} />
+          </div>
+        </div>
+      </main>
     </>
   )
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { useCmdK, CmdKProvider } from './CmdKContext'
		export { CmdKModal } from './CmdKModal'