@opentf/web-docs 0.1.0

package/build/docs-nav-plugin.js

@@ -0,0 +1,180 @@
+// Build-time navigation generator (a Rolldown plugin).
+//
+// The sidebar / breadcrumbs / prev-next need the whole documentation tree, which
+// only exists on disk at build time. This plugin scans `app/<dir>` for routes,
+// reads each folder's `_meta.{js,json}` for ordering + labels and each page's
+// frontmatter for titles, and resolves `@opentf/web-docs/nav` to a generated module
+// exporting the ordered tree. It is a pure build-time *consumer* of the file tree
+// (ARCHITECTURE.md §6) — no new compiler stage, no runtime cost.
+//
+// Tree node shape: `{ title, path?, order?, items?: Node[] }`. A node with `path`
+// is a link; a node with `items` is a (possibly also linked) group.
+
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+
+import { readFrontmatter } from "./frontmatter.js";
+
+const VIRTUAL_ID = "@opentf/web-docs/nav";
+const RESOLVED_ID = "\0otfw-docs-nav";
+const PAGE_RE = /^page\.(mdx|md|[jt]sx)$/;
+const MD_RE = /\.(mdx|md)$/;
+
+/**
+ * @param {Object} opts
+ * @param {string} opts.appDir      Absolute path to the project's `app/` directory.
+ * @param {string} [opts.contentDir] Docs content folder under app/ (default "docs").
+ * @param {Set<string>} [opts.exclude] Folder names to skip (mirrors route exclusions).
+ */
+export function docsNavPlugin({ appDir, contentDir = "docs", exclude = new Set() } = {}) {
+  // `"."`/`""` means the docs live at the app root (routes at "/"); otherwise they
+  // live in app/<contentDir> (routes under "/<contentDir>").
+  const atRoot = contentDir === "." || contentDir === "";
+  const root = atRoot ? appDir : join(appDir, contentDir);
+  const base = atRoot ? "" : "/" + contentDir;
+  return {
+    name: "otfw-docs-nav",
+    resolveId(source) {
+      if (source === VIRTUAL_ID) return RESOLVED_ID;
+      return null;
+    },
+    async load(id) {
+      if (id !== RESOLVED_ID) return null;
+      const watch = [];
+      const tree = existsSync(root) ? await buildSection(root, base, watch, true, exclude) : [];
+      // Rebuild on changes to meta/page files during `otfw dev`.
+      for (const f of watch) this.addWatchFile?.(f);
+      return `export default ${JSON.stringify(tree)};\n`;
+    },
+  };
+}
+
+/** Load a folder's `_meta` (ordering + labels). Supports `.js`/`.mjs`/`.json`. */
+async function loadMeta(dir, watch) {
+  for (const name of ["_meta.js", "_meta.mjs", "_meta.json"]) {
+    const p = join(dir, name);
+    if (!existsSync(p)) continue;
+    watch.push(p);
+    try {
+      if (name.endsWith(".json")) return JSON.parse(readFileSync(p, "utf8"));
+      // Cache-bust so `otfw dev` picks up edits.
+      const mod = await import(pathToFileURL(p).href + `?t=${Date.now()}`);
+      return mod.default ?? mod;
+    } catch (e) {
+      console.warn(`⚠ [@opentf/web-docs] could not load ${p}: ${e?.message ?? e}`);
+    }
+    return null;
+  }
+  return null;
+}
+
+/** The `page.*` file directly in `dir`, or null. */
+function pageFile(dir) {
+  for (const name of readdirSync(dir)) {
+    if (PAGE_RE.test(name)) return join(dir, name);
+  }
+  return null;
+}
+
+function humanize(seg) {
+  return seg.replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+/** Order child keys: those named in `_meta` first (in declared order), rest A→Z. */
+function orderKeys(keys, meta) {
+  if (!meta) return keys.slice().sort();
+  const metaKeys = Array.isArray(meta) ? meta : Object.keys(meta);
+  const named = metaKeys.filter((k) => keys.includes(k));
+  const rest = keys.filter((k) => !metaKeys.includes(k)).sort();
+  return [...named, ...rest];
+}
+
+/** A label declared in `_meta` for `key`, or null. */
+function metaLabel(meta, key) {
+  if (!meta || Array.isArray(meta)) return null;
+  const v = meta[key];
+  if (typeof v === "string") return v;
+  if (v && typeof v === "object") return v.title ?? v.label ?? null;
+  return null;
+}
+
+/**
+ * Build the ordered items of a section directory. Each subdirectory becomes a child
+ * node (a link and/or a group). At the docs root (`withIndex`), the root's own
+ * `page.*` is emitted as a standalone "Overview"-style entry; in nested groups the
+ * folder's own page is the group node's link (added by `buildNode`), so it is not
+ * repeated here. Order + labels come from `_meta`.
+ */
+async function buildSection(dir, route, watch, withIndex = false, exclude = new Set()) {
+  const meta = await loadMeta(dir, watch);
+  const entries = readdirSync(dir, { withFileTypes: true });
+  const subdirs = entries
+    .filter(
+      (e) =>
+        e.isDirectory() &&
+        !e.name.startsWith(".") &&
+        !e.name.startsWith("_") &&
+        !exclude.has(e.name),
+    )
+    .map((e) => e.name);
+
+  const items = [];
+
+  // The docs root's own landing page (e.g. app/docs/page.mdx → /docs).
+  const indexFile = withIndex ? pageFile(dir) : null;
+  const keys = subdirs.slice();
+  if (indexFile) keys.unshift("index");
+
+  let ordered = orderKeys(keys, meta);
+  // Default the landing page to the top unless `_meta` orders it.
+  const metaOrdersIndex = meta && !Array.isArray(meta) && "index" in meta;
+  if (indexFile && !metaOrdersIndex) {
+    ordered = ["index", ...ordered.filter((k) => k !== "index")];
+  }
+
+  for (const key of ordered) {
+    if (key === "index") {
+      watch.push(indexFile);
+      const fm = MD_RE.test(indexFile) ? readFrontmatter(indexFile) : {};
+      items.push(
+        clean({
+          title: metaLabel(meta, "index") ?? fm.sidebar_label ?? fm.title ?? "Overview",
+          path: route || "/",
+          order: fm.order,
+        }),
+      );
+      continue;
+    }
+    const node = await buildNode(join(dir, key), `${route}/${key}`, key, meta, watch, exclude);
+    if (node) items.push(node);
+  }
+  return items;
+}
+
+/** Build a single subdirectory node: its own link (if it has a page) + children. */
+async function buildNode(dir, route, key, parentMeta, watch, exclude) {
+  const pf = pageFile(dir);
+  let fm = {};
+  if (pf) {
+    watch.push(pf);
+    if (MD_RE.test(pf)) fm = readFrontmatter(pf);
+  }
+  const children = await buildSection(dir, route, watch, false, exclude);
+  // A directory that has neither a page nor children contributes nothing.
+  if (!pf && children.length === 0) return null;
+
+  const title = metaLabel(parentMeta, key) ?? fm.sidebar_label ?? fm.title ?? humanize(key);
+  return clean({
+    title,
+    path: pf ? route : undefined,
+    order: fm.order,
+    items: children.length ? children : undefined,
+  });
+}
+
+/** Drop undefined fields so the emitted JSON stays small. */
+function clean(node) {
+  for (const k of Object.keys(node)) if (node[k] === undefined) delete node[k];
+  return node;
+}

package/build/frontmatter.js

@@ -0,0 +1,42 @@
+// Minimal YAML frontmatter reader for the nav generator.
+//
+// Mirrors the flat-scalar parser in the Rust MDX front-end
+// (crates/otfw_compiler/src/mdx.rs `frontmatter_object`): a leading `---` block of
+// `key: value` lines, scalars only. Booleans/numbers are coerced; everything else is
+// a string. Nested maps / lists are out of scope (a follow-up, same as the Rust side).
+
+import { readFileSync } from "node:fs";
+
+/** Parse the leading frontmatter block of an .mdx/.md file into a flat object. */
+export function readFrontmatter(file) {
+  let source;
+  try {
+    source = readFileSync(file, "utf8");
+  } catch {
+    return {};
+  }
+  const m = source.match(/^?---\r?\n([\s\S]*?)\r?\n---/);
+  if (!m) return {};
+  const out = {};
+  for (const raw of m[1].split(/\r?\n/)) {
+    const line = raw.trim();
+    if (!line || line.startsWith("#")) continue;
+    const idx = line.indexOf(":");
+    if (idx < 0) continue;
+    const key = line.slice(0, idx).trim();
+    if (!key) continue;
+    let value = line.slice(idx + 1).trim();
+    // Strip a single matching pair of surrounding quotes.
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+    if (value === "true") out[key] = true;
+    else if (value === "false") out[key] = false;
+    else if (value !== "" && !Number.isNaN(Number(value))) out[key] = Number(value);
+    else out[key] = value;
+  }
+  return out;
+}

package/build/index.js

@@ -0,0 +1,7 @@
+// Build-time entry for the docs toolchain integration.
+//
+// Re-exports the Rolldown nav plugin (registered by @opentf/web-cli when a project
+// has a `docs` config) and the Pagefind post-build hook (Phase 2). Importing this
+// from web-cli keeps all docs-specific build logic owned by this package.
+
+export { docsNavPlugin } from "./docs-nav-plugin.js";

package/components/Breadcrumbs.jsx

@@ -0,0 +1,38 @@
+// Breadcrumb trail for the current page, derived from the nav tree + router path.
+
+import { Link, router } from "@opentf/web";
+
+export default function Breadcrumbs(props) {
+  const nav = props.nav || [];
+
+  return (
+    <nav class="otfw-breadcrumbs" aria-label="Breadcrumb">
+      {() => {
+        const findTrail = (items, path, trail) => {
+          for (const it of items) {
+            const next = trail.concat(it);
+            if (it.path === path) return next;
+            if (it.items) {
+              const found = findTrail(it.items, path, next);
+              if (found) return found;
+            }
+          }
+          return null;
+        };
+        const trail = findTrail(nav, router.pathname, []) || [];
+        return trail.map((it, i) => (
+          <span class="otfw-crumb">
+            {i > 0 ? <span class="otfw-crumb-sep">/</span> : null}
+            {it.path ? (
+              <Link href={it.path} class="otfw-crumb-link">
+                {it.title}
+              </Link>
+            ) : (
+              <span class="otfw-crumb-text">{it.title}</span>
+            )}
+          </span>
+        ));
+      }}
+    </nav>
+  );
+}

package/components/Callout.jsx

@@ -0,0 +1,29 @@
+// Admonition / callout box. `type` is note | tip | info | warning | danger.
+//
+//   <Callout type="warning" title="Heads up">…</Callout>
+
+const ICONS = {
+  note: "✎",
+  tip: "💡",
+  info: "ℹ",
+  warning: "⚠",
+  danger: "⛔",
+};
+
+export default function Callout(props) {
+  const type = props.type || "note";
+  const title = props.title || type.charAt(0).toUpperCase() + type.slice(1);
+  const icon = ICONS[type] || ICONS.note;
+
+  return (
+    <div class={"otfw-callout otfw-callout-" + type}>
+      <div class="otfw-callout-title">
+        <span class="otfw-callout-icon" aria-hidden="true">
+          {icon}
+        </span>
+        {title}
+      </div>
+      <div class="otfw-callout-body">{props.children}</div>
+    </div>
+  );
+}

package/components/CodeGroup.jsx

@@ -0,0 +1,28 @@
+// Grouped code blocks behind tabs (e.g. npm / pnpm / bun install commands).
+// `items` is an array of `{ label, content }` where content is typically a fenced
+// code block (already highlighted at build time by the MDX front-end).
+
+export default function CodeGroup(props) {
+  let active = $state(0);
+  const items = props.items || [];
+
+  return (
+    <div class="otfw-codegroup">
+      <div class="otfw-codegroup-tabs" role="tablist">
+        {items.map((it, i) => (
+          <button
+            class={active === i ? "otfw-codegroup-tab otfw-active" : "otfw-codegroup-tab"}
+            onclick={() => (active = i)}
+          >
+            {it.label}
+          </button>
+        ))}
+      </div>
+      {items.map((it, i) => (
+        <div class={active === i ? "otfw-codegroup-panel" : "otfw-codegroup-panel otfw-hidden"}>
+          {it.content}
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/DocsLayout.jsx

@@ -0,0 +1,46 @@
+// Top-level documentation frame: navbar + (sidebar · content · TOC) + footer.
+//
+//   import config from "../../otfw.config.js";
+//   import nav from "@opentf/web-docs/nav";
+//   export default function (props) {
+//     return <DocsLayout config={config.docs} nav={nav}>{props.children}</DocsLayout>;
+//   }
+//
+// `frame` (default true) renders the full chrome (navbar + footer). Pass
+// `frame={false}` when nesting inside an existing site layout that already provides
+// the navbar/footer — only the sidebar · content · TOC grid is rendered.
+
+import Navbar from "./Navbar.jsx";
+import Sidebar from "./Sidebar.jsx";
+import Toc from "./Toc.jsx";
+import Footer from "./Footer.jsx";
+import Breadcrumbs from "./Breadcrumbs.jsx";
+import Pagination from "./Pagination.jsx";
+
+export default function DocsLayout(props) {
+  const config = props.config || {};
+  const nav = props.nav || [];
+  const frame = props.frame !== false;
+
+  const body = (
+    <div class="otfw-docs">
+      <Sidebar nav={nav} config={config} />
+      <main id="otfw-content" class="otfw-content" data-pagefind-body>
+        <Breadcrumbs nav={nav} />
+        <article class="otfw-prose">{props.children}</article>
+        <Pagination nav={nav} />
+      </main>
+      <Toc />
+    </div>
+  );
+
+  return frame ? (
+    <div class="otfw-shell">
+      <Navbar config={config} />
+      <div class="otfw-shell-body">{body}</div>
+      <Footer config={config} />
+    </div>
+  ) : (
+    body
+  );
+}

package/components/Footer.jsx

@@ -0,0 +1,25 @@
+// Site footer, driven by `config.footer` ({ text, links }).
+
+export default function Footer(props) {
+  const config = props.config || {};
+  const footer = config.footer || {};
+  const text = footer.text || "Built with OTF Web";
+  const links = footer.links || [];
+
+  return (
+    <footer class="otfw-footer">
+      <div class="otfw-footer-inner">
+        <div class="otfw-footer-text">{text}</div>
+        {links.length > 0 ? (
+          <div class="otfw-footer-links">
+            {links.map((l) => (
+              <a href={l.href} class="otfw-footer-link">
+                {l.label}
+              </a>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </footer>
+  );
+}

package/components/Navbar.jsx

@@ -0,0 +1,42 @@
+// Top navigation bar: brand, top-level links, search, GitHub, theme toggle. All
+// content is driven by the `docs` config object passed down from DocsLayout.
+
+import { Link } from "@opentf/web";
+import ThemeToggle from "./ThemeToggle.jsx";
+import SearchTrigger from "./SearchTrigger.jsx";
+
+export default function Navbar(props) {
+  const config = props.config || {};
+  const links = config.nav || [];
+
+  return (
+    <header class="otfw-navbar">
+      <div class="otfw-navbar-inner">
+        <Link href={config.homeUrl || "/"} class="otfw-navbar-brand">
+          {config.logo ? <img src={config.logo} alt="" class="otfw-navbar-logo" /> : null}
+          <span class="otfw-navbar-title">{config.title || "Docs"}</span>
+        </Link>
+
+        <nav class="otfw-navbar-nav">
+          {links.map((l) => (
+            <Link href={l.href} class="otfw-navbar-link">
+              {l.label}
+            </Link>
+          ))}
+        </nav>
+
+        <div class="otfw-navbar-actions">
+          <SearchTrigger />
+          {config.github ? (
+            <a href={config.github} target="_blank" rel="noreferrer" class="otfw-navbar-icon" aria-label="GitHub">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.2.8-.5v-1.7c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.5 11.5 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.6.8.5a11.5 11.5 0 007.9-10.9C23.5 5.7 18.3.5 12 .5z" />
+              </svg>
+            </a>
+          ) : null}
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  );
+}

package/components/Pagination.jsx

@@ -0,0 +1,45 @@
+// Prev / next page links, derived from a depth-first flatten of the nav tree.
+
+import { Link, router } from "@opentf/web";
+
+export default function Pagination(props) {
+  const nav = props.nav || [];
+
+  return (
+    <nav class="otfw-pagination" aria-label="Pagination">
+      {() => {
+        const flat = [];
+        const walk = (items) => {
+          for (const it of items) {
+            if (it.path) flat.push(it);
+            if (it.items) walk(it.items);
+          }
+        };
+        walk(nav);
+        const i = flat.findIndex((x) => x.path === router.pathname);
+        const prev = i > 0 ? flat[i - 1] : null;
+        const next = i >= 0 && i < flat.length - 1 ? flat[i + 1] : null;
+        return (
+          <>
+            {prev ? (
+              <Link href={prev.path} class="otfw-page-link otfw-page-prev">
+                <span class="otfw-page-dir">← Previous</span>
+                <span class="otfw-page-title">{prev.title}</span>
+              </Link>
+            ) : (
+              <span class="otfw-page-spacer" />
+            )}
+            {next ? (
+              <Link href={next.path} class="otfw-page-link otfw-page-next">
+                <span class="otfw-page-dir">Next →</span>
+                <span class="otfw-page-title">{next.title}</span>
+              </Link>
+            ) : (
+              <span class="otfw-page-spacer" />
+            )}
+          </>
+        );
+      }}
+    </nav>
+  );
+}

package/components/SearchTrigger.jsx

@@ -0,0 +1,21 @@
+// Search box trigger in the navbar (⌘K). Inert in Phase 1 — it calls a global
+// opener that the Phase 2 Pagefind-backed <Search> modal installs on `window`.
+
+export default function SearchTrigger() {
+  const open = () => {
+    if (typeof window !== "undefined" && typeof window.__otfwOpenSearch === "function") {
+      window.__otfwOpenSearch();
+    }
+  };
+
+  return (
+    <button class="otfw-search-trigger" onclick={open} aria-label="Search docs">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="11" cy="11" r="7" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" stroke-linecap="round" />
+      </svg>
+      <span class="otfw-search-label">Search</span>
+      <kbd class="otfw-search-kbd">⌘K</kbd>
+    </button>
+  );
+}

package/components/Sidebar.jsx

@@ -0,0 +1,21 @@
+// Documentation sidebar — renders the build-time nav tree (from
+// `@opentf/web-docs/nav`). Static content (crawlable with JS off); the active link
+// updates reactively in SidebarNode.
+
+import SidebarNode from "./SidebarNode.jsx";
+
+export default function Sidebar(props) {
+  const nav = props.nav || [];
+
+  return (
+    <aside class="otfw-sidebar">
+      <nav class="otfw-sidebar-nav" aria-label="Documentation">
+        <ul class="otfw-sidebar-list">
+          {nav.map((item) => (
+            <SidebarNode item={item} />
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}

package/components/SidebarNode.jsx

@@ -0,0 +1,31 @@
+// One node of the sidebar tree — a link, a group title, or both. Recurses into
+// `item.items`. The active link is derived from `router.pathname` (reactive).
+
+import { Link, router } from "@opentf/web";
+
+export default function SidebarNode(props) {
+  const item = props.item || {};
+  const hasChildren = item.items && item.items.length > 0;
+
+  return (
+    <li class="otfw-sidebar-node">
+      {item.path ? (
+        <Link
+          href={item.path}
+          class={router.pathname === item.path ? "otfw-sidebar-link otfw-active" : "otfw-sidebar-link"}
+        >
+          {item.title}
+        </Link>
+      ) : (
+        <span class="otfw-sidebar-group-title">{item.title}</span>
+      )}
+      {hasChildren ? (
+        <ul class="otfw-sidebar-sublist">
+          {item.items.map((child) => (
+            <SidebarNode item={child} />
+          ))}
+        </ul>
+      ) : null}
+    </li>
+  );
+}

package/components/Table.jsx

@@ -0,0 +1,11 @@
+// Styled, horizontally-scrollable table wrapper. (MDX GFM tables already emit a
+// bare <table>, styled by the theme; use <Table> in JSX pages or to force the
+// responsive scroll container.)
+
+export default function Table(props) {
+  return (
+    <div class="otfw-table-wrap">
+      <table class="otfw-table">{props.children}</table>
+    </div>
+  );
+}

package/components/Tabs.jsx

@@ -0,0 +1,30 @@
+// Generic tabbed panel. `tabs` is an array of `{ label, content }`.
+//
+//   <Tabs tabs={[{ label: "npm", content: <…/> }, …]} />
+
+export default function Tabs(props) {
+  let active = $state(0);
+  const tabs = props.tabs || [];
+
+  return (
+    <div class="otfw-tabs">
+      <div class="otfw-tabs-list" role="tablist">
+        {tabs.map((tab, i) => (
+          <button
+            class={active === i ? "otfw-tab otfw-active" : "otfw-tab"}
+            onclick={() => (active = i)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div class="otfw-tabs-panels">
+        {tabs.map((tab, i) => (
+          <div class={active === i ? "otfw-tab-panel" : "otfw-tab-panel otfw-hidden"}>
+            {tab.content}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/ThemeToggle.jsx

@@ -0,0 +1,39 @@
+// Light/dark toggle. Sets `data-theme` on <html>, persists to localStorage, and
+// respects the OS preference on first load. Pair with the no-flash inline script in
+// the docs shell index.html so the initial paint already has the right theme.
+
+import { onMount } from "@opentf/web";
+
+export default function ThemeToggle() {
+  let theme = $state("light");
+
+  onMount(() => {
+    const saved =
+      localStorage.getItem("theme") ||
+      (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    theme = saved;
+    document.documentElement.setAttribute("data-theme", theme);
+  });
+
+  const toggle = () => {
+    theme = theme === "light" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  };
+
+  return (
+    <button class="otfw-theme-toggle" onclick={toggle} aria-label="Toggle color theme">
+      {() =>
+        theme === "light" ? (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+          </svg>
+        ) : (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 5a7 7 0 100 14 7 7 0 000-14z" />
+          </svg>
+        )
+      }
+    </button>
+  );
+}