88 lines
3.8 KiB
JavaScript
88 lines
3.8 KiB
JavaScript
import { Head, Link, router } from '@inertiajs/react';
|
|
import { Button } from '@/components/ui/button';
|
|
import AppLayout from '@/Layouts/AppLayout.jsx';
|
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Star } from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
|
|
import { useToast } from "@/hooks/use-toast.js";
|
|
import { useState } from "react";
|
|
|
|
export default function Favourites({ auth, favourites }) {
|
|
|
|
const { toast } = useToast();
|
|
const [stateFavourites, setStateFavourites] = useState(favourites);
|
|
|
|
const favouriteOnClickHandler = (pathword) => {
|
|
axios.post(route('comics.postFavourite'), { pathword: pathword }).then(res => {
|
|
setStateFavourites(stateFavourites.filter(f => f.pathword !== pathword));
|
|
});
|
|
|
|
toast({
|
|
title: "All set",
|
|
description: `The comic is now removed from your favorite list.`,
|
|
});
|
|
}
|
|
|
|
const FavouriteCard = (props) => {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex gap-2">
|
|
<div className="basis-1/4 pt-3">
|
|
<div className="relative">
|
|
<Link href={ `/comic/${ props.pathword }` }>
|
|
<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.pathword) } size="icon">
|
|
<Star fill='yellow' />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="basis-3/4">
|
|
<CardHeader>
|
|
<CardTitle><Link href={ `/comic/${ props.pathword }` }>{ props.name }</Link></CardTitle>
|
|
<div className="flex gap-2 items-end justify-between">
|
|
<p>
|
|
{ props.authors.map(a => <Badge key={ a.path_word } variant="outline"><Link>{ a.name }</Link></Badge>) }
|
|
</p>
|
|
<p className="text-right text-sm">
|
|
Updated: { props.upstream_updated_at }
|
|
</p>
|
|
</div>
|
|
<div className="pt-2">{ props.description }</div>
|
|
</CardHeader>
|
|
<CardFooter className="relative">
|
|
<Button className="w-full" asChild>
|
|
<Link href={ route('comics.read', [props.pathword, props.metadata.comic.last_chapter.uuid])}>
|
|
Read [{ props.metadata.comic.last_chapter.name }]
|
|
</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AppLayout auth={ auth } header={
|
|
<>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Favourites</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</>
|
|
}>
|
|
<Head>
|
|
<title>Favourites</title>
|
|
</Head>
|
|
<div className="p-3 pt-1 grid lg:grid-cols-2 sm:grid-cols-1 gap-2">
|
|
{ stateFavourites.map((favourite, i) => <FavouriteCard key={ i } {...favourite } /> ) }
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|