Add components for Act management and integrate Electron setup

components/book/BookCard.tsx

@@ -0,0 +1,80 @@
+import Link from "next/link";
+import React from "react";
+import {BookProps} from "@/lib/models/Book";
+import DeleteBook from "@/components/book/settings/DeleteBook";
+import ExportBook from "@/components/ExportBook";
+import {useTranslations} from "next-intl";
+
+export default function BookCard(
+    {
+        book,
+        onClickCallback,
+        index
+    }: {
+        book: BookProps,
+        onClickCallback: Function;
+        index: number;
+    }) {
+    const t = useTranslations();
+    
+    return (
+        <div
+            className="group bg-tertiary/90 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 h-full border border-secondary/50 hover:border-primary/50 flex flex-col hover:scale-105">
+            <div className="relative w-full h-[400px] sm:h-32 md:h-48 lg:h-64 xl:h-80 flex-shrink-0 overflow-hidden">
+                <Link onClick={(): void => onClickCallback(book.bookId)} href={``}>
+                    {book.coverImage ? (
+                        <img
+                            src={book.coverImage}
+                            alt={book.title || t("bookCard.noCoverAlt")}
+                            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                        />
+                    ) : (
+                        <div
+                            className="relative w-full h-full bg-gradient-to-br from-secondary via-secondary to-gray-dark flex items-center justify-center overflow-hidden">
+                            <div className="absolute inset-0 bg-primary/5"></div>
+                            <span
+                                className="relative text-primary/80 text-4xl sm:text-5xl md:text-6xl font-['ADLaM_Display'] tracking-wider">
+                                {book.title.charAt(0).toUpperCase()}{t("bookCard.initialsSeparator")}{book.subTitle ? book.subTitle.charAt(0).toUpperCase() : ''}
+                            </span>
+                            <div
+                                className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent"></div>
+                            <div
+                                className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent"></div>
+                        </div>
+                    )}
+                </Link>
+                <div
+                    className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-tertiary via-tertiary/50 to-transparent h-24"></div>
+            </div>
+            
+            <div className="p-4 flex-1 flex flex-col justify-between">
+                <div className="flex-1">
+                    <Link onClick={(): void => onClickCallback(book.bookId)} href={``}>
+                        <h3 className="text-text-primary text-center font-bold text-base mb-2 truncate group-hover:text-primary transition-colors tracking-wide">
+                            {book.title}
+                        </h3>
+                    </Link>
+                    <div className="flex items-center justify-center mb-3 h-5">
+                        {book.subTitle ? (
+                            <>
+                                <div className="h-px w-8 bg-primary/30"></div>
+                                <p className="text-muted text-center mx-2 text-xs italic truncate px-2">
+                                    {book.subTitle}
+                                </p>
+                                <div className="h-px w-8 bg-primary/30"></div>
+                            </>
+                        ) : null}
+                    </div>
+                </div>
+                <div className="flex justify-between items-center pt-3 border-t border-secondary/30">
+                    <span
+                        className="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full font-medium border border-primary/30"></span>
+                    <div className="flex items-center gap-1" {...index === 0 && {'data-guide': 'bottom-book-card'}}>
+                        <ExportBook bookTitle={book.title} bookId={book.bookId}/>
+                        <DeleteBook bookId={book.bookId}/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}