HomePage

(no submodules)

## Purpose

The HomePage is the landing page of the Suaveplan Testbed application. It renders a responsive grid of cards, one for each registered library route, giving developers an at-a-glance overview of all interactive demonstrations available in the testbed. Each card links directly to its corresponding library demo page.

Features

Responsive grid layout (1 column on mobile, 2 on tablet, 3 on desktop)
One card per route entry, derived from the shared routes array (excluding the home route itself)
Category label displayed in small uppercase above each card title
Amber "Requires services" badge on routes that need external services running
All required data-testid attributes for Playwright E2E testing
Dark-mode aware styling with Tailwind utility classes throughout

Usage: Basic Example

import React from "react";
import { MemoryRouter } from "react-router-dom";
import { HomePage } from "./home-page.js";

export function App() {
  return (
    <MemoryRouter>
      <HomePage />
    </MemoryRouter>
  );
}

Usage: Advanced Example

The home page automatically reflects any changes to the routes array. Add a new route entry in routes.ts and it will appear on the home page without further changes:

// routes.ts
export const routes: RouteEntry[] = [
  // existing routes...
  { path: "/new-library", label: "@suaveplan/new-library", category: "utilities" },
];

The requiresServices flag causes an amber badge to render, signalling to developers that the demo needs external dependencies (databases, object storage, etc.) to function.

API Reference

`HomePage(): React.JSX.Element`

No props. Renders the full landing page including the library card grid, a hidden demo-card placeholder, and a console panel footer.

data-testid attributes:

page-title — the <h1> heading
library-card — each <Link> card (one per non-home route)
demo-card — hidden placeholder div (for test compatibility)
console-panel — bottom console section

Implementation Notes

The home route ("/") is explicitly excluded from the grid using a .filter() call to avoid a self-referential link. The routes array is imported from the shared routes.ts module, ensuring the home page always reflects the authoritative list of pages. The layout uses CSS Grid with Tailwind breakpoints for a fluid responsive experience. The hidden demo-card element preserves the standard page contract so baseline E2E sweeps that check for [data-testid="demo-card"] pass on the home route.

2.6 KiB Raw Blame History