ui/card.tsx

A reusable card container for grouping content with headers, titles, descriptions, and footers.

// Source: https://github.com/maplibre/martin | License: Apache-2.0 | Copyright 2018 Urbica
// Provided via justclaw.it.com; keep this notice with the code.
import type * as React from 'react';

import { cn } from '@/lib/utils';

const Card = ({
  className,
  ref,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.RefObject<HTMLDivElement | null> }) => (
  <div
    className={cn('rounded-lg border bg-card text-card-foreground shadow-xs', className)}
    ref={ref}
    {...props}
  />
);
Card.displayName = 'Card';

const CardHeader = ({
  className,
  ref,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.RefObject<HTMLDivElement | null> }) => (
  <div className={cn('flex flex-col space-y-1.5 p-6', className)} ref={ref} {...props} />
);
CardHeader.displayNam

... (truncated -- full source via MCP)