Some code review fixes
This commit is contained in:
parent
4f6f3265fd
commit
22af99d7ff
|
@ -1,6 +1,5 @@
|
|||
.wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.line {
|
||||
|
@ -22,7 +21,6 @@
|
|||
|
||||
.timelineSection {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
|
||||
import styles from "./Timeline.module.css";
|
||||
|
||||
|
@ -111,30 +111,19 @@ function TimelineSection({
|
|||
textWidth,
|
||||
gap,
|
||||
}: TimelineSectionProps) {
|
||||
const [onHover, setHover] = useState(false);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
setHover(true);
|
||||
};
|
||||
const handleMouseLeave = () => setHover(false);
|
||||
|
||||
return (
|
||||
<div className={styles.timelineSection} style={{ gap: gap }}>
|
||||
<div
|
||||
className={onHover ? `${styles.time} ${styles.timeHover}` : styles.time}
|
||||
className={styles.time}
|
||||
style={{
|
||||
width: timeWidth,
|
||||
marginLeft: (width - 2 * gap - outerCircleWidth) / 2 - timeWidth,
|
||||
}}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{isTimeUppercase ? datum.time.toUpperCase() : datum.time}
|
||||
</div>
|
||||
<div
|
||||
className={styles.circle}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{
|
||||
width: outerCircleWidth,
|
||||
height: outerCircleWidth,
|
||||
|
@ -151,13 +140,11 @@ function TimelineSection({
|
|||
/>
|
||||
</div>
|
||||
<div
|
||||
className={onHover ? `${styles.text} ${styles.textHover}` : styles.text}
|
||||
className={styles.text}
|
||||
style={{
|
||||
width: textWidth,
|
||||
marginRight: (width - 2 * gap - outerCircleWidth) / 2 - textWidth,
|
||||
}}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{datum.text}
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue