57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { type Event } from "nostr-tools";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { useProfileMetadata } from "@/lib/use-profile-metadata";
|
|
|
|
// Helper function to format timestamp (optional)
|
|
const formatTimestamp = (timestamp: number): string => {
|
|
return new Date(timestamp * 1000).toLocaleString();
|
|
};
|
|
|
|
interface NoteCardProps {
|
|
event: Event;
|
|
}
|
|
|
|
export function NoteCard({ event }: NoteCardProps) {
|
|
// Fetch profile metadata for this note's author
|
|
const { profile, displayName, displayHandle } = useProfileMetadata(event.pubkey);
|
|
|
|
// Create avatar fallback (first letter of name or '?')
|
|
const avatarFallback = profile.name
|
|
? profile.name.charAt(0).toUpperCase()
|
|
: '?';
|
|
|
|
return (
|
|
<Card className="w-full max-w-xl break-words">
|
|
<CardHeader>
|
|
<div className="flex items-center space-x-3">
|
|
<Avatar>
|
|
<AvatarImage src={profile.picture} alt={displayName} />
|
|
<AvatarFallback>{avatarFallback}</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<CardTitle>{displayName}</CardTitle>
|
|
<CardDescription>{displayHandle}</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="whitespace-pre-wrap">{event.content}</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<p className="text-sm text-muted-foreground">
|
|
{formatTimestamp(event.created_at)}
|
|
</p>
|
|
{/* Add other footer elements like reactions, replies later */}
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|