first commit

frontend/src/pages/MyBooksPage.jsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft, faTrash } from '@fortawesome/free-solid-svg-icons';
+import ImageGlow from 'react-image-glow';
+import BookCard from '../components/BookCard.jsx';
+import { useSavedBooks } from '../context/SavedBooksContext.jsx';
+
+export default function MyBooksPage() {
+  const { savedBooks, removeBook } = useSavedBooks();
+  const [selected, setSelected] = useState(null);
+
+  const handleRemove = (title) => {
+    removeBook(title);
+    setSelected(null);
+  };
+
+  if (selected) {
+    return (
+      <section className="mybooks-detail">
+        <button type="button" className="back-btn" onClick={() => setSelected(null)}>
+          <FontAwesomeIcon icon={faChevronLeft} /> Back
+        </button>
+
+        <div className="detail-hero">
+          {selected.thumbImage ? (
+            <div className="detail-hero-glow">
+              <ImageGlow radius={60} saturation={1.4} opacity={0.9}>
+                <img src={selected.thumbImage} alt={selected.title} className="detail-hero-img" />
+              </ImageGlow>
+            </div>
+          ) : (
+            <div className="placeholder-thumb">NO COVER</div>
+          )}
+        </div>
+
+        <div className="detail-body">
+          <h1>{selected.title}</h1>
+          <p className="book-meta">{selected.authorName || 'Unknown author'}</p>
+          <p className="book-meta">
+            {selected.page ? `${selected.page} pages` : 'Page count N/A'} · {selected.rate || '-'} ★
+          </p>
+          <p className="book-meta">{selected.publisher || 'Publisher unknown'}</p>
+          <p className="book-description">{selected.description || 'Description not available.'}</p>
+          <button type="button" className="secondary-btn" onClick={() => handleRemove(selected.title)}>
+            <FontAwesomeIcon icon={faTrash} /> Remove from My Books
+          </button>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="mybooks-list">
+      {savedBooks.length === 0 && <p className="status-text info">Henüz kayitli kitap yok.</p>}
+      {savedBooks.map((book, index) => (
+        <BookCard key={`${book.title}-${index}`} book={book} onSelect={setSelected} />
+      ))}
+    </section>
+  );
+}