feat: add UI components including Skeleton, Slider, Toaster, Switch, Table, Tabs, Textarea, Toggle Group, Toggle, Tooltip, and User Avatar

- 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.

thoughts-frontend/components/thought-card.tsx

@@ -0,0 +1,33 @@
+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>
+  );
+}