import React, { useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import styled from "styled-components"; import { setGridView } from "./settingsSlice"; import { FaThList } from "react-icons/fa"; import { BsFillGrid3X3GapFill } from "react-icons/bs"; import ReactTooltip from "react-tooltip"; const NotesViewDiv = styled.div` display: flex; align-items: center; justify-content: space-between; width: 80%; height: 70px; background-color: ${(p) => p.theme.backgroundSecondary}; p { margin: 0; } `; export const Options = styled.div` display: flex; align-items: center; justify-content: center; width: 120px; svg{ cursor: pointer; margin:3px; font-size: 1.2em; } #list-view-opt { color: ${(p) => (p.isGridView ? p.theme.primaryText : "#fabb18")}; } #grid-view-opt { color: ${(p) => (p.isGridView ? "#fabb18" : p.theme.primaryText)}; } `; export function NotesViewToggle() { const isGridView = useSelector((s) => s.settings.isGridView); const dispatch = useDispatch(); return ( <NotesViewDiv> <p>Notes View Layout</p> <Options isGridView={isGridView}> <FaThList id="list-view-opt" data-for="list-view" data-tip="" onClick={() => {console.log('fd');dispatch(setGridView(false))}} /> <BsFillGrid3X3GapFill id="grid-view-opt" data-for="grid-view" data-tip="" onClick={() => dispatch(setGridView(true))} /> <ReactTooltip id="list-view" getContent={() => "List View"} /> <ReactTooltip id="grid-view" getContent={() => "Grid View"} /> </Options> </NotesViewDiv> ); }