const changeSection = throttle((event) => {
const direction = Math.sign(event.deltaY);
current += direction;
if (current > sections.length - 1) {
current = 0;
}
if (current < 0) {
current = sections.length - 1;
}
sections[current].scrollIntoView({
behavior: 'smooth'
});
}, 850);
const ListButton = ({items}) => {
const [state, setState] = useState(false);
return <button onClick={() => setState(true)} className="todo-header-plus" title="Создать список дел">
{
items.map((item,index) => (
<i key={index}>{item.icon}</i>
))
}
</button>
}
import React from 'react';
import{ FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import ListTitle from './components/list/List-title';
import ListItem from './components/list-item/List-item';
import ListButton from './components/list-button/List-button';
import AddList from './components/list-popup/List-popup';
import{ faPlusSquare } from '@fortawesome/free-solid-svg-icons';
import{ faClipboardList } from '@fortawesome/free-solid-svg-icons';
import{ faHome } from '@fortawesome/free-solid-svg-icons';
import{ faBriefcase } from '@fortawesome/free-solid-svg-icons';
import{ faPhone } from '@fortawesome/free-solid-svg-icons';
import{ faUtensils } from '@fortawesome/free-solid-svg-icons';
import{ faShoppingCart } from '@fortawesome/free-solid-svg-icons';
import{ faMoneyCheckAlt} from '@fortawesome/free-solid-svg-icons';
function App() {
return <div className="todo">
<header className="todo-header">
<ListButton items={[
{
icon: <FontAwesomeIcon icon={faPlusSquare}/>
}
]}
/>
<input className="todo-header-input" type="text" placeholder="..." maxLength="35"/>
<button className="todo-header-button">Выход</button>
</header>
<main className="todo-content">
<div className="todo-sidebar">
<AddList/>
<ListTitle items={[
{
icon: <FontAwesomeIcon icon={faClipboardList}/>,
name: 'Все задачи'
}
]}
isRemovable
/>
<ListItem items={[
{
icon: <FontAwesomeIcon icon={faHome}/>,
name: 'Дом',
color: 'home'
},
{
icon: <FontAwesomeIcon icon={faBriefcase}/>,
name: 'Работа',
color:'work'
},
{
icon: <FontAwesomeIcon icon={faPhone}/>,
name: 'Звонки',
color:'phone'
},
{
icon: <FontAwesomeIcon icon={faUtensils}/>,
name: 'Еда',
color:'food'
},
{
icon: <FontAwesomeIcon icon={faShoppingCart}/>,
name: 'Покупки',
color:'shop'
},
{
icon: <FontAwesomeIcon icon={faMoneyCheckAlt}/>,
name: 'Финансы',
color:'money'
}
]}/>
</div>
<div className="todo-tasks">
</div>
</main>
</div>//end todo
}
export default App;