UI Component Architecture
The Quantum Advantage Tracker (QAT) is built using Next.js 15 with the App Router, utilizing a component-based architecture designed for modularity and performance. The UI leverages Tailwind CSS for styling and follows a pattern of separating high-level page layouts from reusable UI primitives.
Component Hierarchy
The application follows a standard Next.js directory structure where src/app defines routes and layouts, while src/components (and specific feature folders) contain the UI building blocks.
Layout & Navigation
RootLayout: The top-level wrapper providing global styles, fonts (Inter), and the persistent header/footer.NavMenu: A client-side component managing the primary navigation links. It uses theusePathnamehook to apply active styling to the current route.TrackerTabs: A specialized navigation component used within the/trackersroutes. It allows users to toggle between the three advantage pathways: Observable Estimations, Variational Problems, and Classically Verifiable Problems.
Key Feature Components
SubmissionsTable
The SubmissionsTable is the primary data-rendering component for the tracking pages. It is designed to be data-agnostic, receiving different datasets based on the pathway.
Usage Example:
import { SubmissionsTable } from './SubmissionsTable';
// Used within a pathway page
<SubmissionsTable
submissions={submissionsData}
circuitModels={circuitModelsData}
/>
| Prop | Type | Description |
| :--- | :--- | :--- |
| submissions | Array<Submission> | List of validated quantum advantage submissions. |
| circuitModels | CircuitModels | (Optional) Map of circuit definitions related to the path. |
| hamiltonians | Hamiltonians | (Optional) Map of Hamiltonian definitions for Variational Problems. |
Contributors
An internal marquee component used on the homepage to display participating institutions. It dynamically aggregates a list of unique institutions from all submission JSON files.
Usage:
import { Contributors } from './Contributors';
// Renders the infinite horizontal marquee
<Contributors />
Shared UI Primitives
QAT uses a set of low-level components located in src/components/ui. These are built for flexibility using the asChild pattern from Radix UI, allowing them to wrap other elements like Next.js Link or standard <a> tags.
Button
The primary action component. It supports multiple variants and sizes.
import { Button } from '@/components/ui/button';
// As a standard button
<Button variant="default" size="lg">Submit</Button>
// As a link (using the asChild pattern)
<Button asChild variant="secondary">
<Link href="/trackers">View Trackers</Link>
</Button>
Icons
The project uses Lucide React for general UI icons and a custom GithubIcon (located in src/icons) for external repository links.
Utility Functions
The architecture includes several helper utilities to manage data formatting and dynamic URL generation for GitHub-hosted assets.
URL Builders
These utilities generate consistent links to the underlying data repository where circuit files and Hamiltonians are stored.
| Function | Input | Output |
| :--- | :--- | :--- |
| getCircuitInstanceUrl | path: string, instance: object | GitHub URL to a specific circuit JSON. |
| getHamiltonianUrl | instance: object | GitHub URL to a specific Hamiltonian file. |
Example:
import { getHamiltonianUrl } from '@/utils';
const url = getHamiltonianUrl({ type: 'molecular', path: 'h2_6-31g.json' });
Data Helpers
cn(...inputs): A wrapper aroundclsxandtailwind-mergefor safely combining Tailwind CSS classes.formatDate(dateString): Returns a localized date string inYYYY-MM-DDformat.sortSubmissions(arr): Sorts an array of submissions by theircreatedAttimestamp in descending order.