Initial

2024-12-27 20:43:18 -05:00
parent 89d0394de9
commit da918835c2
84 changed files with 6160 additions and 1068 deletions
--- a/resources/js/Pages/Comic/Index.jsx
+++ b/resources/js/Pages/Comic/Index.jsx
@@ -0,0 +1,78 @@
+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.map(a => <Badge className="m-1" key={ a.path_word } variant="outline"><Link>{ a.name }</Link></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 lg:grid-cols-6 sm:grid-cols-2 gap-2">
+                <ComicCards { ...comics } />
+            </div>
+            <Pagination className="justify-end pb-2">
+                <PaginationContent>
+                    { parseInt(offset) !== 0 &&
+                        <PaginationItem>
+                            <PaginationPrevious href={ `/?${url}` } only={['comics', 'offset']} headers={{ offset: parseInt(offset) - 30 }} />
+                        </PaginationItem>
+                    }
+                    <PaginationItem>
+                        <PaginationNext href={ `/?${url}` } only={['comics', 'offset']} headers={{ offset: parseInt(offset) + 30 }} />
+                    </PaginationItem>
+                </PaginationContent>
+            </Pagination>
+        </AppLayout>
+    );
+}