notebook 4

fezcode · fezcode · commit 1590a8e57a8e · 2025-11-16T01:05:25.000+03:00
diff --git a/public/notebooks/notebooks.json b/public/notebooks/notebooks.json
@@ -1,6 +1,11 @@
 [
   {
     "id": "my-first-notebook",
-    "title": "My First Notebook"
+    "title": "My First Notebook",
+    "backgroundColor": "#9EC5AB",
+    "fontFamily": "font-playfairDisplay",
+    "textColor": "#1f2937",
+    "hoverBackgroundColor": "#7a9e8a",
+    "hoverTextColor": "#ffffff"
   }
 ]
diff --git a/src/pages/notebooks/NotebookCover.js b/src/pages/notebooks/NotebookCover.js
@@ -1,15 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+const NotebookCover = ({ title, backgroundColor, fontFamily, textColor, hoverBackgroundColor, hoverTextColor }) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    const currentBackgroundColor = isHovered ? hoverBackgroundColor : backgroundColor;
+    const currentTextColor = isHovered ? hoverTextColor : textColor;
 
-const NotebookCover = ({ title }) => {
     return (
-        <div className="relative w-full pb-[141.4%] bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl hover:scale-105 transition-all duration-300">
-            <div className="absolute inset-0 p-4"> {/* Added padding here to create space for the inner border */}
-                <div className="w-full h-full border-2 border-gray-300 flex items-center justify-center p-2"> {/* Inner border div */}
-                    <h2 className="text-gray-800 text-xl font-bold text-center font-playfairDisplay">{title}</h2>
+        <div
+            className="relative w-full pb-[141.4%] rounded-lg shadow-lg border border-gray-200 overflow-hidden transition-all duration-300"
+            style={{ backgroundColor: currentBackgroundColor }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            <div className="absolute inset-0 p-4">
+                <div className="w-full h-full border-2 border-gray-300 flex items-center justify-center p-2">
+                    <h2 className={`text-xl font-bold text-center ${fontFamily}`} style={{ color: currentTextColor }}>{title}</h2>
                 </div>
             </div>
         </div>
     );
 };
 
-export default NotebookCover;
+export default NotebookCover;
diff --git a/src/pages/notebooks/NotebooksPage.js b/src/pages/notebooks/NotebooksPage.js
@@ -77,9 +77,16 @@ const NotebooksPage = () => {
                 </div>
                 <div className="mt-16">
                     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                        {notebooks.map(notebook => (
+                        {notebooks.map((notebook) => (
                             <Link key={notebook.id} to={`/notebooks/${notebook.id}`}>
-                                <NotebookCover title={notebook.title} />
+                                <NotebookCover
+                                    title={notebook.title}
+                                    backgroundColor={notebook.backgroundColor}
+                                    fontFamily={notebook.fontFamily}
+                                    textColor={notebook.textColor}
+                                    hoverBackgroundColor={notebook.hoverBackgroundColor}
+                                    hoverTextColor={notebook.hoverTextColor}
+                                />
                             </Link>
                         ))}
                     </div>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,11 @@`
`1`	`1`	`[`
`2`	`2`	`{`
`3`	`3`	`"id": "my-first-notebook",`
`4`		`- "title": "My First Notebook"`
	`4`	`+ "title": "My First Notebook",`
	`5`	`+ "backgroundColor": "#9EC5AB",`
	`6`	`+ "fontFamily": "font-playfairDisplay",`
	`7`	`+ "textColor": "#1f2937",`
	`8`	`+ "hoverBackgroundColor": "#7a9e8a",`
	`9`	`+ "hoverTextColor": "#ffffff"`
`5`	`10`	`}`
`6`	`11`	`]`