diff --git a/src/app/players/[id]/page.tsx b/src/app/(home)/players/[id]/page.tsx
similarity index 95%
rename from src/app/players/[id]/page.tsx
rename to src/app/(home)/players/[id]/page.tsx
index ec4f201..280ffd0 100644
--- a/src/app/players/[id]/page.tsx
+++ b/src/app/(home)/players/[id]/page.tsx
@@ -1,8 +1,8 @@
-import { UserInfo } from '@/app/players/[id]/user'
import { auth } from '@/server/auth'
import { RANKED_CHANNEL, VANILLA_CHANNEL } from '@/shared/constants'
import { HydrateClient, api } from '@/trpc/server'
import { Suspense } from 'react'
+import { UserInfo } from './user'
export default async function PlayerPage({
params,
diff --git a/src/app/players/[id]/user.tsx b/src/app/(home)/players/[id]/user.tsx
similarity index 99%
rename from src/app/players/[id]/user.tsx
rename to src/app/(home)/players/[id]/user.tsx
index 4add093..67c7860 100644
--- a/src/app/players/[id]/user.tsx
+++ b/src/app/(home)/players/[id]/user.tsx
@@ -33,7 +33,6 @@ import {
Filter,
IceCreamCone,
InfoIcon,
- MinusCircle,
ShieldHalf,
Star,
Trophy,
diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
new file mode 100644
index 0000000..fc95681
--- /dev/null
+++ b/src/app/_components/header.tsx
@@ -0,0 +1,170 @@
+import { ThemeToggle } from 'fumadocs-ui/components/layout/theme-toggle'
+import type { HomeLayoutProps } from 'fumadocs-ui/layouts/home'
+import type { LinkItemType } from 'fumadocs-ui/layouts/links'
+import { replaceOrDefault } from 'fumadocs-ui/layouts/shared'
+import { ChevronDown } from 'lucide-react'
+import Link from 'next/link'
+import { Fragment } from 'react'
+import { Menu, MenuContent, MenuLinkItem, MenuTrigger } from './home/menu'
+import {
+ NavbarLink,
+ NavbarMenu,
+ NavbarMenuContent,
+ NavbarMenuLink,
+ NavbarMenuTrigger,
+} from './home/navbar'
+import { Navbar } from './home/navbar'
+import { LargeSearchToggle, SearchToggle } from './search-toggle'
+
+export function Header({
+ nav: { enableSearch = true, ...nav } = {},
+ finalLinks,
+ themeSwitch,
+}: HomeLayoutProps & {
+ finalLinks: LinkItemType[]
+}) {
+ const navItems = finalLinks.filter((item) =>
+ ['nav', 'all'].includes(item.on ?? 'all')
+ )
+ const menuItems = finalLinks.filter((item) =>
+ ['menu', 'all'].includes(item.on ?? 'all')
+ )
+
+ return (
+
+
+ {nav.title}
+
+ {nav.children}
+
+ )
+}
+
+function NavbarLinkItem({
+ item,
+ ...props
+}: {
+ item: LinkItemType
+ className?: string
+}) {
+ if (item.type === 'custom') return {child.children}
+
+ const {
+ banner = child.icon ? (
+
+ {rest.children ?? (
+ <>
+ {banner}
+
+ )
+ })
+
+ return (
+
+
+ {item.url ? {item.text} : item.text}
+
+ {children}
+
+ )
+ }
+
+ return (
+
+ {item.type === 'icon' ? item.icon : item.text}
+
+ )
+}
+
+function isSecondary(item: LinkItemType): boolean {
+ return (
+ ('secondary' in item && item.secondary === true) || item.type === 'icon'
+ )
+}
diff --git a/src/app/_components/home/menu.tsx b/src/app/_components/home/menu.tsx
new file mode 100644
index 0000000..6cfba2c
--- /dev/null
+++ b/src/app/_components/home/menu.tsx
@@ -0,0 +1,126 @@
+'use client'
+import {
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuTrigger,
+} from '@/components/ui/navigation-menu'
+import { cn } from '@/lib/utils'
+import { cva } from 'class-variance-authority'
+import Link from 'fumadocs-core/link'
+import { buttonVariants } from 'fumadocs-ui/components/ui/button'
+import { BaseLinkItem, type LinkItemType } from 'fumadocs-ui/layouts/links'
+import type { ComponentPropsWithoutRef } from 'react'
+
+const menuItemVariants = cva('', {
+ variants: {
+ variant: {
+ main: 'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',
+ icon: buttonVariants({
+ size: 'icon',
+ color: 'ghost',
+ }),
+ button: buttonVariants({
+ color: 'secondary',
+ className: 'gap-1.5 [&_svg]:size-4',
+ }),
+ },
+ },
+ defaultVariants: {
+ variant: 'main',
+ },
+})
+
+export function MenuLinkItem({
+ item,
+ ...props
+}: {
+ item: LinkItemType
+ className?: string
+}) {
+ if (item.type === 'custom')
+ return
+
+ {item.icon}
+ {item.type === 'icon' ? undefined : item.text}
+
+
+ )
+}
+
+export const Menu = NavigationMenuItem
+
+export function MenuTrigger({
+ enableHover = false,
+ ...props
+}: ComponentPropsWithoutRef & {
+ /**
+ * Enable hover to trigger
+ */
+ enableHover?: boolean
+}) {
+ return (
+ e.preventDefault()}
+ className={cn(
+ buttonVariants({
+ size: 'icon',
+ color: 'ghost',
+ }),
+ props.className
+ )}
+ >
+ {props.children}
+
+ )
+}
+
+export function MenuContent(
+ props: ComponentPropsWithoutRef
+) {
+ return (
+
+ {props.children}
+
+ )
+}
diff --git a/src/app/_components/home/navbar.tsx b/src/app/_components/home/navbar.tsx
new file mode 100644
index 0000000..0311f46
--- /dev/null
+++ b/src/app/_components/home/navbar.tsx
@@ -0,0 +1,137 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import type {
+ NavigationMenuContentProps,
+ NavigationMenuTriggerProps,
+} from '@radix-ui/react-navigation-menu'
+import { type VariantProps, cva } from 'class-variance-authority'
+import Link, { type LinkProps } from 'fumadocs-core/link'
+import { buttonVariants } from 'fumadocs-ui/components/ui/button'
+import {
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ NavigationMenuViewport,
+} from 'fumadocs-ui/components/ui/navigation-menu'
+import { useNav } from 'fumadocs-ui/contexts/layout'
+import { BaseLinkItem } from 'fumadocs-ui/layouts/links'
+import { type ComponentProps, type HTMLAttributes, useState } from 'react'
+
+const navItemVariants = cva(
+ 'inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4'
+)
+
+export function Navbar(props: HTMLAttributes) {
+ const [value, setValue] = useState('')
+ const { isTransparent } = useNav()
+
+ return (
+
+ 0 ? 'shadow-lg' : 'shadow-sm',
+ (!isTransparent || value.length > 0) &&
+ 'bg-fd-background/80 backdrop-blur-lg',
+ props.className
+ )}
+ >
+
+
+
+
+
+ )
+}
+
+export const NavbarMenu = NavigationMenuItem
+
+export function NavbarMenuContent(props: NavigationMenuContentProps) {
+ return (
+
+ {props.children}
+
+ )
+}
+
+export function NavbarMenuTrigger(props: NavigationMenuTriggerProps) {
+ return (
+
+ {props.children}
+
+ )
+}
+
+export function NavbarMenuLink(props: LinkProps) {
+ return (
+
+
+ {props.children}
+
+
+ )
+}
+
+const linkVariants = cva('', {
+ variants: {
+ variant: {
+ main: navItemVariants(),
+ button: buttonVariants({
+ color: 'secondary',
+ className: 'gap-1.5 [&_svg]:size-4',
+ }),
+ icon: buttonVariants({
+ color: 'ghost',
+ size: 'icon',
+ }),
+ },
+ },
+ defaultVariants: {
+ variant: 'main',
+ },
+})
+
+export function NavbarLink({
+ item,
+ variant,
+ ...props
+}: ComponentProps & VariantProps) {
+ return (
+
+
+
+ {props.children}
+
+
+
+ )
+}
diff --git a/src/app/_components/search-toggle.tsx b/src/app/_components/search-toggle.tsx
new file mode 100644
index 0000000..2fdfc2a
--- /dev/null
+++ b/src/app/_components/search-toggle.tsx
@@ -0,0 +1,74 @@
+'use client'
+import { type ButtonProps, buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { useSearchContext } from 'fumadocs-ui/contexts/search'
+import { SearchIcon } from 'lucide-react'
+import type { ButtonHTMLAttributes } from 'react'
+
+export function SearchToggle({
+ hideIfDisabled,
+ size = 'icon',
+ variant = 'ghost',
+ ...props
+}: ButtonHTMLAttributes &
+ ButtonProps & {
+ hideIfDisabled?: boolean
+ }) {
+ const { setOpenSearch, enabled } = useSearchContext()
+ if (hideIfDisabled && !enabled) return null
+
+ return (
+
+ )
+}
+
+export function LargeSearchToggle({
+ hideIfDisabled,
+ ...props
+}: ButtonHTMLAttributes & {
+ hideIfDisabled?: boolean
+}) {
+ const { enabled, hotKey, setOpenSearch } = useSearchContext()
+ if (hideIfDisabled && !enabled) return null
+
+ return (
+
+ )
+}
diff --git a/src/app/api/search/route.ts b/src/app/api/search/route.ts
new file mode 100644
index 0000000..26d4701
--- /dev/null
+++ b/src/app/api/search/route.ts
@@ -0,0 +1,4 @@
+import { createFromSource } from 'fumadocs-core/search/server'
+import { source } from '../../../../lib/source'
+
+export const { GET } = createFromSource(source)
diff --git a/src/app/docs-og/[...slug]/route.tsx b/src/app/docs-og/[...slug]/route.tsx
new file mode 100644
index 0000000..6124441
--- /dev/null
+++ b/src/app/docs-og/[...slug]/route.tsx
@@ -0,0 +1,14 @@
+import { generateOGImage } from 'fumadocs-ui/og'
+import { metadataImage } from '../../../../lib/metadata'
+
+export const GET = metadataImage.createAPI((page) => {
+ return generateOGImage({
+ title: page.data.title,
+ description: page.data.description,
+ site: 'My App',
+ })
+})
+
+export function generateStaticParams() {
+ return metadataImage.generateParams()
+}
diff --git a/src/app/docs/[[...slug]]/page.tsx b/src/app/docs/[[...slug]]/page.tsx
new file mode 100644
index 0000000..2296618
--- /dev/null
+++ b/src/app/docs/[[...slug]]/page.tsx
@@ -0,0 +1,47 @@
+import defaultMdxComponents from 'fumadocs-ui/mdx'
+import {
+ DocsBody,
+ DocsDescription,
+ DocsPage,
+ DocsTitle,
+} from 'fumadocs-ui/page'
+import { notFound } from 'next/navigation'
+import { metadataImage } from '../../../../lib/metadata'
+import { source } from '../../../../lib/source'
+
+export default async function Page(props: {
+ params: Promise<{ slug?: string[] }>
+}) {
+ const params = await props.params
+ const page = source.getPage(params.slug)
+ if (!page) notFound()
+
+ const MDX = page.data.body
+
+ return (
+
+ {page.data.title}
+ {page.data.description}
+
+
+
+ )
+}
+
+export async function generateStaticParams() {
+ return source.generateParams()
+}
+
+export async function generateMetadata(props: {
+ params: Promise<{ slug?: string[] }>
+}) {
+ const params = await props.params
+ const page = source.getPage(params.slug)
+ if (!page) notFound()
+
+ return metadataImage.withImage(page.slugs, {
+ title: page.data.title,
+ description: page.data.description,
+ })
+}
diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx
new file mode 100644
index 0000000..da41a77
--- /dev/null
+++ b/src/app/docs/layout.tsx
@@ -0,0 +1,13 @@
+import { baseOptions } from '@/app/layout.config'
+import { DocsLayout } from 'fumadocs-ui/layouts/notebook'
+import type { ReactNode } from 'react'
+import { source } from '../../../lib/source'
+
+export default function Layout({ children }: { children: ReactNode }) {
+ console.log(baseOptions)
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/app/layout.config.tsx b/src/app/layout.config.tsx
new file mode 100644
index 0000000..e2fba5a
--- /dev/null
+++ b/src/app/layout.config.tsx
@@ -0,0 +1,41 @@
+import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'
+import { Award, BookOpen, Info, Trophy } from 'lucide-react'
+import { Header } from './_components/header'
+
+const links = [
+ {
+ text: 'Documentation',
+ url: '/docs',
+ icon:
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+
+ {children}
+
+
+
+
)
}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index ec037f8..6a37e3d 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -42,10 +42,7 @@ function Button({
size,
asChild = false,
...props
-}: React.ComponentProps<'button'> &
- VariantProps & {
- asChild?: boolean
- }) {
+}: ButtonProps) {
const Comp = asChild ? Slot : 'button'
return (
@@ -56,5 +53,8 @@ function Button({
/>
)
}
-
+export type ButtonProps = React.ComponentProps<'button'> &
+ VariantProps & {
+ asChild?: boolean
+ }
export { Button, buttonVariants }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 24740a1..7f99590 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,6 +1,10 @@
@import "tailwindcss";
@import "tw-animate-css";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+/* path of `fumadocs-ui` relative to the CSS file */
+@source '../../node_modules/fumadocs-ui/dist/**/*.js';
@custom-variant dark (&:is(.dark *));
@theme {
-
+ {navItems
+ .filter((item) => !isSecondary(item))
+ .map((item, i) => (
+
+ {enableSearch ? (
+ <>
+
+ -
+ {navItems.filter(isSecondary).map((item, i) => (
+
{item.children}
+
+ if (item.type === 'menu') {
+ const children = item.items.map((child, j) => {
+ if (child.type === 'custom')
+ return
+ {child.icon}
+
+ ) : null,
+ ...rest
+ } = child.menu ?? {}
+
+ return (
+ {child.text}
+ {child.description ? ( ++ {child.description} +
+ ) : null} + + )} +{item.children}
+
+ if (item.type === 'menu') {
+ const header = (
+ <>
+ {item.icon}
+ {item.text}
+
+ )
+
+ return (
+
+
+ )
+ }
+
+ return (
+
+ {item.url ? (
+
+ 
+ Balatro Multiplayer
+
+ ),
+}
+export const baseOptions: BaseLayoutProps = {
+ links,
+ nav: {
+ ...nav,
+ component:
+ Balatro Multiplayer
+