-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathNotebookCover.jsx
More file actions
39 lines (35 loc) · 1.08 KB
/
NotebookCover.jsx
File metadata and controls
39 lines (35 loc) · 1.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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;
return (
<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;