| 1 | import { TextBlock } from "./content/TextBlock"; |
| 2 | |
| 3 | interface UserCardProps { |
| 4 | at: string; |
| 5 | text: string; |
| 6 | isMeta: boolean; |
| 7 | } |
| 8 | |
| 9 | export function UserCard({ at, text, isMeta }: UserCardProps) { |
| 10 | return ( |
| 11 | <div |
| 12 | className={`rounded border px-4 py-3 ${ |
| 13 | isMeta |
| 14 | ? "border-border/40 bg-bg-1/40" |
| 15 | : "border-accent/30 bg-accent/5" |
| 16 | }`} |
| 17 | > |
| 18 | <div className="mb-1 flex items-center gap-2 text-[10px] uppercase tracking-wide"> |
| 19 | <span className={isMeta ? "text-fg-3" : "text-accent"}> |
| 20 | {isMeta ? "tool / system" : "you"} |
| 21 | </span> |
| 22 | <span className="text-fg-3">•</span> |
| 23 | <span className="text-fg-3">{formatAt(at)}</span> |
| 24 | </div> |
| 25 | <TextBlock text={text} /> |
| 26 | </div> |
| 27 | ); |
| 28 | } |
| 29 | |
| 30 | function formatAt(iso: string): string { |
| 31 | try { |
| 32 | return new Date(iso).toLocaleString(); |
| 33 | } catch { |
| 34 | return iso; |
| 35 | } |
| 36 | } |