Card Detail Layout

A responsive layout component for displaying card details with search functionality. Features a card display section on the left and a search sidebar on the right.

Overview

The CardDetailLayout component provides a clean, responsive interface for card search and review workflows. It's designed to replace the previous "Fix This" overlay approach with a more integrated and user-friendly experience.

The layout consists of two main sections:

  • Card Display Section: Shows the selected card image and details
  • Search Sidebar: Contains the CardSearchInput component for finding cards

Basic Usage

Default Layout

Standard card detail layout with search functionality

Search for a card to see details here

Search Cards

import { CardDetailLayout } from '@/components/ui/CardDetailLayout';

interface Card {
  id: string;
  name: string;
  set_code: string;
  card_number: string;
  image_url: string;
}

function MyComponent() {
  const [selectedCard, setSelectedCard] = useState<Card | null>(null);

  return (
    <CardDetailLayout
      selectedCard={selectedCard}
      onCardSelect={(card) => setSelectedCard(card)}
      onCardApply={(card) => {
        // Handle card application logic
        console.log('Applying card:', card);
      }}
    />
  );
}

Props

Component Interface

Available props for the CardDetailLayout component

interface CardDetailLayoutProps {
  selectedCard: Card | null;
  onCardSelect: (card: Card) => void;
  onCardApply?: (card: Card) => void;
  className?: string;
}
interface CardDetailLayoutProps {
  selectedCard: Card | null;
  onCardSelect: (card: Card) => void;
  onCardApply?: (card: Card) => void;
  className?: string;
}

Design Tokens

The component uses CircuitDS design tokens for consistent styling:

  • Spacing: Uses --sds-size-space-* tokens for gaps and padding
  • Colors: Uses semantic color tokens like --surface-background and --text-primary
  • Typography: Uses --sds-size-font-* and --sds-weight-* tokens
  • Border Radius: Uses --sds-size-radius-* tokens

Responsive Behavior

The layout is fully responsive and adapts to different screen sizes:

  • Desktop: Two-column grid layout with card display and search sidebar
  • Mobile: Single-column layout with search sidebar appearing first
  • Tablet: Responsive grid that adjusts based on available space

Integration

This component is designed to work seamlessly with:

  • CardSearchInput: Provides the search functionality
  • Scan Review Workflow: Used in scan detail pages for card corrections
  • CircuitDS Design System: Follows all established patterns and tokens