This is a React component for a list with three items. Each item has a title in the left column and a time in the right column. When you hover over an item, the background turns white, and the time is replaced with options for edit, delete, and share.
The list component
import React, { useState } from 'react';
import './List.css'; // Make sure to create a CSS file (List.css) for styling
const List = ({ data }) => {
const [hoveredIndex, setHoveredIndex] = useState(null);
const handleMouseEnter = (index) => {
setHoveredIndex(index);
};
const handleMouseLeave = () => {
setHoveredIndex(null);
};
return (
<div className="list-container">
{data.map((item, index) => (
<div
key={index}
className={`list-item ${hoveredIndex === index ? 'hovered' : ''}`}
onMouseEnter={() => handleMouseEnter(index)}
onMouseLeave={handleMouseLeave}
>
<div className="title">{item.title}</div>
<div className="actions">
{hoveredIndex === index && (
<>
<span className="action-btn">Edit</span>
<span className="action-btn">Delete</span>
<span className="action-btn">Share</span>
</>
)}
{hoveredIndex !== index && <div className="time">{item.time}</div>}
</div>
</div>
))}
</div>
);
};
export default List;
CSS file
.list-container {
display: flex;
flex-direction: column;
}
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
transition: background-color 0.3s ease;
}
.list-item.hovered {
background-color: #fff;
}
.title {
flex-grow: 1;
}
.actions {
display: flex;
}
.action-btn {
cursor: pointer;
margin-left: 10px;
}
.time {
margin-left: 10px;
}
Include the List component into your parent component
import React from 'react';
import List from './List';
const YourComponent = () => {
const listData = [
{ title: 'Item 1', time: '10:00 AM' },
{ title: 'Item 2', time: '11:30 AM' },
{ title: 'Item 3', time: '2:45 PM' },
];
return (
<div>
<List data={listData} />
</div>
);
};
export default YourComponent;