@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/error-state-offline-state/ErrorStateOfflineState.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from "react"
+import { Check, WifiOff } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Offline State.
+ *
+ * The page a lost connection leaves behind: a tinted wifi-off badge, the
+ * message, Try again and Work offline, and a muted panel listing what still
+ * works without a connection. It has no status code.
+ *
+ * Try again is real: while `onRetry` runs, the button shows its spinner, and
+ * if it rejects, a line under the actions says the connection is still down.
+ * Without `onRetry` it reloads the page.
+ *
+ * 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.
+ */
+
+export interface ErrorStateOfflineStateAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateOfflineStateCopy {
+  /** 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 that runs `onRetry`. */
+  retryLabel: React.ReactNode
+  /** Read out while `onRetry` runs. */
+  retryingLabel: string
+  /** Shown under the actions when `onRetry` rejects. */
+  retryError: React.ReactNode
+  /** The outline link beside it, to what works offline. Hidden when null. */
+  offlineAction: ErrorStateOfflineStateAction | null
+  /** The panel's heading. */
+  availableHeading: React.ReactNode
+  /** The panel's list: what still works offline. The panel is hidden when the list is empty. */
+  available: React.ReactNode[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateOfflineStateCopy> = {
+  en: {
+    heading: "You’re offline",
+    description:
+      "We can’t reach Fasla right now. Check your connection and try again — nothing you were working on has been lost.",
+    retryLabel: "Try again",
+    retryingLabel: "Reconnecting",
+    retryError: "Still no connection. Check your network and try again.",
+    offlineAction: { label: "Work offline", href: "#offline" },
+    availableHeading: "STILL AVAILABLE OFFLINE",
+    available: ["Drafts saved in the last 7 days", "Downloaded reports and exports", "Everything in your local workspace cache"],
+  },
+  ar: {
+    heading: "أنت غير متصل",
+    description: "لا يمكننا الوصول إلى فاصلة الآن. تحقق من اتصالك وحاول مجددًا. لم يُفقد شيء مما كنت تعمل عليه.",
+    retryLabel: "حاول مجددًا",
+    retryingLabel: "جارٍ إعادة الاتصال",
+    retryError: "ما زلت غير متصل. تحقق من شبكتك وحاول مجددًا.",
+    offlineAction: { label: "العمل دون اتصال", href: "#offline" },
+    availableHeading: "لا يزال متاحًا دون اتصال",
+    available: [
+      <>
+        المسودات المحفوظة خلال آخر <bdi dir="ltr">7</bdi> أيام
+      </>,
+      "التقارير والملفات المُنزّلة",
+      "كل ما في ذاكرة مساحة عملك المحلية",
+    ],
+  },
+}
+
+export interface ErrorStateOfflineStateProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateOfflineStateCopy> {
+  /** 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 wifi-off
+   */
+  icon?: React.ReactNode
+  /**
+   * Runs when Try again is pressed. The button shows its spinner until the
+   * promise settles; a rejection shows `retryError`.
+   * @default reloads the page
+   */
+  onRetry?: () => Promise<void> | void
+}
+
+export function ErrorStateOfflineState({
+  locale = "en",
+  heading,
+  description,
+  retryLabel,
+  retryingLabel,
+  retryError,
+  offlineAction,
+  availableHeading,
+  available,
+  icon,
+  onRetry,
+  className,
+  ...props
+}: ErrorStateOfflineStateProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const panelId = React.useId()
+  const [status, setStatus] = React.useState<"idle" | "pending" | "error">("idle")
+  const link = offlineAction === undefined ? copy.offlineAction : offlineAction
+  const list = available ?? copy.available
+  const glyph = icon === undefined ? <WifiOff size={30} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="size-[30px]" /> : icon
+
+  const retry = async () => {
+    if (!onRetry) {
+      window.location.reload()
+      return
+    }
+    setStatus("pending")
+    try {
+      await onRetry()
+      setStatus("idle")
+    } catch {
+      setStatus("error")
+    }
+  }
+
+  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-[520px] flex-col items-center gap-6 text-center md:max-w-none md:gap-7 lg:max-w-[520px]">
+        {glyph ? (
+          <div className="flex size-14 items-center justify-center rounded-full bg-destructive/10 text-destructive md:size-[72px]">
+            {glyph}
+          </div>
+        ) : null}
+        <div className="flex w-full flex-col gap-2.5">
+          <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>
+        <div className="flex w-full flex-col gap-2.5 md:w-auto md:flex-row md:gap-3">
+          <Button loading={status === "pending"} loadingLabel={retryingLabel ?? copy.retryingLabel} onClick={retry}>
+            {retryLabel ?? copy.retryLabel}
+          </Button>
+          {link ? (
+            <a href={link.href} className={buttonVariants({ variant: "outline" })}>
+              {link.label}
+            </a>
+          ) : null}
+        </div>
+        <p role="status" className="text-sm text-destructive empty:hidden">
+          {status === "error" ? (retryError ?? copy.retryError) : null}
+        </p>
+        {list.length > 0 ? (
+          <section
+            aria-labelledby={panelId}
+            className="flex w-full flex-col gap-3 rounded-lg bg-muted p-4 text-start md:p-5"
+          >
+            <h2 id={panelId} className="text-xs font-medium text-muted-foreground">
+              {availableHeading ?? copy.availableHeading}
+            </h2>
+            <ul className="flex flex-col gap-3">
+              {list.map((item, index) => (
+                <li key={index} className="flex items-center gap-2.5 text-sm text-muted-foreground">
+                  <Check size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="size-3.5 shrink-0 text-success" />
+                  <span>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ) : 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 errorStateOfflineStateCopy = COPY

package/registry/blocks/error-state-offline-state/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateOfflineState,
+  errorStateOfflineStateCopy,
+  type ErrorStateOfflineStateAction,
+  type ErrorStateOfflineStateCopy,
+  type ErrorStateOfflineStateProps,
+} from "./ErrorStateOfflineState"

package/registry/blocks/error-state-photo-collage-scatter/ErrorStatePhotoCollageScatter.tsx

@@ -0,0 +1,224 @@
+"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=Photo Collage Scatter.
+ *
+ * Five prints scattered at an angle around a centred message, like photos
+ * tipped out on a table. Mobile keeps three of them, across the top. No
+ * photos come with the block: pass `photos`, and until then each print shows
+ * a `muted` placeholder of the same size.
+ *
+ * The message is never covered. From Tablet up the block is three columns:
+ * the message in the middle, in the flow and above everything, and a rail of
+ * prints either side. Each print is absolutely positioned inside its rail,
+ * with its offset and width as a share of the rail, so at Figma's 768 and
+ * 1440 it lands on Figma's offsets, and at any other width the prints scale
+ * with the rails instead of sliding under the message; they never grow past
+ * Figma's size. Figma's Desktop bottom-start print reaches into the
+ * message's column; here it stays in its rail. On a phone the three prints
+ * sit in a band above the message, at Figma's offsets.
+ *
+ * Offsets are logical (`start`/`end`), and the prints turn about their
+ * top-left corner, as Figma turns them. In Arabic each print's box moves to
+ * the mirrored spot and its angle negates, as Figma's RTL variants place
+ * them, so the fan reads the same way round. The photographs are never
+ * flipped.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface ErrorStatePhotoCollageScatterAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStatePhotoCollageScatterPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface ErrorStatePhotoCollageScatterCopy {
+  /** The status code in display type. Hidden when empty. */
+  code: React.ReactNode
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The text under the heading: what to do next. */
+  description: React.ReactNode
+  /** The solid button: the way out, usually home. */
+  primaryAction: ErrorStatePhotoCollageScatterAction
+  /** The outline button beside it: the quieter escape. Hidden when null. */
+  secondaryAction: ErrorStatePhotoCollageScatterAction | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStatePhotoCollageScatterCopy> = {
+  en: {
+    code: "404",
+    heading: "This page is not in the album",
+    description: "We kept the pictures, but the page you asked for is gone. Head back and pick up where you left off.",
+    primaryAction: { label: "Back to home", href: "/" },
+    secondaryAction: { label: "View the gallery", href: "#gallery" },
+  },
+  ar: {
+    code: "404",
+    heading: "هذه الصفحة ليست في الألبوم",
+    description: "احتفظنا بالصور، لكن الصفحة التي طلبتها لم تعد موجودة. عد وتابع من حيث توقفت.",
+    primaryAction: { label: "العودة إلى الرئيسية", href: "/" },
+    secondaryAction: { label: "استعرض المعرض", href: "#gallery" },
+  },
+}
+
+type Print = {
+  /** Which of the five photos it shows, in Figma's order. */
+  photo: number
+  className: string
+  rotate: string
+}
+
+/*
+ * Where each print sits, and its angle. Figma turns a print anticlockwise for
+ * a positive angle, CSS clockwise, so each `rotate` is Figma's angle negated,
+ * and negated again in Arabic. Heights follow from each print's aspect ratio.
+ */
+
+/** On a phone: Figma's Mobile offsets, in a 258px band above the message. */
+const PHONE_PRINTS: Print[] = [
+  { photo: 0, className: "start-0 top-0 w-[104px]", rotate: "rotate-[7deg] [&:dir(rtl)]:rotate-[-7deg]" },
+  { photo: 3, className: "end-0 top-2 w-[104px]", rotate: "rotate-[-6deg] [&:dir(rtl)]:rotate-[6deg]" },
+  { photo: 4, className: "start-24 top-[148px] w-[116px]", rotate: "rotate-[5deg] [&:dir(rtl)]:rotate-[-5deg]" },
+]
+
+/**
+ * From Tablet up, as shares of the rail: Figma's offsets and widths at 768
+ * (a 170px rail) and 1440 (a 414px rail), trimmed where a turned print would
+ * otherwise cross into the message's column.
+ */
+const START_RAIL: Print[] = [
+  {
+    photo: 0,
+    className: "start-0 top-[30px] w-[88%] max-w-[150px] lg:start-[4.8%] lg:top-[54px] lg:w-[49.3%] lg:max-w-[204px]",
+    rotate: "rotate-[7deg] [&:dir(rtl)]:rotate-[-7deg]",
+  },
+  {
+    photo: 1,
+    className: "start-[5.9%] top-[268px] w-[82%] max-w-[150px] lg:start-[13%] lg:top-[352px] lg:w-[51.7%] lg:max-w-[214px]",
+    rotate: "rotate-[-5deg] [&:dir(rtl)]:rotate-[5deg]",
+  },
+  {
+    photo: 2,
+    className: "hidden lg:block lg:start-[52%] lg:top-[432px] lg:w-[40.6%] lg:max-w-[168px]",
+    rotate: "rotate-[-9deg] [&:dir(rtl)]:rotate-[9deg]",
+  },
+]
+
+const END_RAIL: Print[] = [
+  {
+    photo: 2,
+    className: "end-[28.2%] top-[402px] w-[65.9%] max-w-[112px] lg:hidden",
+    rotate: "rotate-[-9deg] [&:dir(rtl)]:rotate-[9deg]",
+  },
+  {
+    photo: 3,
+    className: "end-[1.2%] top-[18px] w-[85.9%] max-w-[146px] lg:end-[8.7%] lg:top-9 lg:w-[48.3%] lg:max-w-[200px]",
+    rotate: "rotate-[-6deg] [&:dir(rtl)]:rotate-[6deg]",
+  },
+  {
+    photo: 4,
+    className: "end-[3.5%] top-[248px] w-[85%] max-w-[166px] lg:end-[21.7%] lg:top-[336px] lg:w-[55.6%] lg:max-w-[230px]",
+    rotate: "rotate-[5deg] [&:dir(rtl)]:rotate-[-5deg]",
+  },
+]
+
+/** Each photo's print shape, width over height, as Figma draws it at every breakpoint. */
+const ASPECT = ["aspect-[204/258]", "aspect-[214/168]", "aspect-[168/150]", "aspect-[200/252]", "aspect-[230/176]"]
+
+export interface ErrorStatePhotoCollageScatterProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStatePhotoCollageScatterCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The five prints' photos, in Figma's order: the tall one at the top start,
+   * the two under it, the tall one at the top end and the one under it. None
+   * by default: each print shows a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  photos?: ErrorStatePhotoCollageScatterPhoto[]
+}
+
+export function ErrorStatePhotoCollageScatter({
+  locale = "en",
+  code,
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
+  photos = [],
+  className,
+  ...props
+}: ErrorStatePhotoCollageScatterProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const status = code ?? copy.code
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+
+  const prints = (list: Print[]) =>
+    list.map((print) => {
+      const photo = photos[print.photo]
+      return (
+        <div
+          key={print.photo}
+          className={cn("absolute origin-top-left rounded-[var(--radius-sm)] bg-card p-2 shadow-lg", ASPECT[print.photo], print.rotate, print.className)}
+        >
+          <div className="relative size-full overflow-hidden bg-muted">
+            {photo ? (
+              <img src={photo.src} alt={photo.alt} loading="lazy" decoding="async" className="absolute inset-0 size-full object-cover" />
+            ) : null}
+          </div>
+        </div>
+      )
+    })
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="relative mx-auto grid min-h-[540px] w-full max-w-[1248px] overflow-hidden md:min-h-[520px] md:grid-cols-[minmax(0,1fr)_minmax(0,300px)_minmax(0,1fr)] lg:min-h-[620px] lg:grid-cols-[minmax(0,1fr)_minmax(0,420px)_minmax(0,1fr)]">
+        <div className="relative h-[258px] md:hidden">{prints(PHONE_PRINTS)}</div>
+        <div className="relative hidden md:col-start-1 md:row-start-1 md:block">{prints(START_RAIL)}</div>
+        <div className="relative hidden md:col-start-3 md:row-start-1 md:block">{prints(END_RAIL)}</div>
+
+        <div className="relative z-10 flex w-full flex-col items-center gap-5 text-center md:col-start-2 md:row-start-1 md:pt-[146px] lg:pt-[170px]">
+          {status ? <p className="text-5xl font-semibold text-foreground md:text-6xl lg:text-7xl">{status}</p> : 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 flex-wrap justify-center 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 errorStatePhotoCollageScatterCopy = COPY

package/registry/blocks/error-state-photo-collage-scatter/index.ts

@@ -0,0 +1,8 @@
+export {
+  ErrorStatePhotoCollageScatter,
+  errorStatePhotoCollageScatterCopy,
+  type ErrorStatePhotoCollageScatterAction,
+  type ErrorStatePhotoCollageScatterPhoto,
+  type ErrorStatePhotoCollageScatterCopy,
+  type ErrorStatePhotoCollageScatterProps,
+} from "./ErrorStatePhotoCollageScatter"

package/registry/blocks/error-state-popular-pages-grid/ErrorStatePopularPagesGrid.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Popular Pages Grid.
+ *
+ * A header with the error, a heading and a way home, over three cards of the
+ * pages people look for most, each with a photo. The cards sit three across
+ * on Desktop, two across on Tablet and stack on Mobile. No photos come with
+ * the block: give each page an `image`, and until then its frame is a
+ * `muted` placeholder of the same size.
+ *
+ * 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, and each card's arrow turns to point the way the
+ * text reads. Photos are never mirrored.
+ */
+
+export interface ErrorStatePopularPagesGridAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStatePopularPagesGridImage {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface ErrorStatePopularPagesGridPage {
+  /** The card's title, an `h2`. */
+  title: React.ReactNode
+  /** One line about the page. */
+  description: React.ReactNode
+  /** Where the card goes. The whole card is the link. */
+  href: string
+  /** The card's photo. None by default: a `muted` placeholder. */
+  image?: ErrorStatePopularPagesGridImage
+}
+
+export interface ErrorStatePopularPagesGridCopy {
+  /** The short label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The text under the heading. */
+  description: React.ReactNode
+  /** The outline button beside the header: the way out, usually home. Hidden when null. */
+  action: ErrorStatePopularPagesGridAction | null
+  /** The pages, in order. Each has a `title`, a `description`, an `href` and an optional `image`. The grid is left out when empty. */
+  pages: ErrorStatePopularPagesGridPage[]
+  /** The label at the foot of each card, before its arrow. */
+  openLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStatePopularPagesGridCopy> = {
+  en: {
+    eyebrow: "ERROR 404",
+    heading: "That page has moved on",
+    description:
+      "While you are here, these are the pages most people were looking for when they landed on a broken link.",
+    action: { label: "Back to home", href: "/" },
+    pages: [
+      {
+        title: "Getting started",
+        description: "Set up your first workspace in under ten minutes.",
+        href: "#getting-started",
+      },
+      {
+        title: "Guides & docs",
+        description: "Every API reference, walkthrough and integration note.",
+        href: "#guides",
+      },
+      {
+        title: "Help centre",
+        description: "Answers to the questions our support team hears most.",
+        href: "#help",
+      },
+    ],
+    openLabel: "Open",
+  },
+  ar: {
+    eyebrow: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>
+      </>
+    ),
+    heading: "تلك الصفحة انتقلت",
+    description: "ما دمت هنا، هذه هي الصفحات التي يبحث عنها معظم الناس عند وصولهم إلى رابط معطل.",
+    action: { label: "العودة إلى الرئيسية", href: "/" },
+    pages: [
+      { title: "البدء", description: "أنشئ مساحة عملك الأولى في أقل من عشر دقائق.", href: "#getting-started" },
+      { title: "الأدلة والتوثيق", description: "كل مراجع الواجهات البرمجية والشروحات وملاحظات التكامل.", href: "#guides" },
+      { title: "مركز المساعدة", description: "إجابات عن الأسئلة الأكثر تكرارًا لدى فريق الدعم لدينا.", href: "#help" },
+    ],
+    openLabel: "افتح",
+  },
+}
+
+export interface ErrorStatePopularPagesGridProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStatePopularPagesGridCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function ErrorStatePopularPagesGrid({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  action,
+  pages,
+  openLabel,
+  className,
+  ...props
+}: ErrorStatePopularPagesGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const label = eyebrow ?? copy.eyebrow
+  const cta = action === undefined ? copy.action : action
+  const list = pages ?? copy.pages
+  const open = openLabel ?? copy.openLabel
+
+  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-[1248px] flex-col gap-10">
+        <header className="flex flex-col items-start gap-6 lg:flex-row lg:items-end lg:gap-16">
+          <div className="flex min-w-0 flex-1 flex-col gap-3">
+            {label ? <p className="text-xs font-medium text-destructive">{label}</p> : null}
+            <h1 id={headingId} className="text-3xl font-semibold text-foreground lg:text-4xl">
+              {heading ?? copy.heading}
+            </h1>
+            <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          </div>
+          {cta ? (
+            <a href={cta.href} className={buttonVariants({ variant: "outline", className: "shrink-0" })}>
+              {cta.label}
+            </a>
+          ) : null}
+        </header>
+
+        {list.length > 0 ? (
+          <ul className="grid grid-cols-1 gap-5 md:grid-cols-2 md:gap-6 lg:grid-cols-3">
+            {list.map((page, index) => (
+              <li key={index}>
+                <a
+                  href={page.href}
+                  // Figma's 1px stroke is inside the card, so it is drawn over
+                  // the photo and adds nothing to the card's size.
+                  className="relative flex h-full flex-col overflow-hidden rounded-xl bg-card transition-shadow [outline:none] after:pointer-events-none after:absolute after:inset-0 after:rounded-xl after:ring-1 after:ring-inset after:ring-border hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring/50"
+                >
+                  <div className="relative h-40 w-full shrink-0 bg-muted md:h-[184px]">
+                    {page.image ? (
+                      <img
+                        src={page.image.src}
+                        alt={page.image.alt}
+                        loading="lazy"
+                        decoding="async"
+                        className="absolute inset-0 size-full object-cover"
+                      />
+                    ) : null}
+                  </div>
+                  <div className="flex flex-1 flex-col items-start gap-2 p-5">
+                    <h2 className="text-lg font-semibold text-foreground">{page.title}</h2>
+                    <p className="text-sm text-muted-foreground">{page.description}</p>
+                    <span className="mt-auto flex items-center gap-1.5 text-sm font-medium text-foreground">
+                      {open}
+                      <ArrowRight
+                        aria-hidden="true"
+                        size={14} strokeWidth={1.5} absoluteStrokeWidth
+                        className="size-3.5 shrink-0 text-muted-foreground [&:dir(rtl)]:-scale-x-100"
+                      />
+                    </span>
+                  </div>
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : 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 errorStatePopularPagesGridCopy = COPY

package/registry/blocks/error-state-popular-pages-grid/index.ts

@@ -0,0 +1,9 @@
+export {
+  ErrorStatePopularPagesGrid,
+  errorStatePopularPagesGridCopy,
+  type ErrorStatePopularPagesGridAction,
+  type ErrorStatePopularPagesGridImage,
+  type ErrorStatePopularPagesGridPage,
+  type ErrorStatePopularPagesGridCopy,
+  type ErrorStatePopularPagesGridProps,
+} from "./ErrorStatePopularPagesGrid"