Remove CharacterComponent and CharacterDetail components
- Deleted `CharacterComponent` and `CharacterDetail` files from the project. - Refactored related logic to improve code maintainability and reduce redundancy.
This commit is contained in:
natreex
112
components/series/SeriesCard.tsx
Normal file
112
components/series/SeriesCard.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
'use client';
|
||||
import React, {useState} from "react";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faCog, faLayerGroup} from "@fortawesome/free-solid-svg-icons";
|
||||
import {BookProps} from "@/lib/models/Book";
|
||||
import BookCard from "@/components/book/BookCard";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {SyncType} from "@/context/BooksSyncContext";
|
||||
import {SeriesSyncType} from "@/context/SeriesSyncContext";
|
||||
import SyncSeries from "@/components/SyncSeries";
|
||||
|
||||
export interface SeriesCardProps {
|
||||
id: string;
|
||||
name: string;
|
||||
coverImage: string | null;
|
||||
books: BookProps[];
|
||||
}
|
||||
|
||||
interface SeriesCardComponentProps {
|
||||
series: SeriesCardProps;
|
||||
onBookClick: (bookId: string) => Promise<void>;
|
||||
onSettingsClick: (seriesId: string) => void;
|
||||
getSyncStatus?: (bookId: string) => SyncType;
|
||||
seriesSyncStatus?: SeriesSyncType;
|
||||
}
|
||||
|
||||
export default function SeriesCard({series, onBookClick, onSettingsClick, getSyncStatus, seriesSyncStatus = 'synced'}: SeriesCardComponentProps) {
|
||||
const t = useTranslations();
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<div className="flex flex-shrink-0 p-2">
|
||||
<div
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className={`group bg-tertiary/90 backdrop-blur-sm shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-primary/50 hover:border-primary flex flex-col cursor-pointer flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 ${isExpanded ? 'rounded-l-2xl border-r-0' : 'rounded-2xl'}`}
|
||||
>
|
||||
<div className="relative w-full aspect-[2/3] flex-shrink-0 overflow-hidden rounded-t-2xl">
|
||||
{series.coverImage ? (
|
||||
<img
|
||||
src={series.coverImage}
|
||||
alt={series.name}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-80"
|
||||
/>
|
||||
) : (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-primary/30 via-primary/20 to-secondary flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 bg-primary/10"></div>
|
||||
<FontAwesomeIcon icon={faLayerGroup} className="text-primary w-16 h-16 opacity-60"/>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-tertiary via-tertiary/50 to-transparent h-24"></div>
|
||||
|
||||
<div className="absolute top-3 right-3 flex items-center gap-2">
|
||||
<SyncSeries seriesId={series.id} status={seriesSyncStatus} />
|
||||
<div className="bg-primary text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
|
||||
{series.books.length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 flex-1 flex flex-col justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-text-primary text-center font-bold text-base mb-2 truncate group-hover:text-primary transition-colors tracking-wide">
|
||||
{series.name}
|
||||
</h3>
|
||||
<div className="flex items-center justify-center mb-3 h-5">
|
||||
<div className="h-px w-8 bg-primary/30"></div>
|
||||
<p className="text-muted text-center mx-2 text-xs italic truncate px-2">
|
||||
{series.books.length} {series.books.length > 1 ? t("seriesCard.books") : t("seriesCard.book")}
|
||||
</p>
|
||||
<div className="h-px w-8 bg-primary/30"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center items-center pt-3 border-t border-primary/30">
|
||||
<span className="bg-primary/20 text-primary text-xs px-3 py-1 rounded-full font-medium border border-primary/30">
|
||||
{t("seriesCard.series")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${isExpanded ? 'flex' : 'hidden'} items-center border-y-2 border-primary bg-primary/5`}>
|
||||
{series.books.map((book: BookProps, idx: number) => (
|
||||
<div key={book.bookId} className="flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 p-2">
|
||||
<BookCard
|
||||
book={book}
|
||||
onClickCallback={onBookClick}
|
||||
index={idx}
|
||||
syncStatus={getSyncStatus ? getSyncStatus(book.bookId) : 'synced'}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Bouton Settings */}
|
||||
<div className="flex items-center px-4 flex-shrink-0">
|
||||
<button
|
||||
onClick={(event: React.MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
onSettingsClick(series.id);
|
||||
}}
|
||||
className="p-4 rounded-xl bg-primary/20 hover:bg-primary text-primary hover:text-white transition-all duration-200 hover:scale-110 shadow-lg"
|
||||
title={t("seriesCard.settings")}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCog} className="w-6 h-6"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bordure de fin */}
|
||||
<div className={`${isExpanded ? 'block' : 'hidden'} w-3 border-y-2 border-r-2 border-primary rounded-r-2xl bg-primary/5 flex-shrink-0`}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user