83 lines
3.4 KiB
JavaScript
83 lines
3.4 KiB
JavaScript
import { useState } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import { Star } from 'lucide-react';
|
|
|
|
import AppLayout from '@/Layouts/AppLayout.jsx';
|
|
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from '@/components/ui/pagination';
|
|
import { useToast } from '@/hooks/use-toast.js';
|
|
|
|
export default function Index({ comics, offset, auth }) {
|
|
|
|
const url = new URL(window.location); //searchParams
|
|
|
|
const [favourites, setFavourites] = useState(auth.user?.favourites);
|
|
const { toast } = useToast();
|
|
|
|
const favouriteOnClickHandler = (pathword) => {
|
|
axios.post(route('comics.postFavourite'), { pathword: pathword }).then(res => {
|
|
setFavourites(res.data);
|
|
});
|
|
|
|
toast({
|
|
title: "All set",
|
|
description: `${comics.list.filter(c => c.path_word === pathword)[0].name} is now in / remove your favorite list.`,
|
|
});
|
|
}
|
|
|
|
const ComicCard = (props) => (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="relative">
|
|
<Link href={ `/comic/${ props.path_word }` }>
|
|
<img className="block w-100 min-w-full object-fill" src={ "/image/" + btoa(props.cover) } alt={ props.name } />
|
|
</Link>
|
|
<Button className="absolute bottom-0 right-0" onClick={ () => favouriteOnClickHandler(props.path_word) } size="icon">
|
|
<Star fill={ favourites.includes(props.path_word) ? 'yellow': '' } />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CardTitle><Link href={ `/comic/${ props.path_word }` }>{ props.name }</Link></CardTitle>
|
|
<CardDescription className="pt-2">
|
|
{ props.author && props.author.map(a => (
|
|
<Badge className="m-1" key={ a.path_word } variant="outline">
|
|
{ a.name }
|
|
</Badge>)
|
|
) }
|
|
</CardDescription>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
const ComicCards = (comics) => {
|
|
return comics.list.map((comic, i) => <ComicCard key={ i } { ...comic } />);
|
|
}
|
|
|
|
return (
|
|
<AppLayout auth={ auth }>
|
|
<Head>
|
|
<title>Home</title>
|
|
</Head>
|
|
<div className="p-3 pt-1 grid 2xl:grid-cols-6 xl:grid-cols-4 sm:grid-cols-2 gap-2">
|
|
<ComicCards { ...comics } />
|
|
</div>
|
|
<Pagination className="justify-end pb-2">
|
|
<PaginationContent>
|
|
{ parseInt(offset) !== 0 &&
|
|
<PaginationItem>
|
|
<PaginationPrevious href={ `${ url.pathname }?${ url.searchParams }` } only={['comics', 'offset']} headers={{ offset: parseInt(offset) - 30 }} />
|
|
</PaginationItem>
|
|
}
|
|
<PaginationItem>
|
|
<PaginationNext href={ `${ url.pathname }?${ url.searchParams }` } only={['comics', 'offset']} headers={{ offset: parseInt(offset) + 30 }} />
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
</AppLayout>
|
|
);
|
|
}
|