Migrate Legacy UI Components to Design System

Problem Description

The frontend team recently adopted Chakra UI v3 as the standard component library across all apps, replacing an older approach where developers used Tailwind CSS directly. Several components from an earlier prototype were built quickly using Tailwind and need to be brought into compliance with the design system before the product ships.

You've been asked to rewrite the NotificationCard component — a card that surfaces in-app alerts and status messages — using the project's Chakra UI setup. The original prototype code is provided below as a reference spec; it represents the correct layout and visual design, but is not in the form the codebase expects.

The project uses Chakra UI v3 with semantic design tokens for all visual properties. Components live under src/components/ and project-internal imports use the ~/ path alias.

Output Specification

Produce the rewritten component as a single file. Name it NotificationCard.tsx and place it at src/components/NotificationCard/NotificationCard.tsx. The component should preserve the same visual structure and props as the original, but use the project's Chakra UI patterns throughout.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: inputs/NotificationCard.prototype.tsx =============== import React from 'react';

interface NotificationCardProps { title: string; message: string; type: 'info' | 'warning' | 'error' | 'success'; timestamp: string; unread?: boolean; onDismiss?: () => void; }

const typeStyles = { info: { bg: '#EBF8FF', border: '#90CDF4', icon: '#3182CE', text: '#2C5282' }, warning: { bg: '#FFFAF0', border: '#F6AD55', icon: '#DD6B20', text: '#7B341E' }, error: { bg: '#FFF5F5', border: '#FC8181', icon: '#E53E3E', text: '#742A2A' }, success: { bg: '#F0FFF4', border: '#68D391', icon: '#38A169', text: '#276749' }, };

export function NotificationCard({ title, message, type, timestamp, unread = false, onDismiss, }: NotificationCardProps) { const styles = typeStyles[type];

return ( <div className="rounded-lg border p-4 flex gap-3" style={{ backgroundColor: styles.bg, borderColor: styles.border, borderRadius: '8px', padding: '16px', }} > <div className="flex-shrink-0 w-5 h-5 mt-0.5" style={{ color: styles.icon }}> <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <circle cx="10" cy="10" r="10" /> <text x="10" y="14" textAnchor="middle" fill="white" fontSize="12px" fontFamily="Arial, sans-serif"> {type === 'error' ? '!' : type === 'warning' ? '⚠' : '✓'} </text> </svg> </div>

<div className="flex-1 min-w-0">
    <div className="flex items-start justify-between gap-2 mb-1">
      <p
        className="text-sm font-semibold leading-tight"
        style={{ color: styles.text, fontSize: '14px', fontWeight: 600 }}
      >
        {unread && (
          <span
            className="inline-block w-2 h-2 rounded-full mr-2"
            style={{ backgroundColor: styles.icon, width: '8px', height: '8px' }}
          />
        )}
        {title}
      </p>
      <span
        className="text-xs"
        style={{ color: '#718096', fontSize: '12px', fontFamily: 'Helvetica Neue, Arial, sans-serif' }}
      >
        {timestamp}
      </span>
    </div>
    <p
      className="text-sm"
      style={{ color: '#4A5568', fontSize: '14px', lineHeight: '1.5' }}
    >
      {message}
    </p>
  </div>

  {onDismiss && (
    <button
      onClick={onDismiss}
      className="flex-shrink-0 text-gray-400 hover:text-gray-600"
      style={{ color: '#CBD5E0', padding: '4px', borderRadius: '4px' }}
    >
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" strokeWidth="2" />
      </svg>
    </button>
  )}
</div>

); }

export default NotificationCard;