1/**
2 * Copyright 2026 Google LLC
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *     http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16 
17import React from 'react';
18// Note for Agent: The '@' alias refers to the target project's src directory.
19// Ensure src/data/mockData.ts is created before generating this component.
20import { cardData } from '../data/mockData';
21 
22/**
23 * Gold Standard: ActivityCard
24 * This file serves as the definitive reference for the agent.
25 */
26interface ActivityCardProps {
27  readonly id: string;
28  readonly username: string;
29  readonly action: 'MERGED' | 'COMMIT';
30  readonly timestamp: string;
31  readonly avatarUrl: string;
32  readonly repoName: string;
33}
34 
35export const ActivityCard: React.FC<ActivityCardProps> = ({
36  username,
37  action,
38  timestamp,
39  avatarUrl,
40  repoName,
41}) => {
42  const isMerged = action === 'MERGED';
43 
44  return (
45    <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">
46      <div className="flex items-center gap-4 overflow-hidden">
47        <div
48          className="aspect-square h-10 w-10 flex-shrink-0 rounded-full bg-cover bg-center bg-no-repeat"
49          style={{ backgroundImage: `url(${avatarUrl})` }}
50          aria-label={`Avatar for ${username}`}
51        />
52 
53        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm sm:text-base">
54          <a href="#" className="font-semibold text-primary hover:underline truncate">
55            {username}
56          </a>
57 
58          <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'
59            }`}>
60            {action}
61          </span>
62 
63          <span className="text-white/60">in</span>
64 
65          <a href="#" className="text-primary hover:underline truncate">
66            {repoName}
67          </a>
68        </div>
69      </div>
70 
71      <div className="shrink-0">
72        <p className="text-sm font-normal leading-normal text-white/50">
73          {timestamp}
74        </p>
75      </div>
76    </div>
77  );
78};
79 
80export default ActivityCard;