Story Collections Feature
This commit is contained in:
Stefan Hardegger
218
frontend/src/components/collections/CollectionReadingView.tsx
Normal file
218
frontend/src/components/collections/CollectionReadingView.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
'use client';
|
||||
|
||||
import { StoryWithCollectionContext } from '../../types/api';
|
||||
import Button from '../ui/Button';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface CollectionReadingViewProps {
|
||||
data: StoryWithCollectionContext;
|
||||
onNavigate: (storyId: string) => void;
|
||||
onBackToCollection: () => void;
|
||||
}
|
||||
|
||||
export default function CollectionReadingView({
|
||||
data,
|
||||
onNavigate,
|
||||
onBackToCollection
|
||||
}: CollectionReadingViewProps) {
|
||||
const { story, collection } = data;
|
||||
|
||||
const handlePrevious = () => {
|
||||
if (collection.previousStoryId) {
|
||||
onNavigate(collection.previousStoryId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (collection.nextStoryId) {
|
||||
onNavigate(collection.nextStoryId);
|
||||
}
|
||||
};
|
||||
|
||||
const renderRatingStars = (rating?: number) => {
|
||||
if (!rating) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<span
|
||||
key={star}
|
||||
className={`text-sm ${
|
||||
star <= rating ? 'text-yellow-400' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
★
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Collection Context Header */}
|
||||
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={onBackToCollection}
|
||||
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
|
||||
title="Back to Collection"
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
<div>
|
||||
<h2 className="font-semibold text-blue-900 dark:text-blue-100">
|
||||
Reading from: {collection.name}
|
||||
</h2>
|
||||
<p className="text-sm text-blue-700 dark:text-blue-300">
|
||||
Story {collection.currentPosition} of {collection.totalStories}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-32 bg-blue-200 dark:bg-blue-800 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${(collection.currentPosition / collection.totalStories) * 100}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-blue-700 dark:text-blue-300 font-mono">
|
||||
{collection.currentPosition}/{collection.totalStories}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Story Header */}
|
||||
<div className="theme-card p-6 mb-6">
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
{/* Story Cover */}
|
||||
{story.coverPath && (
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src={`/images/${story.coverPath}`}
|
||||
alt={`${story.title} cover`}
|
||||
className="w-32 h-40 object-cover rounded-lg mx-auto md:mx-0"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Story Info */}
|
||||
<div className="flex-1">
|
||||
<h1 className="text-3xl font-bold theme-header mb-2">
|
||||
{story.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 mb-4 text-sm theme-text opacity-70">
|
||||
<Link
|
||||
href={`/stories/${story.id}`}
|
||||
className="hover:underline"
|
||||
>
|
||||
by {story.authorName}
|
||||
</Link>
|
||||
<span>{story.wordCount?.toLocaleString()} words</span>
|
||||
{story.rating && (
|
||||
<div className="flex items-center gap-1">
|
||||
{renderRatingStars(story.rating)}
|
||||
</div>
|
||||
)}
|
||||
{story.seriesName && (
|
||||
<span>
|
||||
{story.seriesName}
|
||||
{story.volume && ` #${story.volume}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{story.summary && (
|
||||
<p className="theme-text mb-4 italic">
|
||||
{story.summary}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
{story.tags && story.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{story.tags.map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="inline-block px-2 py-1 text-xs rounded-full theme-accent-bg text-white"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handlePrevious}
|
||||
disabled={!collection.previousStoryId}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
← Previous Story
|
||||
</Button>
|
||||
|
||||
<div className="text-sm theme-text opacity-70">
|
||||
Story {collection.currentPosition} of {collection.totalStories}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleNext}
|
||||
disabled={!collection.nextStoryId}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
Next Story →
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Story Content */}
|
||||
<div className="theme-card p-8">
|
||||
<div
|
||||
className="prose prose-lg max-w-none theme-text"
|
||||
dangerouslySetInnerHTML={{ __html: story.contentHtml }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bottom Navigation */}
|
||||
<div className="flex justify-between items-center mt-8 p-4 theme-card">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handlePrevious}
|
||||
disabled={!collection.previousStoryId}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
← Previous
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={onBackToCollection}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
Back to Collection
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleNext}
|
||||
disabled={!collection.nextStoryId}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
Next →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user