@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/error-state-error-card-panel/ErrorStateErrorCardPanel.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import { Check, Copy, TriangleAlert } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip/tooltip"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Error Card Panel.
+ *
+ * One card on a muted field: an alert glyph in a tinted disc, the heading
+ * and a line of help, two buttons, and under a divider the error ID with a
+ * button that copies it. The copy button swaps its glyph for a check and
+ * shows "Copied" for a moment, as Figma's dev notes describe.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). Direction is the page's `dir`; every
+ * side is a logical one. The ID stays Latin and left to right in Arabic.
+ */
+
+export interface ErrorStateErrorCardPanelAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateErrorCardPanelCopy {
+  /** The card's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The solid button: the way out, a link. */
+  primaryAction: ErrorStateErrorCardPanelAction
+  /** The outline button's label. It calls `onRetry`, or reloads the page. Hidden when empty. */
+  retryLabel: React.ReactNode
+  /** The label before the error ID. */
+  errorIdLabel: React.ReactNode
+  /** The copy button's accessible name. */
+  copyLabel: string
+  /** Shown, and announced, for a moment after the ID is copied. */
+  copiedLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateErrorCardPanelCopy> = {
+  en: {
+    heading: "404 — page not found",
+    description:
+      "We could not load the page you requested. It may have been deleted, or you may not have permission to view it any more.",
+    primaryAction: { label: "Back to dashboard", href: "/" },
+    retryLabel: "Try again",
+    errorIdLabel: "Error ID:",
+    copyLabel: "Copy error ID",
+    copiedLabel: "Copied",
+  },
+  ar: {
+    heading: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>: الصفحة غير موجودة
+      </>
+    ),
+    description: "تعذّر تحميل الصفحة التي طلبتها. ربما تم حذفها، أو لم تعد لديك صلاحية عرضها.",
+    primaryAction: { label: "العودة إلى لوحة التحكم", href: "/" },
+    retryLabel: "حاول مجددًا",
+    errorIdLabel: "معرّف الخطأ:",
+    copyLabel: "نسخ معرّف الخطأ",
+    copiedLabel: "تم النسخ",
+  },
+}
+
+export interface ErrorStateErrorCardPanelProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateErrorCardPanelCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The error's ID, shown under the divider and copied by its button. Hidden when empty.
+   * @default "3a760e2a7b3349a887b1c5f6ee46192d"
+   */
+  errorId?: string
+  /**
+   * Called by the retry button. Return a promise to show the button busy until it settles.
+   * @default reloads the page
+   */
+  onRetry?: () => void | Promise<unknown>
+  /**
+   * The glyph in the tinted disc. Pass `null` to drop it.
+   * @default a triangle alert
+   */
+  icon?: React.ReactNode
+}
+
+/** How long "Copied" stays up, as Figma's dev notes say. */
+const COPIED_FOR = 1500
+
+export function ErrorStateErrorCardPanel({
+  locale = "en",
+  heading,
+  description,
+  primaryAction,
+  retryLabel,
+  errorIdLabel,
+  copyLabel,
+  copiedLabel,
+  errorId = "3a760e2a7b3349a887b1c5f6ee46192d",
+  onRetry,
+  icon,
+  className,
+  ...props
+}: ErrorStateErrorCardPanelProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const primary = primaryAction ?? copy.primaryAction
+  const retry = retryLabel ?? copy.retryLabel
+  const glyph = icon === undefined ? <TriangleAlert aria-hidden="true" className="size-6" size={24} strokeWidth={1.5} absoluteStrokeWidth /> : icon
+
+  const [retrying, setRetrying] = React.useState(false)
+  const handleRetry = async () => {
+    if (!onRetry) {
+      window.location.reload()
+      return
+    }
+    const result = onRetry()
+    if (!result || typeof (result as Promise<unknown>).then !== "function") return
+    setRetrying(true)
+    try {
+      await result
+    } catch {
+      // The app reports its own retry failures; the block only stops waiting.
+    } finally {
+      setRetrying(false)
+    }
+  }
+
+  const [copied, setCopied] = React.useState(false)
+  React.useEffect(() => {
+    if (!copied) return
+    const timer = window.setTimeout(() => setCopied(false), COPIED_FOR)
+    return () => window.clearTimeout(timer)
+  }, [copied])
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(errorId)
+      setCopied(true)
+    } catch {
+      // No clipboard (an insecure page, or permission refused): the ID stays
+      // on screen to select by hand.
+    }
+  }
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-muted p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[560px] flex-col items-center gap-5 rounded-xl bg-card p-6 text-center shadow-lg ring-1 ring-inset ring-border md:gap-6 md:p-10">
+        {glyph ? (
+          <div className="flex size-14 shrink-0 items-center justify-center rounded-full bg-destructive/[0.12] text-destructive">
+            {glyph}
+          </div>
+        ) : null}
+        <div className="flex w-full flex-col gap-2.5">
+          <h1 id={headingId} className="text-xl font-semibold text-foreground md:text-2xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-sm text-muted-foreground">{description ?? copy.description}</p>
+        </div>
+        <div className="flex w-full flex-col gap-2.5 md:w-auto md:flex-row md:gap-3">
+          <a href={primary.href} className={buttonVariants()}>
+            {primary.label}
+          </a>
+          {retry ? (
+            <Button variant="outline" loading={retrying} onClick={handleRetry}>
+              {retry}
+            </Button>
+          ) : null}
+        </div>
+        {errorId ? (
+          <>
+            <hr className="w-full border-border" />
+            <p className="flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+              <span>{errorIdLabel ?? copy.errorIdLabel}</span>
+              <bdi dir="ltr" className="font-medium">
+                {errorId}
+              </bdi>
+              <Tooltip open={copied}>
+                <TooltipTrigger
+                  type="button"
+                  aria-label={copyLabel ?? copy.copyLabel}
+                  onClick={handleCopy}
+                  className="inline-flex size-3.5 items-center justify-center rounded-sm text-muted-foreground [outline:none] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
+                >
+                  {copied ? (
+                    <Check aria-hidden="true" className="size-3.5" size={14} strokeWidth={1.5} absoluteStrokeWidth />
+                  ) : (
+                    <Copy aria-hidden="true" className="size-3.5" size={14} strokeWidth={1.5} absoluteStrokeWidth />
+                  )}
+                </TooltipTrigger>
+                <TooltipContent>{copiedLabel ?? copy.copiedLabel}</TooltipContent>
+              </Tooltip>
+              <span role="status" className="sr-only">
+                {copied ? (copiedLabel ?? copy.copiedLabel) : null}
+              </span>
+            </p>
+          </>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateErrorCardPanelCopy = COPY

package/registry/blocks/error-state-error-card-panel/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateErrorCardPanel,
+  errorStateErrorCardPanelCopy,
+  type ErrorStateErrorCardPanelAction,
+  type ErrorStateErrorCardPanelCopy,
+  type ErrorStateErrorCardPanelProps,
+} from "./ErrorStateErrorCardPanel"

package/registry/blocks/error-state-full-bleed-photo/ErrorStateFullBleedPhoto.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Full-Bleed Photo.
+ *
+ * A photograph across the whole block under a scrim, with a centred badge,
+ * heading and button on top. The scrim is dark and the text light in both
+ * modes, as Figma draws it: a photo needs a dark scrim whatever the theme.
+ * In light mode that is the inverse tokens, `background-inverse` at 62% and
+ * `foreground-inverse`; in dark mode the page's own `background` and
+ * `foreground` hold the same two colours, so `dark:` switches to them. The
+ * button keeps Figma's light secondary look the same way. No photo comes
+ * with the block: pass `image`, and until then the stage is a `muted`
+ * placeholder under the same scrim.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). The message is centred, so only the
+ * text direction changes in Arabic; the photo is never mirrored.
+ */
+
+export interface ErrorStateFullBleedPhotoAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateFullBleedPhotoImage {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface ErrorStateFullBleedPhotoCopy {
+  /** The status badge above the heading. Hidden when empty. */
+  badge: React.ReactNode
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The button: the way out, usually home. Hidden when null. */
+  action: ErrorStateFullBleedPhotoAction | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateFullBleedPhotoCopy> = {
+  en: {
+    badge: "404 — PAGE NOT FOUND",
+    heading: "You have wandered off the path",
+    action: { label: "Back to home", href: "/" },
+  },
+  ar: {
+    badge: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>: الصفحة غير موجودة
+      </>
+    ),
+    heading: "لقد ابتعدت عن المسار",
+    action: { label: "العودة إلى الرئيسية", href: "/" },
+  },
+}
+
+export interface ErrorStateFullBleedPhotoProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateFullBleedPhotoCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The photo behind the message. None by default: the stage shows a `muted`
+   * placeholder.
+   * @default none: a `muted` placeholder
+   */
+  image?: ErrorStateFullBleedPhotoImage
+}
+
+export function ErrorStateFullBleedPhoto({
+  locale = "en",
+  badge,
+  heading,
+  action,
+  image,
+  className,
+  ...props
+}: ErrorStateFullBleedPhotoProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const status = badge ?? copy.badge
+  const cta = action === undefined ? copy.action : action
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("relative isolate flex min-h-[440px] overflow-hidden bg-muted md:min-h-[520px] lg:min-h-[640px]", className)}
+      {...props}
+    >
+      {image ? (
+        <img src={image.src} alt={image.alt} decoding="async" className="absolute inset-0 -z-10 size-full object-cover" />
+      ) : null}
+      <div className="flex w-full flex-col items-center justify-center bg-background-inverse/[0.62] p-6 md:p-16 lg:p-24 dark:bg-background/[0.62]">
+        <div className="flex w-full max-w-[784px] flex-col items-center gap-4 text-center">
+          {status ? (
+            <Badge variant="solid" tone="destructive" size="sm" radius="standard">
+              {status}
+            </Badge>
+          ) : null}
+          <h1 id={headingId} className="text-3xl font-semibold text-foreground-inverse lg:text-5xl dark:text-foreground">
+            {heading ?? copy.heading}
+          </h1>
+          {cta ? (
+            <div className="flex w-full flex-col md:w-auto md:flex-row">
+              <a
+                href={cta.href}
+                className={buttonVariants({ variant: "secondary", className: "dark:bg-primary dark:text-primary-foreground" })}
+              >
+                {cta.label}
+              </a>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateFullBleedPhotoCopy = COPY

package/registry/blocks/error-state-full-bleed-photo/index.ts

@@ -0,0 +1,8 @@
+export {
+  ErrorStateFullBleedPhoto,
+  errorStateFullBleedPhotoCopy,
+  type ErrorStateFullBleedPhotoAction,
+  type ErrorStateFullBleedPhotoImage,
+  type ErrorStateFullBleedPhotoCopy,
+  type ErrorStateFullBleedPhotoProps,
+} from "./ErrorStateFullBleedPhoto"

package/registry/blocks/error-state-ghost-watermark/ErrorStateGhostWatermark.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Ghost Watermark.
+ *
+ * The error code as a faint watermark in the destructive colour, behind a
+ * centred heading, a line of help and two ways out. The stage keeps Figma's
+ * fixed height at each breakpoint and centres the message in it. Mobile
+ * first: the base classes are Figma's Mobile (360), `md:` its Tablet (768)
+ * and `lg:` its Desktop (1440). Direction is the page's `dir`; the block is
+ * centred, so only the buttons swap ends in Arabic.
+ */
+
+export interface ErrorStateGhostWatermarkAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateGhostWatermarkCopy {
+  /** The watermark: the status code, faint, behind the message. Hidden when empty. Decorative, so screen readers skip it. */
+  code: React.ReactNode
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The solid button: the way out, usually home. */
+  primaryAction: ErrorStateGhostWatermarkAction
+  /** The outline button beside it: the quieter escape. Hidden when null. */
+  secondaryAction: ErrorStateGhostWatermarkAction | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateGhostWatermarkCopy> = {
+  en: {
+    code: "404",
+    heading: "The requested URL was not found on this server.",
+    description:
+      "Check the address for typos, or start again from the homepage. If you followed a link from Fasla, let us know so we can fix it.",
+    primaryAction: { label: "Return home", href: "/" },
+    secondaryAction: { label: "Report broken link", href: "#report" },
+  },
+  ar: {
+    code: "404",
+    heading: "لم يتم العثور على الرابط المطلوب على هذا الخادم.",
+    description:
+      "تحقق من العنوان بحثًا عن أخطاء إملائية، أو ابدأ من جديد من الصفحة الرئيسية. إذا وصلت عبر رابط من فاصلة، فأخبرنا لنصلحه.",
+    primaryAction: { label: "العودة إلى الرئيسية", href: "/" },
+    secondaryAction: { label: "أبلغ عن رابط معطل", href: "#report" },
+  },
+}
+
+export interface ErrorStateGhostWatermarkProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateGhostWatermarkCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function ErrorStateGhostWatermark({
+  locale = "en",
+  code,
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
+  className,
+  ...props
+}: ErrorStateGhostWatermarkProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const watermark = code ?? copy.code
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="relative mx-auto flex h-[400px] w-full max-w-[1248px] items-center justify-center overflow-hidden md:h-[420px] lg:h-[520px]">
+        {watermark ? (
+          <p
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-x-0 top-7 select-none text-center text-7xl font-bold text-destructive/10 md:top-9 md:text-8xl lg:top-11 lg:text-9xl"
+          >
+            {watermark}
+          </p>
+        ) : null}
+        <div className="relative flex w-full flex-col items-center gap-5 text-center md:gap-6 lg:max-w-[560px]">
+          <h1 id={headingId} className="text-2xl font-semibold text-foreground md:text-3xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          <div className="flex w-full flex-col gap-2.5 md:w-auto md:flex-row md:gap-3">
+            <a href={primary.href} className={buttonVariants()}>
+              {primary.label}
+            </a>
+            {secondary ? (
+              <a href={secondary.href} className={buttonVariants({ variant: "outline" })}>
+                {secondary.label}
+              </a>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateGhostWatermarkCopy = COPY

package/registry/blocks/error-state-ghost-watermark/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateGhostWatermark,
+  errorStateGhostWatermarkCopy,
+  type ErrorStateGhostWatermarkAction,
+  type ErrorStateGhostWatermarkCopy,
+  type ErrorStateGhostWatermarkProps,
+} from "./ErrorStateGhostWatermark"

package/registry/blocks/error-state-helpful-links-list/ErrorStateHelpfulLinksList.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight, BookOpen, LayoutGrid, LifeBuoy, Mail, Map as MapIcon, Sparkles, Users } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Helpful Links List.
+ *
+ * A centred 404 message over a card of popular destinations, two to a row
+ * from Tablet up and one per row on Mobile, then two ways out. Mobile first:
+ * the base classes are Figma's Mobile (360), `md:` its Tablet (768) and `lg:`
+ * its Desktop (1440). Direction is the page's `dir`; every side is a logical
+ * one, so the rows mirror in Arabic and each arrow turns to point up-left.
+ */
+
+export interface ErrorStateHelpfulLinksListAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateHelpfulLinksListDestination {
+  label: React.ReactNode
+  href: string
+  /** The glyph before the label, a 16px lucide icon. */
+  icon?: React.ReactNode
+}
+
+export interface ErrorStateHelpfulLinksListCopy {
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The label over the destinations, an `h2`. */
+  destinationsLabel: React.ReactNode
+  /** The links in the card, in reading order. The card is hidden when the list is empty. */
+  destinations: ErrorStateHelpfulLinksListDestination[]
+  /** The solid button: the way out, usually home. */
+  primaryAction: ErrorStateHelpfulLinksListAction
+  /** The ghost button beside it: the quieter escape. Hidden when null. */
+  secondaryAction: ErrorStateHelpfulLinksListAction | null
+}
+
+const icon = "size-4"
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateHelpfulLinksListCopy> = {
+  en: {
+    heading: "404 — we can’t find that page",
+    description: "Searching for something in particular? One of these is probably what you were after.",
+    destinationsLabel: "POPULAR DESTINATIONS",
+    destinations: [
+      { label: "Product overview", href: "#product", icon: <LayoutGrid size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "Documentation", href: "#docs", icon: <BookOpen size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "What’s new", href: "#changelog", icon: <Sparkles size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "Customer stories", href: "#customers", icon: <Users size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "Help centre", href: "#help", icon: <LifeBuoy size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "Contact sales", href: "#sales", icon: <Mail size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+    ],
+    primaryAction: { label: "Go back home", href: "/" },
+    secondaryAction: { label: "Search instead", href: "#search" },
+  },
+  ar: {
+    heading: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>: لا يمكننا العثور على تلك الصفحة
+      </>
+    ),
+    description: "تبحث عن شيء محدد؟ ربما يكون أحد هذه الروابط ما تريده.",
+    destinationsLabel: "الوجهات الأكثر زيارة",
+    destinations: [
+      { label: "نظرة عامة على المنتج", href: "#product", icon: <LayoutGrid size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "التوثيق", href: "#docs", icon: <BookOpen size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "ما الجديد", href: "#changelog", icon: <Sparkles size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "قصص العملاء", href: "#customers", icon: <Users size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "مركز المساعدة", href: "#help", icon: <LifeBuoy size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+      { label: "تواصل مع المبيعات", href: "#sales", icon: <Mail size={16} strokeWidth={1.5} absoluteStrokeWidth className={icon} /> },
+    ],
+    primaryAction: { label: "العودة إلى الرئيسية", href: "/" },
+    secondaryAction: { label: "ابحث بدلًا من ذلك", href: "#search" },
+  },
+}
+
+export interface ErrorStateHelpfulLinksListProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateHelpfulLinksListCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The glyph in the badge. Pass `null` to drop the badge.
+   * @default a folded map
+   */
+  icon?: React.ReactNode
+}
+
+export function ErrorStateHelpfulLinksList({
+  locale = "en",
+  heading,
+  description,
+  destinationsLabel,
+  destinations,
+  primaryAction,
+  secondaryAction,
+  icon: glyphProp,
+  className,
+  ...props
+}: ErrorStateHelpfulLinksListProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const labelId = React.useId()
+  const list = destinations ?? copy.destinations
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const glyph = glyphProp === undefined ? <MapIcon aria-hidden="true" className="size-7" size={28} strokeWidth={1.5} absoluteStrokeWidth /> : glyphProp
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[664px] flex-col items-center gap-6 text-center md:max-w-none md:gap-8 lg:max-w-[664px]">
+        {glyph ? (
+          <div className="flex size-16 items-center justify-center rounded-lg bg-muted text-muted-foreground">{glyph}</div>
+        ) : null}
+        <div className="flex w-full flex-col gap-3">
+          <h1 id={headingId} className="text-2xl font-semibold text-foreground md:text-3xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+        </div>
+
+        {list.length > 0 ? (
+          <div className="flex w-full flex-col gap-4 rounded-xl border border-border bg-card p-[15px] text-start md:p-[19px]">
+            <h2 id={labelId} className="text-xs font-medium text-muted-foreground">
+              {destinationsLabel ?? copy.destinationsLabel}
+            </h2>
+            <ul aria-labelledby={labelId} className="grid grid-cols-1 gap-1 md:grid-cols-2 md:gap-2">
+              {list.map((destination, index) => (
+                <li key={index} className="flex">
+                  <a
+                    href={destination.href}
+                    className={cn(
+                      "flex w-full items-center justify-between gap-3 rounded-[var(--radius-md)] px-3 py-2.5 [outline:none]",
+                      "transition-colors hover:bg-muted motion-reduce:transition-none",
+                      "focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                    )}
+                  >
+                    <span className="flex min-w-0 items-center gap-2.5">
+                      {destination.icon ? (
+                        <span aria-hidden="true" className="flex shrink-0 text-muted-foreground [&_svg]:size-4">
+                          {destination.icon}
+                        </span>
+                      ) : null}
+                      <span className="text-sm font-medium text-foreground">{destination.label}</span>
+                    </span>
+                    <ArrowUpRight
+                      aria-hidden="true"
+                      size={14} strokeWidth={1.5} absoluteStrokeWidth
+                      className="size-3.5 shrink-0 text-muted-foreground [&:dir(rtl)]:-scale-x-100"
+                    />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+
+        <div className="flex w-full flex-col gap-2.5 md:w-auto md:flex-row md:gap-3">
+          <a href={primary.href} className={buttonVariants()}>
+            {primary.label}
+          </a>
+          {secondary ? (
+            <a href={secondary.href} className={buttonVariants({ variant: "ghost" })}>
+              {secondary.label}
+            </a>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateHelpfulLinksListCopy = COPY

package/registry/blocks/error-state-helpful-links-list/index.ts

@@ -0,0 +1,8 @@
+export {
+  ErrorStateHelpfulLinksList,
+  errorStateHelpfulLinksListCopy,
+  type ErrorStateHelpfulLinksListAction,
+  type ErrorStateHelpfulLinksListCopy,
+  type ErrorStateHelpfulLinksListDestination,
+  type ErrorStateHelpfulLinksListProps,
+} from "./ErrorStateHelpfulLinksList"