Gabriel Kaszewski
38e107ad59
- Implemented Skeleton component for loading states. - Added Slider component using Radix UI for customizable sliders. - Created Toaster component for notifications with theme support. - Developed Switch component for toggle functionality. - Introduced Table component with subcomponents for structured data display. - Built Tabs component for tabbed navigation. - Added Textarea component for multi-line text input. - Implemented Toggle Group and Toggle components for grouped toggle buttons. - Created Tooltip component for displaying additional information on hover. - Added User Avatar component for displaying user images with fallback. - Implemented useIsMobile hook for responsive design. - Created API utility functions for user and thought data fetching. - Added utility function for class name merging. - Updated package.json with new dependencies for UI components and utilities. - Added TypeScript configuration for path aliasing.
34 lines
1002 B
TypeScript
34 lines
1002 B
TypeScript
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import { UserAvatar } from "./user-avatar";
|
|
import { Thought } from "@/lib/api";
|
|
import { formatDistanceToNow } from "date-fns";
|
|
|
|
interface ThoughtCardProps {
|
|
thought: Thought;
|
|
author: {
|
|
username: string;
|
|
avatarUrl?: string | null;
|
|
};
|
|
}
|
|
|
|
export function ThoughtCard({ thought, author }: ThoughtCardProps) {
|
|
const timeAgo = formatDistanceToNow(new Date(thought.createdAt), {
|
|
addSuffix: true,
|
|
});
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center gap-4 space-y-0">
|
|
<UserAvatar src={author.avatarUrl} alt={author.username} />
|
|
<div className="flex flex-col">
|
|
<span className="font-bold">{author.username}</span>
|
|
<span className="text-sm text-muted-foreground">{timeAgo}</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="whitespace-pre-wrap break-words">{thought.content}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|