bring over most of the things

packages/docs-new/src/components/app-link.tsx

@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom"
+import { ExternalLink } from "./external-link"
+
+export type AppLinkProps = {
+  type: "router" | "internal" | "external"
+  label: React.ReactNode
+  to: string
+  className?: string
+}
+
+export function AppLink(props: AppLinkProps) {
+  switch (props.type) {
+    case "router":
+      return (
+        <Link className={props.className} to={props.to}>
+          {props.label}
+        </Link>
+      )
+
+    case "internal":
+      return (
+        <a className={props.className} href={props.to}>
+          {props.label}
+        </a>
+      )
+
+    case "external":
+      return (
+        <ExternalLink className={props.className} href={props.to}>
+          {props.label}
+        </ExternalLink>
+      )
+  }
+}

packages/docs-new/src/components/external-link.tsx

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+export function ExternalLink(props: ComponentPropsWithoutRef<"a">) {
+  return (
+    <a target="_blank" rel="noopener noreferrer" {...props}>
+      {props.children}
+    </a>
+  )
+}

packages/docs-new/src/components/guide-page-layout.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx"
+import { Outlet } from "react-router"
+import { guideLinks } from "../data/guide-links"
+import { useScrolled } from "../hooks/dom/use-scrolled"
+import {
+  docsProseClass,
+  linkClass,
+  maxWidthContainer,
+} from "../styles/components"
+import { AppLink } from "./app-link"
+import { MainNavigation } from "./main-navigation"
+
+export function GuidePageLayout() {
+  return (
+    <>
+      <HeaderPanel>
+        <div className={maxWidthContainer}>
+          <MainNavigation />
+        </div>
+      </HeaderPanel>
+      <main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
+        <nav className="w-48 sticky top-24 hidden md:block">
+          <h2 className="text-2xl">Guides</h2>
+          <ul className="mt-3 flex flex-col gap-2 items-start">
+            {guideLinks.map((link) => (
+              <li key={link.to}>
+                <AppLink {...link} className={linkClass} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
+          <Outlet />
+        </section>
+      </main>
+    </>
+  )
+}
+
+function HeaderPanel({ children }: { children: React.ReactNode }) {
+  const isScrolled = useScrolled()
+
+  const className = clsx(
+    isScrolled ? "bg-slate-700/30" : "bg-slate-800",
+    "shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
+  )
+
+  return <header className={className}>{children}</header>
+}

packages/docs-new/src/components/landing-example.md

@@ -0,0 +1,19 @@
+<!-- prettier-ignore -->
+```tsx
+import * as React from "react"
+import { Embed, Button } from "reacord"
+
+function Counter() {
+  const [count, setCount] = React.useState(0)
+  return (
+    <>
+      <Embed title="Counter">
+        This button has been clicked {count} times.
+      </Embed>
+      <Button onClick={() => setCount(count + 1)}>
+        +1
+      </Button>
+    </>
+  )
+}
+```

packages/docs-new/src/components/main-navigation.tsx

@@ -0,0 +1,40 @@
+import { Link } from "react-router-dom"
+import { AppLink } from "../components/app-link"
+import { guideLinks } from "../data/guide-links"
+import { mainLinks } from "../data/main-links"
+import { linkClass } from "../styles/components"
+import { PopoverMenu } from "./popover-menu"
+
+export function MainNavigation() {
+  return (
+    <nav className="flex justify-between items-center h-16">
+      <Link to="/">
+        <h1 className="text-3xl font-light">reacord</h1>
+      </Link>
+      <div className="hidden md:flex gap-4">
+        {mainLinks.map((link) => (
+          <AppLink {...link} key={link.to} className={linkClass} />
+        ))}
+      </div>
+      <div className="md:hidden">
+        <PopoverMenu>
+          {mainLinks.map((link) => (
+            <AppLink
+              {...link}
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+          <hr className="border-0 h-[2px] bg-black/50" />
+          {guideLinks.map((link) => (
+            <AppLink
+              {...link}
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+        </PopoverMenu>
+      </div>
+    </nav>
+  )
+}

packages/docs-new/src/components/popover-menu.tsx

@@ -0,0 +1,67 @@
+import { MenuAlt4Icon } from "@heroicons/react/outline"
+import { useRect } from "@reach/rect"
+import clsx from "clsx"
+import { useRef, useState } from "react"
+import { FocusOn } from "react-focus-on"
+import { linkClass } from "../styles/components"
+
+// todo: remove useRect usage and rely on css absolute positioning instead
+export function PopoverMenu({ children }: { children: React.ReactNode }) {
+  const [visible, setVisible] = useState(false)
+
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const buttonRect = useRect(buttonRef)
+
+  const panelRef = useRef<HTMLDivElement>(null)
+  const panelRect = useRect(panelRef)
+
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
+  return (
+    <>
+      <button
+        title="Menu"
+        className={linkClass}
+        onClick={() => setVisible(!visible)}
+        ref={buttonRef}
+      >
+        <MenuAlt4Icon className="w-6" />
+      </button>
+
+      <FocusOn
+        enabled={visible}
+        onClickOutside={() => setVisible(false)}
+        onEscapeKey={() => setVisible(false)}
+      >
+        <div
+          className="fixed"
+          style={{
+            left: (buttonRect?.right ?? 0) - (panelRect?.width ?? 0),
+            top: (buttonRect?.bottom ?? 0) + 8,
+          }}
+          onClick={() => setVisible(false)}
+        >
+          <div
+            className={clsx(
+              "transition-all",
+              visible
+                ? "opacity-100 visible"
+                : "translate-y-2 opacity-0 invisible",
+            )}
+          >
+            <div ref={panelRef}>
+              <div className="w-48 bg-slate-800 rounded-lg shadow overflow-hidden max-h-[calc(100vh-4rem)] overflow-y-auto">
+                {children}
+              </div>
+            </div>
+          </div>
+        </div>
+      </FocusOn>
+    </>
+  )
+}
+
+PopoverMenu.itemClass = clsx`
+  px-3 py-2 transition text-left font-medium block
+  opacity-50 hover:opacity-100 hover:bg-black/30
+`