mirror of
https://github.com/SamyRai/tercul-frontend.git
synced 2025-12-27 04:51:34 +00:00
024e5d0ef5
Sets up the project with initial files, components, routes, and UI elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/affc56b0-365e-4ece-9cba-9e70bbbf0893.jpg
238 lines
10 KiB
TypeScript
238 lines
10 KiB
TypeScript
import { PageLayout } from "@/components/layout/PageLayout";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { WorkCard } from "@/components/common/WorkCard";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { User, BookOpen, Heart, Clock, Settings, PenSquare } from "lucide-react";
|
|
import { BookmarkWithWork } from "@/lib/types";
|
|
import { useState } from "react";
|
|
import { Link } from "wouter";
|
|
|
|
// Mock user ID for demo - in a real app, this would come from authentication
|
|
const DEMO_USER_ID = 1;
|
|
|
|
export default function Profile() {
|
|
const [activeTab, setActiveTab] = useState("bookmarks");
|
|
|
|
// Fetch user data
|
|
const { data: user, isLoading: userLoading } = useQuery({
|
|
queryKey: [`/api/users/${DEMO_USER_ID}`],
|
|
});
|
|
|
|
// Fetch user's bookmarks with work details
|
|
const { data: bookmarks, isLoading: bookmarksLoading } = useQuery<BookmarkWithWork[]>({
|
|
queryKey: [`/api/users/${DEMO_USER_ID}/bookmarks`],
|
|
});
|
|
|
|
// Fetch user's contributions (works/translations they've added)
|
|
const { data: contributions, isLoading: contributionsLoading } = useQuery({
|
|
queryKey: [`/api/users/${DEMO_USER_ID}/contributions`],
|
|
});
|
|
|
|
// Fetch reading progress
|
|
const { data: readingProgress, isLoading: progressLoading } = useQuery({
|
|
queryKey: [`/api/users/${DEMO_USER_ID}/reading-progress`],
|
|
});
|
|
|
|
return (
|
|
<PageLayout>
|
|
<div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 py-8">
|
|
{/* Profile header */}
|
|
<div className="mb-8">
|
|
{userLoading ? (
|
|
<div className="flex flex-col md:flex-row gap-6 items-center md:items-start">
|
|
<Skeleton className="w-24 h-24 rounded-full" />
|
|
<div className="flex-1 text-center md:text-left">
|
|
<Skeleton className="h-8 w-48 mb-2 mx-auto md:mx-0" />
|
|
<Skeleton className="h-4 w-32 mb-4 mx-auto md:mx-0" />
|
|
<Skeleton className="h-16 w-full" />
|
|
</div>
|
|
</div>
|
|
) : user ? (
|
|
<div className="flex flex-col md:flex-row gap-6 items-center md:items-start">
|
|
<Avatar className="w-24 h-24 border-2 border-sage/20">
|
|
<AvatarImage src={user.avatar} alt={user.displayName || user.username} />
|
|
<AvatarFallback className="text-2xl bg-navy/10 dark:bg-navy/20 text-navy dark:text-cream">
|
|
{(user.displayName || user.username).slice(0, 2).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 text-center md:text-left">
|
|
<h1 className="text-2xl md:text-3xl font-bold font-serif text-navy dark:text-cream mb-1">
|
|
{user.displayName || user.username}
|
|
</h1>
|
|
<p className="text-navy/70 dark:text-cream/70 mb-4">@{user.username}</p>
|
|
<p className="text-navy/80 dark:text-cream/80 max-w-2xl mb-6">
|
|
{user.bio || "No bio provided. Tell us about yourself and your literary interests."}
|
|
</p>
|
|
<div className="flex flex-wrap gap-3 justify-center md:justify-start">
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<Settings className="h-4 w-4" />
|
|
Edit Profile
|
|
</Button>
|
|
<Link href="/submit">
|
|
<Button size="sm" className="gap-2 bg-russet hover:bg-russet/90 text-white">
|
|
<PenSquare className="h-4 w-4" />
|
|
Submit New Translation
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8">
|
|
<h1 className="text-2xl font-bold mb-4">User not found</h1>
|
|
<p className="mb-4">Please sign in to view your profile</p>
|
|
<Button>Sign In</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* User content tabs */}
|
|
<Tabs defaultValue="bookmarks" value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList className="mb-6">
|
|
<TabsTrigger value="bookmarks" className="gap-2">
|
|
<BookOpen className="h-4 w-4" />
|
|
<span>Bookmarks</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="contributions" className="gap-2">
|
|
<PenSquare className="h-4 w-4" />
|
|
<span>Contributions</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="reading" className="gap-2">
|
|
<Clock className="h-4 w-4" />
|
|
<span>Reading History</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="likes" className="gap-2">
|
|
<Heart className="h-4 w-4" />
|
|
<span>Likes</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Bookmarks tab */}
|
|
<TabsContent value="bookmarks">
|
|
<h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-4">
|
|
Your Bookmarked Works
|
|
</h2>
|
|
|
|
{bookmarksLoading ? (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-40" />
|
|
))}
|
|
</div>
|
|
) : bookmarks?.length ? (
|
|
<div className="space-y-3">
|
|
{bookmarks.map(bookmark => (
|
|
<WorkCard key={bookmark.id} work={bookmark.work} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Card className="bg-cream dark:bg-dark-surface">
|
|
<CardContent className="text-center py-12">
|
|
<BookOpen className="h-12 w-12 mx-auto mb-4 text-navy/40 dark:text-cream/40" />
|
|
<h3 className="text-lg font-medium mb-2">No bookmarks yet</h3>
|
|
<p className="text-navy/70 dark:text-cream/70 mb-6">
|
|
Save your favorite works for easy access later
|
|
</p>
|
|
<Link href="/explore">
|
|
<Button>Explore Works</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* Contributions tab */}
|
|
<TabsContent value="contributions">
|
|
<h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-4">
|
|
Your Contributions
|
|
</h2>
|
|
|
|
{contributionsLoading ? (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 2 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-40" />
|
|
))}
|
|
</div>
|
|
) : contributions?.length ? (
|
|
<div className="space-y-3">
|
|
{/* This would display the user's contributions */}
|
|
<p>Contributions would appear here</p>
|
|
</div>
|
|
) : (
|
|
<Card className="bg-cream dark:bg-dark-surface">
|
|
<CardContent className="text-center py-12">
|
|
<PenSquare className="h-12 w-12 mx-auto mb-4 text-navy/40 dark:text-cream/40" />
|
|
<h3 className="text-lg font-medium mb-2">No contributions yet</h3>
|
|
<p className="text-navy/70 dark:text-cream/70 mb-6">
|
|
Share your translations with the Tercul community
|
|
</p>
|
|
<Link href="/submit">
|
|
<Button className="bg-russet hover:bg-russet/90 text-white">Submit Translation</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* Reading History tab */}
|
|
<TabsContent value="reading">
|
|
<h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-4">
|
|
Reading History
|
|
</h2>
|
|
|
|
{progressLoading ? (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-20" />
|
|
))}
|
|
</div>
|
|
) : readingProgress?.length ? (
|
|
<div className="space-y-3">
|
|
{/* This would display the user's reading progress */}
|
|
<p>Reading progress would appear here</p>
|
|
</div>
|
|
) : (
|
|
<Card className="bg-cream dark:bg-dark-surface">
|
|
<CardContent className="text-center py-12">
|
|
<Clock className="h-12 w-12 mx-auto mb-4 text-navy/40 dark:text-cream/40" />
|
|
<h3 className="text-lg font-medium mb-2">No reading history</h3>
|
|
<p className="text-navy/70 dark:text-cream/70 mb-6">
|
|
Your reading progress will be saved here
|
|
</p>
|
|
<Link href="/explore">
|
|
<Button>Start Reading</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* Likes tab */}
|
|
<TabsContent value="likes">
|
|
<h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-4">
|
|
Your Liked Works
|
|
</h2>
|
|
|
|
<Card className="bg-cream dark:bg-dark-surface">
|
|
<CardContent className="text-center py-12">
|
|
<Heart className="h-12 w-12 mx-auto mb-4 text-navy/40 dark:text-cream/40" />
|
|
<h3 className="text-lg font-medium mb-2">No liked works yet</h3>
|
|
<p className="text-navy/70 dark:text-cream/70 mb-6">
|
|
Show your appreciation for authors and translators
|
|
</p>
|
|
<Link href="/explore">
|
|
<Button>Explore Works</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</PageLayout>
|
|
);
|
|
}
|