Reusable React Components

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/react/button.tsx
• src/components/react/link.tsx
• src/components/react/table.tsx
• src/components/react/navbar.tsx
• src/components/react/pagination.tsx
• src/components/astro/database/reactive-datatable.tsx

The CertDb project utilizes a set of reusable React components to build a consistent and maintainable user interface. These components are built on top of libraries like Headless UI and styled using Tailwind CSS with the clsx utility for conditional classes. They are designed to be composable and provide foundational UI elements such as buttons, links, tables, navigation bars, and pagination.

These components are integrated within an Astro project, as indicated by the Astro configuration which includes the React integration. The components are located in the src/components/react/ directory and are consumed by higher-order Astro or React components to construct the application's pages, such as the ReactiveDatatable.

Core Components

The core of the reusable component library consists of several key elements that can be combined to create complex user interfaces.

Button Component

The Button component is a versatile element that can render as either a standard HTML <button> or an anchor <a> tag, depending on whether an href prop is provided. It is built using Headless UI for accessibility and interactivity.

Sources: src/components/react/button.tsx

Props and Variants

The button's appearance is highly customizable through props:

Prop	Type	Description
color	keyof typeof styles.colors	Sets the color scheme for the solid variant. Defaults to dark/zinc.
outline	boolean	Renders the button with an outline style. Mutually exclusive with plain and color.
plain	boolean	Renders the button with a plain, transparent background style. Mutually exclusive with outline and color.
href	string	If provided, the component renders as a Link component (an <a> tag).
children	React.ReactNode	The content of the button.

Sources: src/components/react/button.tsx:205-223

The color prop supports a wide range of predefined color schemes defined in the styles.colors object. These styles use CSS custom properties (e.g., --btn-bg, --btn-border) for theming and state management (hover, active).

Sources: src/components/react/button.tsx:75-202

Conditional Rendering Logic

The component's logic determines whether to render a Link or a Headless.Button based on the presence of the href prop.

This diagram illustrates the conditional rendering path within the Button component.
Sources: src/components/react/button.tsx:229-242

TouchTarget

The Button component wraps its children in a TouchTarget component. This is a utility that expands the clickable area to a minimum of 44x44px on touch devices to improve mobile usability, without visually altering the button's size.

Sources: src/components/react/button.tsx:248-259

Link Component

The Link component is a simple wrapper around a standard <a> tag, enclosed within a Headless.DataInteractive element. This is done to ensure proper accessibility and interaction states are handled by Headless UI. A TODO note in the code suggests this component is a placeholder that can be updated to integrate with a client-side routing library like Next.js or Remix.

Sources: src/components/react/link.tsx

Table Components

A set of composable components is provided to build structured data tables. These components use React Context to share styling props across the table structure.

Sources: src/components/react/table.tsx

Component Hierarchy and Context

The table system uses two context providers:

1. TableContext: Shares bleed, dense, grid, and striped props from the parent Table component to its children (TableHeader, TableCell).
2. TableRowContext: Shares href, target, and title props from a TableRow to its TableCell children, enabling the entire row to function as a single link.

The following diagram shows the component structure and data flow via context.

Key Table Components

• Table: The main wrapper component.
• TableHead: Renders a <thead>.
• TableBody: Renders a <tbody>.
• TableRow: Renders a <tr>. Can accept an href to make the row clickable.
• TableHeader: Renders a <th> with appropriate styling.
• TableCell: Renders a <td>. If its parent TableRow has an href, it contains a Link element that covers the entire cell.

Navbar Components

The Navbar components are a collection of elements for building application navigation. They leverage framer-motion for animations, such as the indicator for the current page.

Sources: src/components/react/navbar.tsx

Key Navbar Components

• Navbar: The main <nav> container.
• NavbarSection: A <div> that groups items, using LayoutGroup from framer-motion.
• NavbarItem: A flexible item that can be a button or a link. It displays an animated underline (motion.span) if the current prop is true.
• NavbarDivider: A vertical line separator.
• NavbarSpacer: A flexible spacer to push items apart.
• NavbarLabel: A <span> for text inside a NavbarItem.

The NavbarItem component is the most complex, handling different states (current, hover, active) and rendering as either a Link or a Headless.Button.

Sources: src/components/react/navbar.tsx:50-111

Pagination Components

A set of components for creating pagination controls. These components are built using the core Button component.

Sources: src/components/react/pagination.tsx

Key Pagination Components

• Pagination: The <nav> container for the pagination controls.
• PaginationPrevious: A "Previous" button, which is disabled if href is null.
• PaginationNext: A "Next" button, which is disabled if href is null.
• PaginationList: A container for the page numbers, hidden on small screens.
• PaginationPage: A button for a specific page number. It has a current state.
• PaginationGap: A non-interactive element (...) to indicate a gap in page numbers.

Usage in ReactiveDatatable

The ReactiveDatatable component is a prime example of how these reusable components are composed to build a complex, interactive UI feature. It creates a client-side rendered table with search and pagination functionality.

Sources: src/components/astro/database/reactive-datatable.tsx

This diagram shows the high-level component composition within ReactiveDatatable.

The ReactiveDatatable component fetches certification data, initializes fuse.js for searching, and then uses the Table components to render the data. The Pagination components are used to navigate through the dataset, with their href props dynamically generated based on the current page, total pages, and search query.

Sources: src/components/astro/database/reactive-datatable.tsx:289-408

Summary

The reusable React components in the CertDb repository form a small but effective design system. By leveraging Headless UI for accessibility, Tailwind CSS for styling, and a composable architecture, they enable the rapid development of a consistent and user-friendly interface. The Button, Table, Navbar, and Pagination components provide the essential building blocks, and their practical application is demonstrated in features like the ReactiveDatatable.