feat(home): icons on carou
This commit is contained in:
@@ -2,6 +2,7 @@ import { HeroSection } from "./HeroSection";
|
|||||||
import { MediaRow } from "./MediaRow";
|
import { MediaRow } from "./MediaRow";
|
||||||
import { KomgaBook, KomgaSeries } from "@/types/komga";
|
import { KomgaBook, KomgaSeries } from "@/types/komga";
|
||||||
import { RefreshButton } from "@/components/library/RefreshButton";
|
import { RefreshButton } from "@/components/library/RefreshButton";
|
||||||
|
import { BookOpenCheck, History, Sparkles, Clock } from "lucide-react";
|
||||||
|
|
||||||
interface HomeData {
|
interface HomeData {
|
||||||
ongoing: KomgaSeries[];
|
ongoing: KomgaSeries[];
|
||||||
@@ -62,19 +63,35 @@ export function HomeContent({ data, refreshHome }: HomeContentProps) {
|
|||||||
{/* Sections de contenu */}
|
{/* Sections de contenu */}
|
||||||
<div className="space-y-12">
|
<div className="space-y-12">
|
||||||
{data.ongoing && data.ongoing.length > 0 && (
|
{data.ongoing && data.ongoing.length > 0 && (
|
||||||
<MediaRow title="Continuer la lecture" items={optimizeSeriesData(data.ongoing)} />
|
<MediaRow
|
||||||
|
title="Continuer la lecture"
|
||||||
|
items={optimizeSeriesData(data.ongoing)}
|
||||||
|
icon={<BookOpenCheck className="w-6 h-6" />}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{data.onDeck && data.onDeck.length > 0 && (
|
{data.onDeck && data.onDeck.length > 0 && (
|
||||||
<MediaRow title="À suivre" items={optimizeBookData(data.onDeck)} />
|
<MediaRow
|
||||||
|
title="À suivre"
|
||||||
|
items={optimizeBookData(data.onDeck)}
|
||||||
|
icon={<Clock className="w-6 h-6" />}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{data.latestSeries && data.latestSeries.length > 0 && (
|
{data.latestSeries && data.latestSeries.length > 0 && (
|
||||||
<MediaRow title="Dernières séries" items={optimizeSeriesData(data.latestSeries)} />
|
<MediaRow
|
||||||
|
title="Dernières séries"
|
||||||
|
items={optimizeSeriesData(data.latestSeries)}
|
||||||
|
icon={<Sparkles className="w-6 h-6" />}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{data.recentlyRead && data.recentlyRead.length > 0 && (
|
{data.recentlyRead && data.recentlyRead.length > 0 && (
|
||||||
<MediaRow title="Ajouts récents" items={optimizeBookData(data.recentlyRead)} />
|
<MediaRow
|
||||||
|
title="Ajouts récents"
|
||||||
|
items={optimizeBookData(data.recentlyRead)}
|
||||||
|
icon={<History className="w-6 h-6" />}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -26,9 +26,10 @@ interface OptimizedBook extends BaseItem {
|
|||||||
interface MediaRowProps {
|
interface MediaRowProps {
|
||||||
title: string;
|
title: string;
|
||||||
items: (OptimizedSeries | OptimizedBook)[];
|
items: (OptimizedSeries | OptimizedBook)[];
|
||||||
|
icon?: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MediaRow({ title, items }: MediaRowProps) {
|
export function MediaRow({ title, items, icon }: MediaRowProps) {
|
||||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||||
const [showLeftArrow, setShowLeftArrow] = useState(false);
|
const [showLeftArrow, setShowLeftArrow] = useState(false);
|
||||||
const [showRightArrow, setShowRightArrow] = useState(true);
|
const [showRightArrow, setShowRightArrow] = useState(true);
|
||||||
@@ -58,7 +59,10 @@ export function MediaRow({ title, items }: MediaRowProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h2 className="text-2xl font-bold tracking-tight">{title}</h2>
|
<div className="flex items-center gap-2">
|
||||||
|
{icon}
|
||||||
|
<h2 className="text-2xl font-bold tracking-tight">{title}</h2>
|
||||||
|
</div>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
{/* Bouton de défilement gauche */}
|
{/* Bouton de défilement gauche */}
|
||||||
{showLeftArrow && (
|
{showLeftArrow && (
|
||||||
|
|||||||
Reference in New Issue
Block a user