Add authenticated user profile page with locked-down account endpoint (#315)

web/frontend/app/features/users/components/profile/tabs/ActivityTab.tsx

@@ -0,0 +1,55 @@
+import { ChatBubble, Heart, Star } from 'iconoir-react';
+import EmptyState from '../EmptyState';
+import StarRating from '../../../../breweries/components/shared/StarRating';
+import type { FillerActivity } from '../../../utils/filler-user-profile';
+
+const ICONS = { star: Star, heart: Heart, comment: ChatBubble } as const;
+
+interface ActivityTabProps {
+    activity: FillerActivity[];
+}
+
+const ActivityTab = ({ activity }: ActivityTabProps) => {
+    if (activity.length === 0) {
+        return (
+            <EmptyState message="No activity yet. Ratings, likes, and comments will show up here." />
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-3">
+            {activity.map((item) => {
+                const Icon = ICONS[item.icon];
+                return (
+                    <div key={item.id} className="card bg-base-100 shadow">
+                        <div className="card-body flex-row gap-4 items-start p-4">
+                            <div className="w-[34px] h-[34px] rounded-full bg-accent text-accent-content flex items-center justify-center shrink-0">
+                                <Icon className="size-4" aria-hidden="true" />
+                            </div>
+                            <div className="flex-1 min-w-0">
+                                <p className="text-sm leading-normal m-0">
+                                    {item.verb} <span className="font-semibold">{item.target}</span>
+                                </p>
+                                {item.rating !== undefined && (
+                                    <div className="mt-1.5">
+                                        <StarRating value={item.rating} size="xs" />
+                                    </div>
+                                )}
+                                {item.comment && (
+                                    <p className="text-sm text-base-content/60 italic mt-1.5 mb-0">
+                                        &ldquo;{item.comment}&rdquo;
+                                    </p>
+                                )}
+                                <p className="text-xs text-base-content/60 mt-1.5 mb-0">
+                                    {item.time}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default ActivityTab;