FedMCP - Federal Parliamentary Information

/** * Card - Container component for content grouping * * Used for MP profiles, bill details, metrics, etc. * Follows Canada dark theme with subtle borders and slate backgrounds. */ import React from 'react'; import { cn } from '../utils/utils'; export interface CardProps extends React.HTMLAttributes<HTMLDivElement> { /** Elevated background for emphasis */ elevated?: boolean; /** Add padding (default: true) */ noPadding?: boolean; children: React.ReactNode; } export const Card = React.forwardRef<HTMLDivElement, CardProps>( ({ elevated = false, noPadding = false, className, children, ...props }, ref) => { return ( <div ref={ref} className={cn( 'rounded-lg border', elevated ? 'bg-bg-elevated border-border-emphasis' : 'bg-bg-secondary border-border-subtle', !noPadding && 'p-6', className )} {...props} > {children} </div> ); } ); Card.displayName = 'Card'; /** * CardHeader - Optional header section for cards */ export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> { children: React.ReactNode; } export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>( ({ className, children, ...props }, ref) => { return ( <div ref={ref} className={cn('flex items-start justify-between mb-4', className)} {...props} > {children} </div> ); } ); CardHeader.displayName = 'CardHeader'; /** * CardTitle - Title for card headers */ export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> { children: React.ReactNode; } export const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>( ({ className, children, ...props }, ref) => { return ( <h3 ref={ref} className={cn('text-xl font-semibold text-text-primary', className)} {...props} > {children} </h3> ); } ); CardTitle.displayName = 'CardTitle'; /** * CardDescription - Description text for cards */ export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> { children: React.ReactNode; } export const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>( ({ className, children, ...props }, ref) => { return ( <p ref={ref} className={cn('text-sm text-text-secondary mt-1', className)} {...props} > {children} </p> ); } ); CardDescription.displayName = 'CardDescription';