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.
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
import { getUserProfile, getUserThoughts } from "@/lib/api";
|
|
import { UserAvatar } from "@/components/user-avatar";
|
|
import { ThoughtCard } from "@/components/thought-card";
|
|
import { Calendar } from "lucide-react";
|
|
import { Card } from "@/components/ui/card";
|
|
import { notFound } from "next/navigation";
|
|
|
|
interface ProfilePageProps {
|
|
params: { username: string };
|
|
}
|
|
|
|
export default async function ProfilePage({ params }: ProfilePageProps) {
|
|
const { username } = params;
|
|
|
|
// Fetch data directly on the server.
|
|
// The `loading.tsx` file will be shown to the user during this fetch.
|
|
const [userResult, thoughtsResult] = await Promise.allSettled([
|
|
getUserProfile(username),
|
|
getUserThoughts(username),
|
|
]);
|
|
|
|
// Handle errors from the server-side fetch
|
|
if (userResult.status === "rejected") {
|
|
// If the user isn't found, render the Next.js 404 page
|
|
notFound();
|
|
}
|
|
|
|
const user = userResult.value;
|
|
const thoughts =
|
|
thoughtsResult.status === "fulfilled" ? thoughtsResult.value.thoughts : [];
|
|
|
|
return (
|
|
<div>
|
|
{/* Custom CSS Injection */}
|
|
{user.customCss && (
|
|
<style dangerouslySetInnerHTML={{ __html: user.customCss }} />
|
|
)}
|
|
|
|
{/* Header Image */}
|
|
<div
|
|
className="h-48 bg-gray-200 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: user.headerUrl ? `url(${user.headerUrl})` : "none",
|
|
}}
|
|
/>
|
|
|
|
<main className="container mx-auto max-w-3xl p-4 -mt-16">
|
|
{/* Profile Info */}
|
|
<Card className="p-6 bg-card/80 backdrop-blur-lg">
|
|
<div className="flex items-end gap-4">
|
|
<div className="w-24 h-24 rounded-full border-4 border-background">
|
|
<UserAvatar src={user.avatarUrl} alt={user.displayName} />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">
|
|
{user.displayName || user.username}
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">@{user.username}</p>
|
|
</div>
|
|
</div>
|
|
<p className="mt-4 whitespace-pre-wrap">{user.bio}</p>
|
|
<div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
|
|
<Calendar className="h-4 w-4" />
|
|
<span>Joined {new Date(user.joinedAt).toLocaleDateString()}</span>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Thoughts Feed */}
|
|
<div className="mt-8 space-y-4">
|
|
{thoughts.map((thought) => (
|
|
<ThoughtCard
|
|
key={thought.id}
|
|
thought={thought}
|
|
author={{ username: user.username, avatarUrl: user.avatarUrl }}
|
|
/>
|
|
))}
|
|
{thoughts.length === 0 && (
|
|
<p className="text-center text-muted-foreground">
|
|
This user hasn't posted any thoughts yet.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|