taha12322
3 years ago
parent
49b70126e6
commit
b71677b31a
7 changed files with 140 additions and 120 deletions
@ -1,58 +0,0 @@ |
||||
import React from 'react'; |
||||
import '../../../style/chosecolor.scss'; |
||||
|
||||
|
||||
|
||||
const Chosecolor = (props) => { |
||||
const {setcolor , isChecked} = props; |
||||
|
||||
const changeColorHandler = (value) => { |
||||
setcolor(value) |
||||
} |
||||
return ( |
||||
<>
|
||||
{isChecked ? |
||||
<div className='dark-mood'> |
||||
<div className='nav-btn'> |
||||
<div> |
||||
<button onClick={() => changeColorHandler('dark-white')} id='red-btn-d' className='btn-color'> |
||||
الف |
||||
</button> |
||||
</div> |
||||
<div className='nav-btn'> |
||||
<button onClick={() => changeColorHandler('dark-brown')} id='green-btn-d' className='btn-color'> |
||||
الف |
||||
</button> |
||||
</div> |
||||
<div className='nav-btn'> |
||||
<button onClick={() => changeColorHandler('dark-blue')} id='blue-btn-d' className='btn-color'> |
||||
الف |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div>: |
||||
<div className='light-mood'> |
||||
<div className='nav-btn'> |
||||
<div> |
||||
<button onClick={() => changeColorHandler('light-white')} id='red-btn-w' className='btn-color'> |
||||
الف |
||||
</button> |
||||
</div> |
||||
<div className='nav-btn'> |
||||
<button onClick={() => changeColorHandler('light-brown')} id='green-btn-w' className='btn-color'> |
||||
الف |
||||
</button> |
||||
</div> |
||||
<div className='nav-btn'> |
||||
<button onClick={() => changeColorHandler('light-blue')} id='blue-btn-w' className='btn-color'> |
||||
الف |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default Chosecolor |
||||
@ -1,50 +1,109 @@ |
||||
import React , { useState } from 'react'; |
||||
import '../../../components/style/colorsComponents.scss'; |
||||
import PalletColorOutline from '../../image/PalletColorOutline.svg'; |
||||
import PalletColorbold from '../../image/PalletColorBold.svg'; |
||||
import Chosecolor from './Colors/chosecolor' |
||||
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap'; |
||||
|
||||
import React, { useState } from "react"; |
||||
import "../../../components/style/colorsComponents.scss"; |
||||
import "../../../components/style/chosecolor.scss"; |
||||
import PalletColorOutline from "../../image/PalletColorOutline.svg"; |
||||
import PalletColorbold from "../../image/PalletColorBold.svg"; |
||||
import Chosecolor from "./Colors/chosecolor"; |
||||
import { |
||||
ButtonDropdown, |
||||
DropdownToggle, |
||||
DropdownMenu, |
||||
DropdownItem, |
||||
} from "reactstrap"; |
||||
|
||||
const Colors = (props) => { |
||||
const { setcolor, color } = props; |
||||
const [dropdownOpen, setDropdownOpen] = useState(false); |
||||
const toggle = () => setDropdownOpen(prevState => !prevState); |
||||
|
||||
|
||||
const [isChecked, setIsChecked] = useState(false) |
||||
|
||||
const [dropdownOpen, setOpen] = useState(false); |
||||
const toggle = () => setOpen(!dropdownOpen); |
||||
const [isChecked, setIsChecked] = useState(false); |
||||
const [Icon, seticon] = useState(PalletColorOutline); |
||||
const changeIcone = () => { |
||||
seticon(Icon === PalletColorOutline ? PalletColorbold : PalletColorOutline); |
||||
}; |
||||
|
||||
const changeColorHandler = (value) => { |
||||
setcolor(value); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<nav className='main-colors-setting'> |
||||
<label class="switch"> |
||||
<input type="checkbox" |
||||
onChange={() => setIsChecked(!isChecked)} |
||||
/> |
||||
<input type="checkbox" onChange={() => setIsChecked(!isChecked)} /> |
||||
<span class="slider round"></span> |
||||
</label> |
||||
<Dropdown isOpen={dropdownOpen} toggle={toggle}> |
||||
<DropdownToggle id='dropdown-btn'> |
||||
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}> |
||||
<DropdownToggle> |
||||
<div onClick={() => changeIcone()}> |
||||
<img src={Icon} set="curved" className='palette-icon' alt='icon'/> |
||||
<img src={Icon} set="curved" className="palette-icon" alt="icon" /> |
||||
</div> |
||||
</DropdownToggle> |
||||
<DropdownMenu className='nav-menu'> |
||||
<Chosecolor
|
||||
isChecked={isChecked} |
||||
setcolor={setcolor} |
||||
color={color} |
||||
/> |
||||
<DropdownMenu> |
||||
{isChecked ? ( |
||||
<> |
||||
<DropdownItem> |
||||
<button |
||||
onClick={() => changeColorHandler("dark-white")} |
||||
id="red-btn-d" |
||||
className="btn-color" |
||||
> |
||||
الف |
||||
</button> |
||||
</DropdownItem> |
||||
<DropdownItem> |
||||
<button |
||||
onClick={() => changeColorHandler("dark-brown")} |
||||
id="green-btn-d" |
||||
className="btn-color" |
||||
> |
||||
الف |
||||
</button> |
||||
</DropdownItem> |
||||
<DropdownItem> |
||||
<button |
||||
onClick={() => changeColorHandler("dark-blue")} |
||||
id="blue-btn-d" |
||||
className="btn-color" |
||||
> |
||||
الف |
||||
</button> |
||||
</DropdownItem> |
||||
</> |
||||
) : ( |
||||
<> |
||||
<DropdownItem> |
||||
<button |
||||
onClick={() => changeColorHandler("light-white")} |
||||
id="red-btn-w" |
||||
className="btn-color" |
||||
> |
||||
الف |
||||
</button> |
||||
</DropdownItem> |
||||
<DropdownItem> |
||||
<button |
||||
onClick={() => changeColorHandler("light-brown")} |
||||
id="green-btn-w" |
||||
className="btn-color" |
||||
> |
||||
الف |
||||
</button> |
||||
</DropdownItem> |
||||
<DropdownItem> |
||||
<button |
||||
onClick={() => changeColorHandler("light-blue")} |
||||
id="blue-btn-w" |
||||
className="btn-color" |
||||
> |
||||
الف |
||||
</button> |
||||
</DropdownItem> |
||||
</> |
||||
)} |
||||
</DropdownMenu> |
||||
</Dropdown> |
||||
</nav> |
||||
</ButtonDropdown> |
||||
</> |
||||
) |
||||
} |
||||
); |
||||
}; |
||||
|
||||
export default Colors |
||||
export default Colors; |
||||
|
||||
Loading…
Reference in new issue