inital working version
This commit is contained in:
Stefan Hardegger
261
frontend/src/components/stories/StoryCard.tsx
Normal file
261
frontend/src/components/stories/StoryCard.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { Story } from '../../types/api';
|
||||
import { storyApi, getImageUrl } from '../../lib/api';
|
||||
import Button from '../ui/Button';
|
||||
|
||||
interface StoryCardProps {
|
||||
story: Story;
|
||||
viewMode: 'grid' | 'list';
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export default function StoryCard({ story, viewMode, onUpdate }: StoryCardProps) {
|
||||
const [rating, setRating] = useState(story.rating || 0);
|
||||
const [updating, setUpdating] = useState(false);
|
||||
|
||||
const handleRatingClick = async (newRating: number) => {
|
||||
if (updating) return;
|
||||
|
||||
try {
|
||||
setUpdating(true);
|
||||
await storyApi.updateRating(story.id, newRating);
|
||||
setRating(newRating);
|
||||
onUpdate();
|
||||
} catch (error) {
|
||||
console.error('Failed to update rating:', error);
|
||||
} finally {
|
||||
setUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatWordCount = (wordCount: number) => {
|
||||
return wordCount.toLocaleString() + ' words';
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString();
|
||||
};
|
||||
|
||||
if (viewMode === 'list') {
|
||||
return (
|
||||
<div className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow">
|
||||
<div className="flex gap-4">
|
||||
{/* Cover Image */}
|
||||
<div className="flex-shrink-0">
|
||||
<Link href={`/stories/${story.id}/detail`}>
|
||||
<div className="w-16 h-20 bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
|
||||
{story.coverPath ? (
|
||||
<Image
|
||||
src={getImageUrl(story.coverPath)}
|
||||
alt={story.title}
|
||||
width={64}
|
||||
height={80}
|
||||
className="w-full h-full object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center theme-text text-xs">
|
||||
📖
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<Link href={`/stories/${story.id}/detail`}>
|
||||
<h3 className="text-lg font-semibold theme-header hover:theme-accent transition-colors truncate">
|
||||
{story.title}
|
||||
</h3>
|
||||
</Link>
|
||||
|
||||
<Link href={`/authors/${story.authorId}`}>
|
||||
<p className="theme-text hover:theme-accent transition-colors">
|
||||
{story.authorName}
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mt-2 text-sm theme-text">
|
||||
<span>{formatWordCount(story.wordCount)}</span>
|
||||
<span>{formatDate(story.createdAt)}</span>
|
||||
{story.seriesName && (
|
||||
<span>
|
||||
{story.seriesName} #{story.volume}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{Array.isArray(story.tags) && story.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{story.tags.slice(0, 3).map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="px-2 py-1 text-xs rounded theme-accent-bg text-white"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
{story.tags.length > 3 && (
|
||||
<span className="px-2 py-1 text-xs theme-text">
|
||||
+{story.tags.length - 3} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex flex-col items-end gap-2 ml-4">
|
||||
{/* Rating */}
|
||||
<div className="flex gap-1">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<button
|
||||
key={star}
|
||||
onClick={() => handleRatingClick(star)}
|
||||
className={`text-lg ${
|
||||
star <= rating
|
||||
? 'text-yellow-400'
|
||||
: 'text-gray-300 dark:text-gray-600'
|
||||
} hover:text-yellow-400 transition-colors ${
|
||||
updating ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
}`}
|
||||
disabled={updating}
|
||||
>
|
||||
★
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href={`/stories/${story.id}`}>
|
||||
<Button size="sm" className="w-full">
|
||||
Read
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/stories/${story.id}/edit`}>
|
||||
<Button size="sm" variant="ghost" className="w-full">
|
||||
Edit
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Grid view
|
||||
return (
|
||||
<div className="theme-card theme-shadow rounded-lg overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
{/* Cover Image */}
|
||||
<Link href={`/stories/${story.id}`}>
|
||||
<div className="aspect-[3/4] bg-gray-200 dark:bg-gray-700 overflow-hidden">
|
||||
{story.coverPath ? (
|
||||
<Image
|
||||
src={getImageUrl(story.coverPath)}
|
||||
alt={story.title}
|
||||
width={300}
|
||||
height={400}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center theme-text text-6xl">
|
||||
📖
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="p-4">
|
||||
{/* Title and Author */}
|
||||
<Link href={`/stories/${story.id}`}>
|
||||
<h3 className="font-semibold theme-header hover:theme-accent transition-colors line-clamp-2 mb-1">
|
||||
{story.title}
|
||||
</h3>
|
||||
</Link>
|
||||
|
||||
<Link href={`/authors/${story.authorId}`}>
|
||||
<p className="text-sm theme-text hover:theme-accent transition-colors mb-2">
|
||||
{story.authorName}
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex gap-1 mb-2">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<button
|
||||
key={star}
|
||||
onClick={() => handleRatingClick(star)}
|
||||
className={`text-sm ${
|
||||
star <= rating
|
||||
? 'text-yellow-400'
|
||||
: 'text-gray-300 dark:text-gray-600'
|
||||
} hover:text-yellow-400 transition-colors ${
|
||||
updating ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
}`}
|
||||
disabled={updating}
|
||||
>
|
||||
★
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="text-xs theme-text space-y-1">
|
||||
<div>{formatWordCount(story.wordCount)}</div>
|
||||
<div>{formatDate(story.createdAt)}</div>
|
||||
{story.seriesName && (
|
||||
<div>
|
||||
{story.seriesName} #{story.volume}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{Array.isArray(story.tags) && story.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{story.tags.slice(0, 2).map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="px-2 py-1 text-xs rounded theme-accent-bg text-white"
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
{story.tags.length > 2 && (
|
||||
<span className="px-2 py-1 text-xs theme-text">
|
||||
+{story.tags.length - 2}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 mt-4">
|
||||
<Link href={`/stories/${story.id}`} className="flex-1">
|
||||
<Button size="sm" className="w-full">
|
||||
Read
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/stories/${story.id}/edit`}>
|
||||
<Button size="sm" variant="ghost">
|
||||
Edit
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user