zidane-ui 9.0.4 → 9.1.3

package/src/code/editor/word-at.ts

@@ -1,145 +0,0 @@
-/**
- * Identifier boundaries inside a highlighter token. Shiki paints `{ Foo,
- * Bar }` or a whole import line as one span, and pierre reports hover per
- * span, so the symbol under the pointer has to be found in the text: the
- * language server is asked about that character, and the link underline
- * covers what it answers ({@link lineRange}), or the word when it doesn't say.
- */
-
-/** Identifier characters: letters, digits, `_`, `$`, and anything outside ASCII (Unicode identifiers). */
-const WORD_CHAR = /[\p{L}\p{N}_$]/u;
-
-/** An identifier found by {@link wordAt}. */
-export interface WordSpan {
-  /** 0-based offsets inside the token text, `end` exclusive. */
-  start: number;
-  /** Offset just past the identifier's last character. */
-  end: number;
-  /** The identifier itself. */
-  text: string;
-}
-
-/**
- * The identifier covering 0-based `offset` in `text`, or `null` when the
- * offset sits on punctuation or whitespace. An offset just past the end of
- * a word (the pointer on the gap after it) yields nothing: no symbol there.
- *
- * @param text - The token's text.
- * @param offset - The character under the pointer, 0-based.
- */
-export function wordAt(text: string, offset: number): WordSpan | null {
-  if (offset < 0 || offset >= text.length || !WORD_CHAR.test(text[offset]!)) return null;
-  let start = offset;
-  while (start > 0 && WORD_CHAR.test(text[start - 1]!)) start--;
-  let end = offset + 1;
-  while (end < text.length && WORD_CHAR.test(text[end]!)) end++;
-  return { start, end, text: text.slice(start, end) };
-}
-
-/**
- * A DOM `Range` over 0-based character offsets `[start, end)` of the line
- * holding `token` (a highlighter span inside pierre's `[data-line]` row).
- * Pierre marks each span with the offset it starts at (`data-char`), so the
- * range can begin and end in different spans: an import path whose quotes
- * are colored apart from it. `null` when the row's spans don't hold the
- * offsets.
- *
- * @param token - Any highlighter span of the line.
- * @param start - The first character, 0-based.
- * @param end - The offset just past the last character.
- */
-export function lineRange(token: HTMLElement, start: number, end: number): Range | null {
-  const row = token.closest('[data-line]');
-  if (!row || end <= start) return null;
-  const from = pointIn(row, start, false);
-  const to = pointIn(row, end, true);
-  if (!from || !to) return null;
-  const range = document.createRange();
-  range.setStart(from.node, from.offset);
-  range.setEnd(to.node, to.offset);
-  return range;
-}
-
-/**
- * The text node and offset at line offset `at` in `row`: in the span holding
- * that character, or, for the end of a range (`closing`), in the span it
- * closes.
- */
-function pointIn(row: Element, at: number, closing: boolean): { node: Text; offset: number } | null {
-  for (const span of row.querySelectorAll<HTMLElement>('[data-char]')) {
-    let offset = at - Number(span.dataset.char);
-    if (!(offset >= 0)) continue;
-    const texts = document.createTreeWalker(span, NodeFilter.SHOW_TEXT);
-    for (let node = texts.nextNode() as Text | null; node; node = texts.nextNode() as Text | null) {
-      if (offset < node.data.length || (closing && offset === node.data.length)) return { node, offset };
-      offset -= node.data.length;
-    }
-  }
-  return null;
-}
-
-/**
- * 0-based character offset under `clientX` inside a monospace token whose
- * box is `rect`: the character the pointer is over (floor), clamped into
- * the token. Exact for plain text; a tab counts as one character but
- * paints several cells, so callers with a live DOM prefer {@link offsetIn}.
- *
- * @param rect - The token's box, from `getBoundingClientRect`.
- * @param chars - How many characters the token holds.
- * @param clientX - The pointer's viewport x.
- */
-export function offsetAt(rect: { left: number; width: number }, chars: number, clientX: number): number {
-  if (chars <= 0) return 0;
-  if (rect.width <= 0) return 0;
-  const raw = Math.floor(((clientX - rect.left) / rect.width) * chars);
-  return Math.min(chars - 1, Math.max(0, raw));
-}
-
-/**
- * The character of `element`'s text node under the pointer, using the
- * browser's own hit-testing (exact with tabs, ligatures and wide glyphs).
- * The caret API answers with the boundary NEAREST the pointer, so a pointer
- * on the right half of a character reports the next boundary; step back
- * one when the pointer sits left of that boundary. Falls back to the
- * monospace estimate when the point does not resolve into this element.
- *
- * @param element - The token element; its first child should be the text node.
- * @param clientX - The pointer's viewport x.
- * @param clientY - The pointer's viewport y.
- */
-export function offsetIn(element: HTMLElement, clientX: number, clientY: number): number {
-  const node = element.firstChild;
-  const chars = node?.textContent?.length ?? 0;
-  const estimate = () => offsetAt(element.getBoundingClientRect(), chars, clientX);
-  if (!node || node.nodeType !== Node.TEXT_NODE || chars === 0) return estimate();
-  const doc = document as Document & {
-    caretPositionFromPoint?: (
-      x: number,
-      y: number,
-      options?: { shadowRoots?: ShadowRoot[] },
-    ) => { offsetNode: Node; offset: number } | null;
-    caretRangeFromPoint?: (x: number, y: number) => Range | null;
-  };
-  let hit: { offsetNode: Node; offset: number } | null = null;
-  // Without `shadowRoots` the caret API stops at the shadow host (pierre renders in a shadow root).
-  const root = element.getRootNode();
-  if (typeof doc.caretPositionFromPoint === 'function') {
-    hit = doc.caretPositionFromPoint(
-      clientX,
-      clientY,
-      root instanceof ShadowRoot ? { shadowRoots: [root] } : undefined,
-    );
-  } else if (typeof doc.caretRangeFromPoint === 'function') {
-    const range = doc.caretRangeFromPoint(clientX, clientY);
-    if (range) hit = { offsetNode: range.startContainer, offset: range.startOffset };
-  }
-  if (!hit || hit.offsetNode !== node) return estimate();
-  let offset = Math.min(chars - 1, Math.max(0, hit.offset));
-  if (offset > 0) {
-    const probe = document.createRange();
-    probe.setStart(node, offset);
-    probe.setEnd(node, offset);
-    if (probe.getBoundingClientRect().left > clientX) offset--;
-  }
-  return offset;
-}

package/src/code/highlight.worker.ts

@@ -1,19 +0,0 @@
-/**
- * Code highlighting off the main thread: the module a consumer builds into
- * a worker and hands to `createCodeHighlighter({ createWorker })`.
- * Tokenising is the expensive part of a code block (the oniguruma scanner,
- * plus compiling each grammar on first use); here it never competes with
- * scrolling or the stream. One request in, one HTML string (or null: unknown
- * language) out. Shiki is a static import: the worker is the lazy chunk, and
- * a classic (iife) worker build cannot split.
- */
-import { type BundledLanguage, type BundledTheme, codeToHtml } from 'shiki';
-
-import type { HighlightRequest, HighlightResponse } from './highlighter';
-
-self.onmessage = (event: MessageEvent<HighlightRequest>) => {
-  const { id, code, lang, theme } = event.data;
-  codeToHtml(code, { lang: lang as BundledLanguage, theme: theme as BundledTheme })
-    .then((html) => self.postMessage({ id, html } satisfies HighlightResponse))
-    .catch(() => self.postMessage({ id, html: null } satisfies HighlightResponse));
-};

package/src/code/highlighter.ts

@@ -1,185 +0,0 @@
-/**
- * `createCodeHighlighter()`: shiki HTML for code blocks, memoised, and off
- * the main thread when the app gives it a worker.
- *
- * The kit cannot build a worker for its consumers (each bundler has its own
- * syntax), so the app passes a factory that starts one running
- * `highlight.worker.ts` (`?worker` under Vite, `new Worker(new URL(…))`).
- * Without one, or where workers are unavailable (server rendering, jsdom),
- * or when the worker fails to start, it highlights on the main thread.
- *
- * Results are memoised: a block scrolled away and back, a remounted row, or
- * the same snippet in two rows is highlighted once. The memo is bounded by
- * size as well as by count: a streaming fence leaves an entry per longer
- * prefix, each holding its code and HTML several times that size.
- */
-import type { BundledLanguage, BundledTheme } from 'shiki';
-
-/** A request to the highlighting worker. */
-export interface HighlightRequest {
-  /** Correlates the response. */
-  id: number;
-  /** The code. */
-  code: string;
-  /** A shiki language id. */
-  lang: string;
-  /** A bundled shiki theme id. */
-  theme: string;
-}
-
-/** The highlighting worker's answer to a {@link HighlightRequest}. */
-export interface HighlightResponse {
-  /** The request's id. */
-  id: number;
-  /** The highlighted HTML, or `null` for a language shiki does not know. */
-  html: string | null;
-}
-
-/** Options of {@link createCodeHighlighter}. */
-export interface CodeHighlighterOptions {
-  /**
-   * Starts a worker running `zidane-ui/code/highlight.worker`. Called once, on the first
-   * highlight. Without it, highlighting runs on the main thread.
-   */
-  createWorker?: () => Worker;
-}
-
-/** Highlights code to shiki HTML, with a result cache. Create one per app with {@link createCodeHighlighter}. */
-export interface CodeHighlighter {
-  /**
-   * Highlights code, or returns the cached result.
-   *
-   * @param code - The code.
-   * @param lang - A shiki language id.
-   * @param theme - A bundled shiki theme id.
-   * @returns The HTML, or `null` when shiki cannot highlight the language.
-   */
-  highlight(code: string, lang: string, theme: string): Promise<string | null>;
-  /**
-   * The settled result of an earlier {@link CodeHighlighter.highlight}, read synchronously, so a
-   * block highlighted before paints colored on its first frame.
-   *
-   * @param code - The code.
-   * @param lang - A shiki language id.
-   * @param theme - A bundled shiki theme id.
-   * @returns The HTML, `null` for an unknown language, or `undefined` when not highlighted yet.
-   */
-  cached(code: string, lang: string, theme: string): string | null | undefined;
-}
-
-/*
- * Main-thread highlighting loads shiki on first use: it never lands in the
- * bundle of a page that shows no code, and each language loads the first
- * time a block names it.
- */
-function highlightHere(code: string, lang: string, theme: string): Promise<string | null> {
-  return import('shiki')
-    .then(({ codeToHtml }) => codeToHtml(code, { lang: lang as BundledLanguage, theme: theme as BundledTheme }))
-    .catch(() => null);
-}
-
-/** Entries: a long session's blocks fit, a runaway one cannot grow without bound. */
-const CACHE_LIMIT = 400;
-/** Characters held (code in the key, plus the HTML): about 8 MB of UTF-16. */
-const CACHE_CHARS = 4_000_000;
-
-function keyOf(code: string, lang: string, theme: string): string {
-  return `${theme}\u0000${lang}\u0000${code}`;
-}
-
-/** The worker transport: one worker, requests matched to responses by id. */
-function workerTransport(createWorker: () => Worker) {
-  let worker: Worker | null = null;
-  let failed = false;
-  let nextId = 0;
-  const pending = new Map<number, { request: HighlightRequest; resolve: (html: string | null) => void }>();
-
-  // A worker that cannot start (a missing chunk, a blocked script) highlights on the main thread from then on.
-  const fail = () => {
-    failed = true;
-    worker?.terminate();
-    worker = null;
-    for (const { request, resolve } of pending.values()) {
-      void highlightHere(request.code, request.lang, request.theme).then(resolve);
-    }
-    pending.clear();
-  };
-
-  const getWorker = (): Worker | null => {
-    if (worker || failed) return worker;
-    try {
-      const w = createWorker();
-      w.onmessage = (event: MessageEvent<HighlightResponse>) => {
-        const entry = pending.get(event.data.id);
-        pending.delete(event.data.id);
-        entry?.resolve(event.data.html);
-      };
-      w.onerror = fail;
-      worker = w;
-    } catch {
-      failed = true;
-    }
-    return worker;
-  };
-
-  return (code: string, lang: string, theme: string): Promise<string | null> => {
-    const w = getWorker();
-    if (!w) return highlightHere(code, lang, theme);
-    return new Promise((resolve) => {
-      const request = { id: nextId++, code, lang, theme };
-      pending.set(request.id, { request, resolve });
-      w.postMessage(request satisfies HighlightRequest);
-    });
-  };
-}
-
-/**
- * Creates a highlighter with its own cache and, given a factory, its own worker.
- *
- * @param options - The {@link CodeHighlighterOptions}.
- * @returns The {@link CodeHighlighter}.
- */
-export function createCodeHighlighter({ createWorker }: CodeHighlighterOptions = {}): CodeHighlighter {
-  const run = createWorker && typeof Worker !== 'undefined' ? workerTransport(createWorker) : highlightHere;
-  const cache = new Map<string, Promise<string | null>>();
-  const settled = new Map<string, string | null>();
-  let chars = 0;
-
-  const sizeOf = (key: string) => key.length + (settled.get(key)?.length ?? 0);
-  // Oldest first, never `keep` (the entry just added or settled).
-  const evict = (keep: string) => {
-    for (const oldest of cache.keys()) {
-      if (cache.size <= CACHE_LIMIT && chars <= CACHE_CHARS) return;
-      if (oldest === keep) continue;
-      chars -= sizeOf(oldest);
-      cache.delete(oldest);
-      settled.delete(oldest);
-    }
-  };
-
-  return {
-    cached: (code, lang, theme) => settled.get(keyOf(code, lang, theme)),
-    highlight(code, lang, theme) {
-      const key = keyOf(code, lang, theme);
-      const hit = cache.get(key);
-      if (hit) {
-        // Refresh recency: Map iteration order is insertion order.
-        cache.delete(key);
-        cache.set(key, hit);
-        return hit;
-      }
-      const result = run(code, lang, theme).then((html) => {
-        if (cache.get(key) === result) {
-          settled.set(key, html);
-          chars += html?.length ?? 0;
-          evict(key);
-        }
-        return html;
-      });
-      cache.set(key, result);
-      chars += key.length;
-      evict(key);
-      return result;
-    },
-  };
-}

package/src/code/shiki-theme.ts

@@ -1,47 +0,0 @@
-/**
- * Theme id → bundled shiki theme. Syntax colors are NOT derived from the
- * palette (a highlighter theme is a designed artifact, not six hues); we
- * pick the closest bundled theme by id, else a neutral GitHub theme that
- * matches the appearance. The code block chrome (`--zg-code-bg`) always
- * comes from the palette so the block sits on our surface, not shiki's.
- */
-import type { BundledTheme } from 'shiki';
-
-import type { Appearance } from '../theme/derive';
-
-const BY_THEME_ID: Readonly<Record<string, BundledTheme>> = {
-  'catppuccin-mocha': 'catppuccin-mocha',
-  'catppuccin-macchiato': 'catppuccin-macchiato',
-  'catppuccin-frappe': 'catppuccin-frappe',
-  'catppuccin-latte': 'catppuccin-latte',
-  'gruvbox-dark': 'gruvbox-dark-medium',
-  'gruvbox-light': 'gruvbox-light-medium',
-  vaporwave: 'synthwave-84',
-};
-
-const FALLBACK: Readonly<Record<Appearance, BundledTheme>> = {
-  dark: 'github-dark-default',
-  light: 'github-light-default',
-};
-
-/**
- * The neutral shiki theme for an appearance: what a theme without a designed counterpart uses.
- *
- * @param appearance - `'dark'` or `'light'`.
- * @returns `github-dark-default` or `github-light-default`.
- */
-export function defaultShikiTheme(appearance: Appearance): BundledTheme {
-  return FALLBACK[appearance];
-}
-
-/**
- * The bundled shiki theme for a kit theme: its designed counterpart (Catppuccin, Gruvbox…), else
- * the neutral theme of its appearance.
- *
- * @param themeId - The kit theme's id (`BUILTIN_THEMES` key or an extension theme's id).
- * @param appearance - The theme's appearance, for the fallback.
- * @returns A shiki theme id.
- */
-export function shikiThemeFor(themeId: string, appearance: Appearance): BundledTheme {
-  return BY_THEME_ID[themeId] ?? defaultShikiTheme(appearance);
-}

package/src/components/BrandMark.tsx

@@ -1,107 +0,0 @@
-/**
- * The logo of a service (a model provider, a connector, a tool) on a small
- * tile tinted with its brand color. The logos come from Simple Icons and
- * LobeHub Icons (`brands/marks.ts`). A brand color too dark or too light for the theme
- * gives way to a readable one, so a black logo never disappears on a dark
- * theme. A service without a logo shows its icon or its first letter, on a
- * calm tint of its own.
- */
-import type { CSSProperties } from 'react';
-
-import { BRAND_MARKS } from '../brands/marks';
-
-/** The sizes of a mark: 18, 28 or 40 pixels. */
-export type BrandMarkSize = 'sm' | 'md' | 'lg';
-
-/**
- * Whether the kit has a logo for a Simple Icons slug.
- *
- * @param brand - The slug, such as `linear`.
- */
-export function hasBrandMark(brand: string | undefined): boolean {
-  return brand !== undefined && brand in BRAND_MARKS;
-}
-
-/** Relative luminance of a `rrggbb` color, from 0 (black) to 1 (white). */
-function luminance(hex: string): number {
-  const [r, g, b] = [0, 2, 4].map((at) => {
-    const c = Number.parseInt(hex.slice(at, at + 2), 16) / 255;
-    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-  });
-  return 0.2126 * r! + 0.7152 * g! + 0.0722 * b!;
-}
-
-/** The brand color, readable on both appearances: a near-black logo takes the text color on dark themes, a pale one darkens on light themes. */
-function brandColor(hex: string): string {
-  const level = luminance(hex);
-  if (level < 0.06) return `light-dark(#${hex}, var(--zg-text))`;
-  if (level > 0.6) return `light-dark(color-mix(in oklab, #${hex} 60%, black), #${hex})`;
-  return `#${hex}`;
-}
-
-/** A calm hue from a name, so a service without a logo keeps the same color everywhere. */
-function letterColor(label: string): string {
-  let hash = 0;
-  for (const char of label) hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
-  const hue = hash % 360;
-  return `light-dark(oklch(0.52 0.12 ${hue}), oklch(0.78 0.11 ${hue}))`;
-}
-
-/** Props for {@link BrandMark}. */
-export interface BrandMarkProps {
-  /** The slug of the service's logo (`linear`), as `hasBrandMark` knows it. Absent or unknown: the icon or the letter. */
-  brand?: string;
-  /** The service's name: the letter when there is no logo, and the image's name when the mark is not decorative. */
-  label: string;
-  /** An icon class (`i-ph-*`) to show when there is no logo, in place of the letter. */
-  icon?: string;
-  /** 18, 28 or 40 pixels. */
-  size?: BrandMarkSize;
-  /** The name is written next to the mark, so assistive tech skips it. Set false for a mark that stands alone. */
-  decorative?: boolean;
-  /** Extra classes on the tile. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a service's logo on a tinted tile, or its icon or first letter when the kit has no logo for it.
- *
- * @param props - Component props.
- */
-export function BrandMark({
-  brand,
-  label,
-  icon,
-  size = 'md',
-  decorative = true,
-  className = '',
-  style,
-}: BrandMarkProps) {
-  const mark = brand ? BRAND_MARKS[brand] : undefined;
-  const ownStyle = { '--zg-brand': mark ? brandColor(mark.hex) : letterColor(label) } as CSSProperties;
-  const a11y = decorative ? { 'aria-hidden': true } : { role: 'img', 'aria-label': label };
-  return (
-    <span className={`zg-brand-mark ${className}`} data-size={size} style={{ ...ownStyle, ...style }} {...a11y}>
-      {mark ? (
-        <svg viewBox="0 0 24 24" aria-hidden focusable="false">
-          {mark.paths.map((path, i) => (
-            <path
-              key={i}
-              d={path.d}
-              fill="currentColor"
-              {...(path.evenOdd ? { fillRule: 'evenodd' as const, clipRule: 'evenodd' as const } : {})}
-            />
-          ))}
-        </svg>
-      ) : icon ? (
-        <span aria-hidden className={icon} />
-      ) : (
-        <span aria-hidden className="zg-brand-letter">
-          {label.trim().charAt(0).toUpperCase()}
-        </span>
-      )}
-    </span>
-  );
-}

package/src/components/Breadcrumb.tsx

@@ -1,105 +0,0 @@
-/**
- * `gui › src › FilesTab.tsx`: folders are clickable (reveal in tree), the
- * file name is emphasised. A long path truncates from the left so the name
- * stays, under a fade that says there is more.
- */
-import { useLayoutEffect, useRef, useState, type CSSProperties } from 'react';
-
-import { useLabels } from '../labels';
-
-const CRUMB =
-  'h-5 px-1 -mx-1 rounded-zg-xs bg-transparent border-0 cursor-pointer font-sans hover:bg-[var(--zg-row-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--zg-ring)]';
-
-// Fades the clipped left edge. Inline because it only applies while the path
-// overflows, which only layout knows.
-const FADE = 'linear-gradient(to right, transparent, black 24px)';
-
-/** Props for {@link Breadcrumb}. */
-export interface BreadcrumbProps {
-  /** Slash-separated file path, for example `src/FilesTab.tsx`. */
-  path: string;
-  /** Called with the folder path up to the clicked crumb (`src`, `src/sub`). */
-  onFolder: (dir: string) => void;
-  /** Called when the file name crumb is clicked. */
-  onFile: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a file path as a row of crumbs. Each folder is a button that calls `onFolder`;
- * the last segment is the file name, emphasised, and calls `onFile`. A long path clips
- * from the left under a fade so the name stays visible. The full path is the tooltip.
- *
- * @param props - Component props.
- */
-export function Breadcrumb({ path, onFolder, onFile, className, style }: BreadcrumbProps) {
-  const labels = useLabels();
-  const parts = path.split('/');
-  const name = parts.pop() ?? path;
-  const clipRef = useRef<HTMLDivElement>(null);
-  const rowRef = useRef<HTMLDivElement>(null);
-  const [overflowing, setOverflowing] = useState(false);
-
-  // The row overflows to the left (`justify-end`), which never counts towards
-  // the clip's scrollWidth, so compare the row's own width to the clip's.
-  useLayoutEffect(() => {
-    const clip = clipRef.current;
-    const row = rowRef.current;
-    if (!clip || !row) return;
-    const measure = () => setOverflowing(row.offsetWidth > clip.clientWidth);
-    measure();
-    if (typeof ResizeObserver === 'undefined') return;
-    const ro = new ResizeObserver(measure);
-    ro.observe(clip);
-    ro.observe(row);
-    return () => ro.disconnect();
-  }, []);
-
-  return (
-    <nav
-      aria-label={labels.filePath(path)}
-      className={[
-        'min-w-0 flex-1 flex items-center text-zg-meta text-[var(--zg-text-muted)] overflow-hidden',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-      title={path}
-    >
-      {/* Shrinks to the nav when the path is long; the row inside keeps its
-          natural width and, end-aligned, spills out of the left edge. */}
-      <div
-        ref={clipRef}
-        className="min-w-0 flex justify-end overflow-hidden"
-        data-overflowing={overflowing ? '' : undefined}
-        style={overflowing ? { maskImage: FADE, WebkitMaskImage: FADE } : undefined}
-      >
-        {/* px-1 gives the crumbs' -mx-1 hover chips room inside the clip. */}
-        <div ref={rowRef} className="shrink-0 flex items-center gap-0.5 px-1">
-          {parts.map((seg, i) => {
-            const dir = parts.slice(0, i + 1).join('/');
-            return (
-              <span key={dir} className="flex items-center gap-0.5 shrink-0">
-                <button
-                  type="button"
-                  onClick={() => onFolder(dir)}
-                  className={`${CRUMB} text-inherit hover:text-[var(--zg-text)]`}
-                >
-                  {seg}
-                </button>
-                <span className="i-ph-caret-right text-zg-badge opacity-60" aria-hidden />
-              </span>
-            );
-          })}
-          <button type="button" onClick={onFile} className={`${CRUMB} text-[var(--zg-text)] shrink-0`}>
-            {name}
-          </button>
-        </div>
-      </div>
-    </nav>
-  );
-}