# blockspare/2.7.0/admin/pages/Colors.js

BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites, version 2.7.0. 114 lines.

- Page: https://pluginprobe.com/plugins/blockspare/2.7.0/code/admin/pages/Colors.js
- Raw: https://pluginprobe.com/plugins/blockspare/2.7.0/raw/admin/pages/Colors.js
- Modified: 2023-09-19T10:56:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/blockspare/2.7.0/code/admin/pages/Colors.js#L10-L20`.

```javascript
import React, { useState, useEffect } from 'react'
import { BlockPicker } from 'react-color';
const { apiFetch } = wp;
const Colors = () => {
    const [success, setSuccess] = useState(false);
    const [primary, setPrimary] = useState('#afafaf');
    const [secondary, setSecondary] = useState('#dedede');

    useEffect(() => {
        getColors()

    }, [])

    const getColors = async (value) => {
        let { primary, secondary } = await apiFetch({
            path: 'blockspare-dashboard/v1/getcolorsettings',
            method: "GET"
        })
        setPrimary(primary);
        setSecondary(secondary)
    }
    const handlePrimaryChangeComplete = async (color) => {
        setPrimary(color.hex);

        const success = await apiFetch({
            path: `blockspare-dashboard/v1/updatecolorsettings`,
            method: 'POST',
            data: {
                name: 'primary',
                primary: color.hex,

            }

        });
        setSuccess(true)
        successMsg()

    }



    const handleSecondaryChangeComplete = async (color) => {
        setSecondary(color.hex)

        const success = await apiFetch({
            path: `blockspare-dashboard/v1/updatecolorsettings`,
            method: 'POST',
            data: {
                name: 'secondary',
                secondary: color.hex,

            }

        });
        setSuccess(true)
        successMsg()


    }

    function successMsg() {
        setTimeout(function () {
            setSuccess(false)
        }, 3000)
    }


    return (
        <div className="content-wrapper settings">
            <div className="settings-tab-container">
                <div className="setting-header">
                    <h1>Color Settings</h1>
                    {success &&
                        <span>Color Updated</span>
                    }
                </div>
                <div className="setting-body">
                    <div className="blockspare__settings">
                        <div className="blockspare__settings-info">
                            <h3 className="blockspare__settings-title">Primary Color</h3>
                            <div className="blockspare__input-wrap">

                                <BlockPicker
                                    color={primary}
                                    colors={['#afafaf', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8']}
                                    onChangeComplete={handlePrimaryChangeComplete}
                                    triangle="hide"
                                />

                            </div>

                        </div>
                        <div className="blockspare__settings-info">
                            <h3 className="blockspare__settings-title">Secondary Color</h3>
                            <div className="blockspare__input-wrap">
                                <BlockPicker
                                    color={secondary}
                                    colors={['#afafaf', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8']}
                                    onChangeComplete={handleSecondaryChangeComplete}
                                    triangle="hide"
                                />

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    )

}
export default Colors
```