@highjumpdigitalsoftware/blog-kit 0.6.0

package/react/KeywordTable.tsx

@@ -0,0 +1,92 @@
+/* blog-kit React adapter — KeywordTable
+   Thin wrapper: all styling lives in core/css/components.css (.bk-keyword-table).
+   An SEO keyword-ranking table — keyword, search volume, a colour-coded
+   difficulty pill (low/med/high), before/after rank positions, and a
+   coloured up/down rank-change delta. Overflows horizontally on narrow
+   viewports; the [data-bk-keyword-table] behaviour adds scroll-edge hints. */
+
+export interface KeywordRow {
+  keyword: string;
+  /** Monthly search volume, pre-formatted (e.g. "1.2k"). */
+  volume: string;
+  /** Keyword difficulty 0–100; bucketed low (<40) / med (<60) / high. */
+  difficulty: number;
+  /** Previous rank position; falls back to an em dash when absent. */
+  was?: number | string;
+  /** Current rank position. */
+  now: number | string;
+  /** Signed rank change; negative renders as a red down-arrow. */
+  delta: number | string;
+}
+
+export interface KeywordTableProps {
+  rows?: KeywordRow[];
+}
+
+/** Bucket a 0–100 difficulty score into low / med / high. */
+function difficultyBucket(difficulty: number): "low" | "med" | "high" {
+  return difficulty < 40 ? "low" : difficulty < 60 ? "med" : "high";
+}
+
+/** A negative delta means the rank dropped (down); anything else is up. */
+function deltaDirection(delta: number | string): "up" | "down" {
+  return delta && String(delta).startsWith("-") ? "down" : "up";
+}
+
+/** Show the magnitude when numeric, else the raw value. */
+function deltaDisplay(delta: number | string): number | string {
+  return Math.abs(Number(delta)) || delta;
+}
+
+export function KeywordTable({ rows = [] }: KeywordTableProps) {
+  if (!rows || rows.length === 0) return null;
+
+  return (
+    <div className="bk-keyword-table" data-bk-keyword-table>
+      <div className="bk-keyword-table__scroll">
+        <table className="bk-keyword-table__table">
+          <thead>
+            <tr>
+              <th className="bk-keyword-table__th">Keyword</th>
+              <th className="bk-keyword-table__th bk-keyword-table__th--r">Volume</th>
+              <th className="bk-keyword-table__th">Difficulty</th>
+              <th className="bk-keyword-table__th bk-keyword-table__th--r">Was</th>
+              <th className="bk-keyword-table__th bk-keyword-table__th--r">Now</th>
+              <th className="bk-keyword-table__th bk-keyword-table__th--r">Δ</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((r, i) => {
+              const diff = difficultyBucket(r.difficulty);
+              const direction = deltaDirection(r.delta);
+              return (
+                <tr className="bk-keyword-table__tr" key={i}>
+                  <td className="bk-keyword-table__td bk-keyword-table__td--kw">{r.keyword}</td>
+                  <td className="bk-keyword-table__td bk-keyword-table__td--r">{r.volume}</td>
+                  <td className="bk-keyword-table__td">
+                    <span className={`bk-keyword-table__diff bk-keyword-table__diff--${diff}`}>
+                      {r.difficulty}
+                    </span>
+                  </td>
+                  <td className="bk-keyword-table__td bk-keyword-table__td--r bk-keyword-table__rank">
+                    {r.was ?? "—"}
+                  </td>
+                  <td className="bk-keyword-table__td bk-keyword-table__td--r bk-keyword-table__rank">
+                    {r.now}
+                  </td>
+                  <td className="bk-keyword-table__td bk-keyword-table__td--r">
+                    <span
+                      className={`bk-keyword-table__delta bk-keyword-table__delta--${direction}`}
+                    >
+                      {deltaDisplay(r.delta)}
+                    </span>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/react/List.tsx

@@ -0,0 +1,58 @@
+import { ICONS } from "../core/icons";
+
+export type ListVariant = "ordered" | "bullet" | "check";
+
+export interface ListProps {
+  /** "ordered" — zero-padded counters (01, 02, …); "bullet" — dot markers; "check" — tick marks. */
+  variant?: ListVariant;
+  /** Each item is an HTML string — use <strong>…</strong> for a bold lead-in. */
+  items: string[];
+  /** Optional uppercase heading rendered above the list. */
+  heading?: string;
+}
+
+const VARIANTS: Record<string, ListVariant> = {
+  ordered: "ordered",
+  numbered: "ordered",
+  number: "ordered",
+  bullet: "bullet",
+  bulleted: "bullet",
+  dot: "bullet",
+  check: "check",
+  checked: "check",
+  checklist: "check",
+};
+
+export function List({ variant, items, heading }: ListProps) {
+  if (!Array.isArray(items) || items.length === 0) return null;
+  const v = VARIANTS[(variant ?? "bullet").toLowerCase().trim()] ?? "bullet";
+  const Tag = v === "ordered" ? "ol" : "ul";
+  return (
+    <div className={`bk-list bk-list--${v}`}>
+      {heading && <p className="bk-list__heading">{heading}</p>}
+      <Tag className="bk-list__items">
+        {items.map((item, i) => (
+          <li className="bk-list__item" key={i}>
+            {v === "ordered" ? (
+              <span className="bk-list__marker" aria-hidden="true">
+                {String(i + 1).padStart(2, "0")}
+              </span>
+            ) : v === "check" ? (
+              <span
+                className="bk-list__marker"
+                aria-hidden="true"
+                dangerouslySetInnerHTML={{ __html: ICONS["check-tick"] }}
+              />
+            ) : (
+              <span className="bk-list__marker" aria-hidden="true" />
+            )}
+            <span
+              className="bk-list__text"
+              dangerouslySetInnerHTML={{ __html: item }}
+            />
+          </li>
+        ))}
+      </Tag>
+    </div>
+  );
+}

package/react/MetricHighlight.tsx

@@ -0,0 +1,86 @@
+/* blog-kit React adapter — MetricHighlight
+   Thin wrapper: all styling lives in core/css/components.css (.bk-metric-highlight).
+   One or more headline metrics. A single metric renders as a big brand-filled
+   hero (giant value + label + optional change + optional SOURCE row); two or
+   more render as a responsive grid of bordered cards. The grid column count is
+   driven by a --metric-highlight--<n> modifier (2 | 3 | 4+). */
+import { ICONS } from "../core/icons";
+
+interface Metric {
+  value: string;
+  label: string;
+  change?: string;
+  /** Optional source attribution, e.g. "Zuko form benchmarks, 2026". */
+  source?: string;
+  /** Optional URL — when set alongside `source`, the row becomes a link. */
+  sourceUrl?: string;
+}
+
+export interface MetricHighlightProps {
+  metrics?: Metric[];
+}
+
+function SourceRow({ source, sourceUrl, dark }: { source: string; sourceUrl?: string; dark?: boolean }) {
+  const cls = `bk-metric-highlight__source${dark ? " bk-metric-highlight__source--dark" : ""}`;
+  if (sourceUrl) {
+    return (
+      <a
+        className={`${cls} bk-metric-highlight__source--link`}
+        href={sourceUrl}
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+      >
+        <span className="bk-metric-highlight__source-kicker">Source</span>
+        {source}
+        <span
+          className="bk-metric-highlight__source-icon"
+          aria-hidden="true"
+          dangerouslySetInnerHTML={{ __html: ICONS["external"] }}
+        />
+      </a>
+    );
+  }
+  return (
+    <div className={cls}>
+      <span className="bk-metric-highlight__source-kicker">Source</span>
+      {source}
+    </div>
+  );
+}
+
+export function MetricHighlight({ metrics = [] }: MetricHighlightProps) {
+  if (!metrics || metrics.length === 0) return null;
+
+  if (metrics.length === 1) {
+    const m = metrics[0];
+    return (
+      <div className="bk-metric-highlight bk-metric-highlight--hero">
+        <div className="bk-metric-highlight__hero-value">{m.value}</div>
+        <div className="bk-metric-highlight__hero-body">
+          {m.change && <div className="bk-metric-highlight__hero-change">{m.change}</div>}
+          <div className="bk-metric-highlight__hero-label">{m.label}</div>
+          {m.source && <SourceRow source={m.source} sourceUrl={m.sourceUrl} dark />}
+        </div>
+      </div>
+    );
+  }
+
+  const cols = metrics.length === 2 ? 2 : metrics.length === 3 ? 3 : 4;
+
+  return (
+    <div className={`bk-metric-highlight bk-metric-highlight--grid bk-metric-highlight--${cols}`}>
+      {metrics.map((metric, i) => (
+        <div className="bk-metric-highlight__card" key={i}>
+          <div className="bk-metric-highlight__value">{metric.value}</div>
+          <div className="bk-metric-highlight__label">{metric.label}</div>
+          {metric.change && <div className="bk-metric-highlight__change">{metric.change}</div>}
+          {metric.source && (
+            <div className="bk-metric-highlight__source-wrap">
+              <SourceRow source={metric.source} sourceUrl={metric.sourceUrl} />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/react/NewsletterCTA.tsx

@@ -0,0 +1,48 @@
+/* blog-kit React adapter — NewsletterCTA
+   Thin wrapper: all styling lives in core/css/components.css (.bk-newsletter).
+   Dark email-capture block with a brand radial glow, heading/description on
+   one side and an inline subscribe form (with honeypot) on the other.
+   The form posts natively to `action` — no client JS in the kit. */
+export interface NewsletterCTAProps {
+  heading?: string;
+  description?: string;
+  action?: string;
+  placeholder?: string;
+  buttonText?: string;
+}
+export function NewsletterCTA({
+  heading = "One email, once a week.",
+  description = "Field-tested ideas for turning chat traffic into revenue. No filler.",
+  action = "/api/newsletter",
+  placeholder = "you@studio.com",
+  buttonText = "Subscribe",
+}: NewsletterCTAProps) {
+  return (
+    <div className="bk-newsletter">
+      <span className="bk-newsletter__glow" aria-hidden="true" />
+      <div className="bk-newsletter__copy">
+        <h3 className="bk-newsletter__heading">{heading}</h3>
+        <p className="bk-newsletter__desc">{description}</p>
+      </div>
+      <div className="bk-newsletter__action">
+        <form className="bk-newsletter__form" action={action} method="post">
+          <label className="bk-newsletter__honeypot" aria-hidden="true">
+            Leave this field empty
+            <input type="text" name="website" tabIndex={-1} autoComplete="off" />
+          </label>
+          <input
+            className="bk-newsletter__input"
+            type="email"
+            name="email"
+            required
+            placeholder={placeholder}
+            autoComplete="email"
+          />
+          <button className="bk-newsletter__button" type="submit">
+            {buttonText}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/react/NumberedCard.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export interface NumberedCardProps { number?: number | string; title?: string; description?: ReactNode; children?: ReactNode; }
+export function NumberedCard({ number, title, description, children }: NumberedCardProps) {
+  const n = String(number ?? "").padStart(2, "0");
+  const body = description ?? children;
+  return (<div className="bk-numbered-card"><span className="bk-numbered-card__badge">{n}</span>{title ? <h4 className="bk-numbered-card__title">{title}</h4> : null}{body ? <p className="bk-numbered-card__body">{body}</p> : null}</div>);
+}

package/react/ProConBlock.tsx

@@ -0,0 +1,42 @@
+export interface ProConBlockProps {
+  pros?: string[];
+  cons?: string[];
+}
+
+export function ProConBlock({ pros = [], cons = [] }: ProConBlockProps) {
+  if (!pros?.length && !cons?.length) return null;
+  return (
+    <div className="bk-procon">
+      {pros.length > 0 && (
+        <div className="bk-procon__card bk-procon__card--pro" data-kind="pro">
+          <h4 className="bk-procon__heading">Pros</h4>
+          <ul className="bk-procon__list">
+            {pros.map((item, i) => (
+              <li key={i} className="bk-procon__item">
+                <span className="bk-procon__mark" aria-hidden="true">
+                  ✓
+                </span>
+                <span className="bk-procon__text">{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {cons.length > 0 && (
+        <div className="bk-procon__card bk-procon__card--con" data-kind="con">
+          <h4 className="bk-procon__heading">Cons</h4>
+          <ul className="bk-procon__list">
+            {cons.map((item, i) => (
+              <li key={i} className="bk-procon__item">
+                <span className="bk-procon__mark" aria-hidden="true">
+                  ✕
+                </span>
+                <span className="bk-procon__text">{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/react/ProseList.tsx

@@ -0,0 +1,72 @@
+/* blog-kit React adapter — ProseList
+   Thin wrapper: all styling lives in core/css/components.css (.bk-prose-list).
+   Body-copy bullet (ul) or zero-padded ordered (ol) list. Items may be plain
+   HTML strings, or {title, description} objects — any title/description object
+   flips the whole list into a two-column grid so titles and descriptions align
+   across rows. Add `divided` for dashed-divider breathing room between items. */
+import { cx } from "../core/lib";
+
+export type ProseListVariant = "ul" | "ol";
+
+export interface ProseListItem {
+  /** Bold lead-in (HTML allowed). */
+  title?: string;
+  /** Supporting copy (HTML allowed). */
+  description?: string;
+}
+
+export interface ProseListProps {
+  /** "ul" — dash markers; "ol" — zero-padded counters (01, 02, …). */
+  variant?: ProseListVariant;
+  /** Plain HTML strings, or {title, description} objects (triggers grid mode). */
+  items?: Array<string | ProseListItem>;
+  /** Dashed divider between items. */
+  divided?: boolean;
+}
+
+export function ProseList({ variant = "ul", items = [], divided = false }: ProseListProps) {
+  if (!Array.isArray(items) || items.length === 0) return null;
+  const v: ProseListVariant = variant === "ol" ? "ol" : "ul";
+  const Tag = v === "ol" ? "ol" : "ul";
+  // Grid layout kicks in when any item is an object with title+description, so
+  // titles and descriptions align into consistent columns across every row.
+  const isGrid = items.some(
+    (it) => it && typeof it === "object" && (it.title || it.description)
+  );
+  const cls = cx(
+    "bk-prose-list",
+    `bk-prose-list--${v}`,
+    divided && "bk-prose-list--divided",
+    isGrid && "bk-prose-list--grid"
+  );
+  return (
+    <Tag className={cls}>
+      {items.map((item, i) => {
+        if (isGrid) {
+          const obj: ProseListItem =
+            item && typeof item === "object" ? item : { description: String(item ?? "") };
+          return (
+            <li key={i} className="bk-prose-list__item">
+              <span className="bk-prose-list__marker" aria-hidden="true" />
+              <span
+                className="bk-prose-list__title"
+                dangerouslySetInnerHTML={{ __html: obj.title || "" }}
+              />
+              <span
+                className="bk-prose-list__desc"
+                dangerouslySetInnerHTML={{ __html: obj.description || "" }}
+              />
+            </li>
+          );
+        }
+        return (
+          <li
+            key={i}
+            className="bk-prose-list__item"
+            dangerouslySetInnerHTML={{ __html: typeof item === "string" ? item : "" }}
+          />
+        );
+      })}
+    </Tag>
+  );
+}

package/react/QuoteBlock.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from "react";
+import { ICONS } from "../core/icons";
+
+export interface QuoteBlockProps {
+  /** The quote text. Optional — children may carry the body instead (MDX). */
+  quote?: string;
+  author?: string;
+  role?: string;
+  company?: string;
+  /** Source attribution text, e.g. "Forrester AI Study, 2024". */
+  source?: string;
+  /** When set alongside `source`, the attribution row links to the original. */
+  sourceUrl?: string;
+  /** Explicit avatar URL — overrides the favicon-from-sourceUrl default. */
+  avatarUrl?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Google's public favicon-resolver URL for the source URL's host, or null when
+ * the URL is missing/unparseable so the avatar slot can be dropped entirely.
+ */
+function deriveFaviconUrl(sourceUrl?: string): string | null {
+  if (!sourceUrl) return null;
+  try {
+    const host = new URL(sourceUrl).hostname;
+    if (!host) return null;
+    return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=64`;
+  } catch {
+    return null;
+  }
+}
+
+export function QuoteBlock({
+  quote,
+  author,
+  role,
+  company,
+  source,
+  sourceUrl,
+  avatarUrl,
+  children,
+}: QuoteBlockProps) {
+  const subtitle = [role, company].filter(Boolean).join(" · ");
+  const avatarSrc = avatarUrl ?? deriveFaviconUrl(sourceUrl);
+
+  return (
+    <figure className="bk-quote">
+      <span className="bk-quote__mark" aria-hidden>&ldquo;</span>
+      <blockquote className="bk-quote__body">{quote ?? children}</blockquote>
+      {(author || subtitle) && (
+        <figcaption className="bk-quote__cite">
+          {avatarSrc && (
+            <img
+              className="bk-quote__avatar"
+              src={avatarSrc}
+              alt=""
+              aria-hidden
+              width={40}
+              height={40}
+            />
+          )}
+          <span className="bk-quote__who">
+            {author && <cite className="bk-quote__author">{author}</cite>}
+            {subtitle && <span className="bk-quote__role">{subtitle}</span>}
+          </span>
+        </figcaption>
+      )}
+      {source &&
+        (sourceUrl ? (
+          <a
+            className="bk-quote__source bk-quote__source--link"
+            href={sourceUrl}
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            <span className="bk-quote__source-kicker">Source</span>
+            {source}
+            <span className="bk-quote__source-icon" dangerouslySetInnerHTML={{ __html: ICONS["external"] }} />
+          </a>
+        ) : (
+          <div className="bk-quote__source">
+            <span className="bk-quote__source-kicker">Source</span>
+            {source}
+          </div>
+        ))}
+    </figure>
+  );
+}

package/react/RegionCallout.tsx

@@ -0,0 +1,38 @@
+/* blog-kit React adapter — RegionCallout
+   Thin wrapper: all styling lives in core/css/components.css (.bk-region-callout).
+   A bordered grid of office cells — each a flag/colour swatch beside an
+   uppercase office name and a brand-coloured monospace phone number.
+   Ported from hjd RegionCallout (.b-region). Cyan phone → --blog-brand,
+   #fff cells → --blog-paper, greys → border/bg tokens. */
+
+export interface RegionCalloutOffice {
+  /** Office / region name, rendered uppercase. */
+  name: string;
+  /** Phone number, shown in brand-coloured monospace. */
+  phone?: string;
+  /** Optional CSS background for the swatch (colour, gradient, or url()). */
+  flag?: string;
+}
+
+export interface RegionCalloutProps {
+  offices?: RegionCalloutOffice[];
+}
+
+export function RegionCallout({ offices = [] }: RegionCalloutProps) {
+  return (
+    <div className="bk-region-callout">
+      {offices.map((o, i) => (
+        <div key={i} className="bk-region-callout__cell">
+          <div
+            className="bk-region-callout__flag"
+            {...(o.flag ? { style: { background: o.flag } } : {})}
+          />
+          <div className="bk-region-callout__info">
+            <div className="bk-region-callout__name">{o.name}</div>
+            {o.phone && <div className="bk-region-callout__phone">{o.phone}</div>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/react/RelatedPosts.tsx

@@ -0,0 +1,58 @@
+/* blog-kit React adapter — RelatedPosts
+   Thin wrapper: all styling lives in core/css/components.css (.bk-related).
+   Framework-neutral <img> (no next/image) so React + Astro emit identical markup.
+   "Keep reading" grid of related-post cards. Featured image when present,
+   otherwise a tokenised gradient placeholder cycled per index. */
+export interface RelatedPost {
+  slug: string;
+  title: string;
+  excerpt?: string;
+  date?: string;
+  /** Optional category pill shown above the title. */
+  category?: string;
+  /** Featured image URL; renders as the thumbnail when present. */
+  featuredImage?: string;
+  featuredImageAlt?: string;
+}
+
+export interface RelatedPostsProps {
+  posts: RelatedPost[];
+  /** Section heading. */
+  heading?: string;
+  /** Optional override for the per-card link href; receives the slug. */
+  hrefBase?: string;
+}
+
+export function RelatedPosts({ posts, heading = "Keep reading", hrefBase = "/blog/" }: RelatedPostsProps) {
+  if (!posts || posts.length === 0) return null;
+  return (
+    <div className="bk-related">
+      <p className="bk-related__eyebrow">{heading}</p>
+      <div className="bk-related__grid">
+        {posts.map((post, i) => (
+          <a key={post.slug} className="bk-related__card" href={`${hrefBase}${post.slug}`}>
+            <div
+              className={`bk-related__thumb${post.featuredImage ? "" : ` bk-related__thumb--g${(i % 3) + 1}`}`}
+              aria-hidden={post.featuredImage ? undefined : true}
+            >
+              {post.featuredImage && (
+                <img
+                  className="bk-related__img"
+                  src={post.featuredImage}
+                  alt={post.featuredImageAlt || ""}
+                  loading="lazy"
+                  decoding="async"
+                />
+              )}
+            </div>
+            <div className="bk-related__body">
+              {post.category && <span className="bk-related__cat">{post.category}</span>}
+              <h5 className="bk-related__title">{post.title}</h5>
+              {post.excerpt && <p className="bk-related__excerpt">{post.excerpt}</p>}
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

package/react/ResultsStrip.tsx

@@ -0,0 +1,77 @@
+/* blog-kit React adapter — ResultsStrip
+   Thin wrapper: all styling lives in core/css/components.css (.bk-results-strip).
+   A horizontal strip of bordered KPI cells — each an uppercase label, a big
+   brand-coloured number, an optional mono delta (green up / red down), and an
+   optional dashed-divider "SOURCE" attribution row (links out when sourceUrl
+   is set). Collapses to a 2-up grid on narrow screens. */
+import { ICONS } from "../core/icons";
+
+interface Kpi {
+  label: string;
+  num: string;
+  /** Optional change indicator, e.g. "+182%". Rendered in mono. */
+  delta?: string;
+  /** "up" (green, default) or "down" (red). */
+  deltaDirection?: "up" | "down";
+  /** Optional source attribution, shown below in a dashed-divider row. */
+  source?: string;
+  /** Optional URL — when set alongside `source`, the row becomes a link. */
+  sourceUrl?: string;
+}
+
+export interface ResultsStripProps {
+  kpis?: Kpi[];
+}
+
+function SourceRow({ source, sourceUrl }: { source?: string; sourceUrl?: string }) {
+  if (!source) return null;
+  if (sourceUrl) {
+    return (
+      <a
+        className="bk-results-strip__source bk-results-strip__source--link"
+        href={sourceUrl}
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+      >
+        <span className="bk-results-strip__source-kicker">Source</span>
+        {source}
+        <span
+          className="bk-results-strip__source-icon"
+          aria-hidden="true"
+          dangerouslySetInnerHTML={{ __html: ICONS["external"] }}
+        />
+      </a>
+    );
+  }
+  return (
+    <div className="bk-results-strip__source">
+      <span className="bk-results-strip__source-kicker">Source</span>
+      {source}
+    </div>
+  );
+}
+
+export function ResultsStrip({ kpis = [] }: ResultsStripProps) {
+  if (!kpis || kpis.length === 0) return null;
+
+  return (
+    <div className="bk-results-strip">
+      {kpis.map((k, i) => (
+        <div className="bk-results-strip__cell" key={i}>
+          <div className="bk-results-strip__label">{k.label}</div>
+          <div className="bk-results-strip__num">{k.num}</div>
+          {k.delta && (
+            <div
+              className={`bk-results-strip__delta${
+                k.deltaDirection === "down" ? " bk-results-strip__delta--down" : ""
+              }`}
+            >
+              {k.delta}
+            </div>
+          )}
+          <SourceRow source={k.source} sourceUrl={k.sourceUrl} />
+        </div>
+      ))}
+    </div>
+  );
+}