organize

packages/docs/app/components/header-nav.tsx

@@ -0,0 +1,31 @@
+import { CodeIcon } from "@heroicons/react/outline"
+import { DocumentTextIcon, ExternalLinkIcon } from "@heroicons/react/solid"
+import { Link } from "remix"
+import { ExternalLink } from "~/components/external-link"
+import { linkClass } from "~/styles"
+
+export function HeaderNav() {
+  return (
+    <nav className="flex justify-between items-center">
+      <Link to="/">
+        <h1 className="text-3xl font-light">
+          reacord <CodeIcon className="inline w-8 align-sub opacity-50" />
+        </h1>
+      </Link>
+      <div className="flex gap-4">
+        <Link className={linkClass} to="/docs/guides/getting-started">
+          <DocumentTextIcon className="inline align-sub w-5" /> Guides
+        </Link>
+        <a className={linkClass} href="/docs/api">
+          <CodeIcon className="inline align-sub w-5" /> API Reference
+        </a>
+        <ExternalLink
+          className={linkClass}
+          href="https://github.com/itsMapleLeaf/reacord"
+        >
+          <ExternalLinkIcon className="inline align-sub w-5" /> GitHub
+        </ExternalLink>
+      </div>
+    </nav>
+  )
+}

packages/docs/app/components/landing-example.mdx

@@ -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>
+    </>
+  )
+}
+```