Frontend Components

Reusable component library documentation.

Common Components

ImageCard

Displays asset preview with metadata.

<ImageCard
  asset={asset}
  onSelect={handleSelect}
  onDelete={handleDelete}
/>

VerificationResult

Shows verification results with confidence score.

<VerificationResult
  result={verificationResult}
  onRetry={handleRetry}
/>

LoadingSpinner

Loading indicator with customizable message.

<LoadingSpinner message="Verifying image..." />

ErrorBoundary

Catches and displays errors gracefully.

<ErrorBoundary fallback={<ErrorScreen />}>
  <YourComponent />
</ErrorBoundary>

Best Practices

• Keep components focused (Single Responsibility)
• Pass data through props
• Use TypeScript interfaces
• Memoize expensive components
• Write Storybook stories

Component Library

All components are in /src/components/.

See implementation in codebase.