add missing new app dir

OpenBeta · Oct 23, 2023 · d573ac5 · d573ac5
1 parent 944f698
commit d573ac5
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 0 deletions.
diff --git a/src/app/components/DesktopHeader.tsx b/src/app/components/DesktopHeader.tsx
@@ -0,0 +1,57 @@
+'use client'
+import { signIn } from 'next-auth/react'
+
+import { Logo } from 'app/header'
+import { XSearchMinimal } from '@/components/search/XSearch'
+import { NavMenuItem, NavMenuItemProps } from '@/components/ui/NavMenuButton'
+import GitHubStars from '@/components/GitHubStars'
+
+export const DesktopHeader: React.FC = () => {
+  const navListDefault: NavMenuItemProps[] = [
+    {
+      to: 'https://discord.gg/ptpnWWNkJx',
+      label: 'Discord'
+    },
+    {
+      to: '/about',
+      label: 'About'
+    },
+    {
+      to: 'https://opencollective.com/openbeta/contribute/t-shirt-31745',
+      label: 'T-shirts'
+    },
+    {
+      to: 'https://docs.openbeta.io',
+      label: 'Docs'
+    },
+    {
+      onClick: () => { void signIn('auth0', { callbackUrl: '/api/user/me' }) },
+      label: 'Login',
+      type: 'rounded-btn border bg-accent'
+    }
+  ]
+
+  const menu = navListDefault.map(
+    ({ onClick, label, to, type }: NavMenuItemProps, index) => (
+      <NavMenuItem
+        key={index}
+        onClick={onClick}
+        type={type}
+        label={label}
+        to={to}
+      />)
+  )
+
+  menu.unshift(
+    <GitHubStars key='gh-button' />
+  )
+
+  return (
+    <header className='hidden lg:flex items-center justify-between'>
+      <div className='flex items-center gap-6'><Logo />
+        <XSearchMinimal />
+      </div>
+      <div className='menu menu-vertical lg:menu-horizontal rounded-box gap-2'>{menu}</div>
+    </header>
+  )
+}
diff --git a/src/app/components/MobileHeader.tsx b/src/app/components/MobileHeader.tsx
@@ -0,0 +1,18 @@
+'use client'
+import { useSession } from 'next-auth/react'
+import { Logo } from 'app/header'
+import { XSearchMinimal } from '@/components/search/XSearch'
+import { AuthenticatedNav13, LoginButton, More } from '@/components/MobileAppBar'
+
+export const MobileHeader: React.FC = () => {
+  const { status } = useSession()
+  const nav = status === 'authenticated' ? <AuthenticatedNav13 /> : <LoginButton />
+  return (
+    <header className='flex lg:hidden items-center justify-between gap-6'>
+      <Logo />
+      <XSearchMinimal />
+      {nav}
+      <More />
+    </header>
+  )
+}
diff --git a/src/app/components/NextAuthProvider.tsx b/src/app/components/NextAuthProvider.tsx
@@ -0,0 +1,10 @@
+'use client'
+import { SessionProvider } from 'next-auth/react'
+
+interface Props {
+  children?: React.ReactNode
+}
+
+export const NextAuthProvider: React.FC<Props> = ({ children }) => {
+  return <SessionProvider>{children}</SessionProvider>
+}
diff --git a/src/app/footer.tsx b/src/app/footer.tsx
@@ -0,0 +1,3 @@
+export default function Footer (): any {
+  return (<div>footer</div>)
+}
diff --git a/src/app/global.css b/src/app/global.css
@@ -0,0 +1,8 @@
+@import '../styles/algolia.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.aa-hidden-mobile-trigger-btn {
+  @apply hidden !important;
+}
diff --git a/src/app/header.tsx b/src/app/header.tsx
@@ -0,0 +1,21 @@
+import Link from 'next/link'
+import OpenBetaLogo from '@/assets/brand/openbeta-logo'
+import { DesktopHeader } from './components/DesktopHeader'
+import { MobileHeader } from './components/MobileHeader'
+
+export default async function Header (): Promise<any> {
+  return (
+    <div className='max-w-5xl mx-auto px-4 xl:px-0'>
+      <MobileHeader />
+      <DesktopHeader />
+    </div>
+  )
+}
+
+export const Logo: React.FC = () => {
+  return (
+    <Link href='/' className=''>
+      <OpenBetaLogo />
+    </Link>
+  )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,29 @@
+import './global.css'
+import Header from './header'
+import Footer from './footer'
+import { NextAuthProvider } from './components/NextAuthProvider'
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js'
+}
+
+export default function RootLayout ({
+  children
+}: {
+  children: React.ReactNode
+}): any {
+  return (
+    <html lang='en'>
+      <body className='mx-auto'>
+        <NextAuthProvider>
+          <Header />
+        </NextAuthProvider>
+        <div>
+          {children}
+        </div>
+        <Footer />
+      </body>
+    </html>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,3 @@
+export default async function Home (): Promise<any> {
+  return (<div>home page</div>)
+}