alice.mosphere.at
this repo has no description
1import React, { useState, useMemo } from 'react';
2import { Copy, Check, Sparkles } from 'lucide-react';
3
4interface Props {
5 summary: string;
6}
7
8interface DailySummary {
9 projects: { name: string; summary: string }[];
10}
11
12function parseSummary(summary: string): DailySummary | null {
13 try {
14 const parsed = JSON.parse(summary);
15 if (parsed.projects && Array.isArray(parsed.projects)) {
16 return parsed as DailySummary;
17 }
18 } catch {
19 // Not JSON, return null
20 }
21 return null;
22}
23
24export default function BragSummary({ summary }: Props) {
25 const [copied, setCopied] = useState(false);
26
27 const parsed = useMemo(() => parseSummary(summary), [summary]);
28
29 const handleCopy = () => {
30 // Copy as readable text
31 const text = parsed
32 ? parsed.projects.map(p => `${p.name}: ${p.summary}`).join('\n')
33 : summary;
34 navigator.clipboard.writeText(text);
35 setCopied(true);
36 setTimeout(() => setCopied(false), 2000);
37 };
38
39 if (!summary) return null;
40
41 return (
42 <div className="relative group rounded-lg p-4 mb-4 bg-gradient-to-br from-indigo-50 to-blue-50 border border-indigo-100 shadow-sm">
43 <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
44 <button
45 onClick={handleCopy}
46 className="p-1.5 rounded bg-white/80 hover:bg-white text-indigo-600 shadow-sm transition-all"
47 title="Copy to clipboard"
48 >
49 {copied ? <Check size={14} /> : <Copy size={14} />}
50 </button>
51 </div>
52
53 <div className="flex items-start gap-2">
54 <div className="p-1 bg-indigo-100 text-indigo-600 rounded shrink-0">
55 <Sparkles size={16} />
56 </div>
57 <div className="min-w-0">
58 <h3 className="text-xs font-semibold text-indigo-900 uppercase tracking-wider mb-2">Daily Summary</h3>
59 {parsed ? (
60 <ul className="space-y-1.5">
61 {parsed.projects.map((project, i) => (
62 <li key={i} className="text-sm">
63 <span className="font-semibold text-slate-800">{project.name}:</span>{' '}
64 <span className="text-slate-600">{project.summary}</span>
65 </li>
66 ))}
67 </ul>
68 ) : (
69 <p className="text-slate-700 text-sm leading-relaxed">{summary}</p>
70 )}
71 </div>
72 </div>
73 </div>
74 );
75}