@the-smithy/create-hearth-site 0.19.0 → 0.21.0

package/template/src/components/ui.tsx

@@ -1,128 +0,0 @@
-import Link from "next/link";
-import { Fragment, type ReactNode } from "react";
-import ReactMarkdown from "react-markdown";
-
-type LinkRef = { label: string; href: string };
-export type Tone = "default" | "muted" | "inverse" | "accent";
-
-const toneClass: Record<Tone, string> = {
-  default: "bg-bg text-ink",
-  muted: "bg-muted text-ink",
-  inverse: "bg-inverse text-inverse-ink",
-  accent: "bg-accent text-accent-ink",
-};
-
-export const isDark = (tone?: Tone) => tone === "inverse" || tone === "accent";
-
-/** A full-width band with the site's content width inside. */
-export function Section({ tone = "default", className = "", children }: { tone?: Tone; className?: string; children: ReactNode }) {
-  return (
-    <section className={toneClass[tone]}>
-      <div className={`mx-auto max-w-site px-4 py-16 sm:px-6 sm:py-20 ${className}`}>{children}</div>
-    </section>
-  );
-}
-
-/**
- * Headings may mark words with *asterisks* to highlight them:
- * "Fresh bread, *baked daily*".
- */
-export function Emphasis({ text, className = "text-highlight" }: { text: string; className?: string }) {
-  return (
-    <>
-      {text.split(/\*([^*]+)\*/g).map((part, i) =>
-        i % 2 ? (
-          <span key={i} className={className}>
-            {part}
-          </span>
-        ) : (
-          <Fragment key={i}>{part}</Fragment>
-        ),
-      )}
-    </>
-  );
-}
-
-/** The text without highlight markers, for alt text and titles. */
-export const plain = (text: string) => text.replace(/\*([^*]+)\*/g, "$1");
-
-export function SectionHeading({ eyebrow, heading, intro, dark }: { eyebrow?: string; heading?: string; intro?: string; dark?: boolean }) {
-  if (!eyebrow && !heading && !intro) return null;
-  return (
-    <div className="mb-10 max-w-3xl">
-      {eyebrow ? <p className="mb-3 text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{eyebrow}</p> : null}
-      {heading ? (
-        <h2 className="text-[clamp(28px,3.4vw,40px)] font-bold leading-tight tracking-tight">
-          <Emphasis text={heading} className={dark ? "underline decoration-2 underline-offset-4" : "text-highlight"} />
-        </h2>
-      ) : null}
-      {intro ? <p className="mt-4 text-lg leading-relaxed opacity-85">{intro}</p> : null}
-    </div>
-  );
-}
-
-export function Markdown({ children, className = "" }: { children: string; className?: string }) {
-  return (
-    <div className={`prose text-lg ${className}`}>
-      <ReactMarkdown>{children}</ReactMarkdown>
-    </div>
-  );
-}
-
-const isExternal = (href: string) => /^(https?:|mailto:|tel:)/.test(href);
-
-/** A link to a path on the site or to anywhere else. */
-export function SmartLink({ href, className, children }: { href: string; className?: string; children: ReactNode }) {
-  return isExternal(href) ? (
-    <a href={href} className={className}>
-      {children}
-    </a>
-  ) : (
-    <Link href={href} className={className}>
-      {children}
-    </Link>
-  );
-}
-
-export function Button({ link, variant = "primary", dark }: { link?: LinkRef; variant?: "primary" | "secondary"; dark?: boolean }) {
-  if (!link) return null;
-  const cls =
-    variant === "primary"
-      ? dark
-        ? "rounded-lg bg-inverse-ink px-6 py-3.5 font-semibold text-inverse hover:opacity-90"
-        : "rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90"
-      : "rounded-lg border-[1.5px] border-current/40 px-6 py-3.5 font-medium hover:border-current";
-  return (
-    <SmartLink href={link.href} className={`inline-block ${cls}`}>
-      {link.label}
-    </SmartLink>
-  );
-}
-
-/**
- * An image from Hearth. Its width and height (from Hearth's media library) reserve its space, so the page doesn't jump
- * as it loads. `priority` loads it first: use it for the image at the top of the page (the hero), which is usually
- * the largest thing on screen; everything else loads as it scrolls into view.
- */
-/* eslint-disable @next/next/no-img-element -- Hearth serves media from its CDN at the uploaded size */
-export function Img({
-  image,
-  className = "",
-  priority = false,
-}: {
-  image: { src: string; alt: string; width?: number; height?: number };
-  className?: string;
-  priority?: boolean;
-}) {
-  return (
-    <img
-      src={image.src}
-      alt={image.alt}
-      {...(image.width && image.height ? { width: image.width, height: image.height } : {})}
-      loading={priority ? "eager" : "lazy"}
-      fetchPriority={priority ? "high" : "auto"}
-      decoding={priority ? "sync" : "async"}
-      className={className}
-    />
-  );
-}