Gold Standard Card

1
2import React from 'react';
3// Note for Agent: The '@' alias refers to the target project's src directory.
4// Ensure src/data/mockData.ts is created before generating this component.
5import { cardData } from '../data/mockData';
6
7/**
8 * Gold Standard: ActivityCard
9 * This file serves as the definitive reference for the agent.
10 */
11interface ActivityCardProps {
12  readonly id: string;
13  readonly username: string;
14  readonly action: 'MERGED' | 'COMMIT';
15  readonly timestamp: string;
16  readonly avatarUrl: string;
17  readonly repoName: string;
18}
19
20export const ActivityCard: React.FC<ActivityCardProps> = ({
21  username,
22  action,
23  timestamp,
24  avatarUrl,
25  repoName,
26}) => {
27  const isMerged = action === 'MERGED';
28
29  return (
30    <div className="flex items-center justify-between gap-4 rounded-lg bg-surface-dark p-4 min-h-14 shadow-sm ring-1 ring-white/10">
31      <div className="flex items-center gap-4 overflow-hidden">
32        <div
33          className="aspect-square h-10 w-10 flex-shrink-0 rounded-full bg-cover bg-center bg-no-repeat"
34          style={{ backgroundImage: `url(${avatarUrl})` }}
35          aria-label={`Avatar for ${username}`}
36        />
37
38        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm sm:text-base">
39          <a href="#" className="font-semibold text-primary hover:underline truncate">
40            {username}
41          </a>
42
43          <span className={`inline-block px-2 py-0.5 text-xs font-semibold rounded-full ${isMerged ? 'bg-purple-500/30 text-purple-300' : 'bg-primary/30 text-primary'
44            }`}>
45            {action}
46          </span>
47
48          <span className="text-white/60">in</span>
49
50          <a href="#" className="text-primary hover:underline truncate">
51            {repoName}
52          </a>
53        </div>
54      </div>
55
56      <div className="shrink-0">
57        <p className="text-sm font-normal leading-normal text-white/50">
58          {timestamp}
59        </p>
60      </div>
61    </div>
62  );
63};
64
65export default ActivityCard;