import TabHead from '../Sections/TabHead'
import MapImg from '../../assets/img/style/help-img.jpg'

function Style() {
  return (
    <>
    {/* style conent tab */}
    <div className="strb-features-tab-content">
        {/* Controls Top setting all */}
        <div className="strb-controls-top">
          <TabHead title='Style Settings' text='You can enable or disable all options by one click.'/>
        </div>
        <div className="strb-style-wrapper">
          <div className="strb-container">
            <div className="strb-row">
              <div className="strb-col-xl-12">
                <div className="strb-style-inner">
                  <div className="strb-style-section-title">
                    <h3>Universal layout style options</h3>
                  </div>
                  <div className="strb-style-option">
                    <div className="strb-style-option-item strb-d-flex strb-align-items-center strb-justify-content-between strb-flex-wrap">
                      <div className="strb-style-option-content">
                        <h4 className="strb-style-option-title">Content area background</h4>
                        <p>You can handle the product limit for the Shop page</p>
                      </div>
                      <div className="strb-style-option-action">
                        <div className="strb-style-color strb-d-flex strb-align-items-center ">
                          <div className="strb-style-color-select">
                            <label htmlFor="bgColor">
                              <input type="color" id="bgColor" />
                              <span className="strb-style-color-select-palate" />
                              <span className="strb-style-color-select-text">Select Color</span>
                            </label>
                          </div>
                          <div className="strb-style-color-input">
                            <input type="text" defaultValue="#FFF" />
                          </div>
                          <div className="strb-style-color-btn">
                            <button type="button">Clear</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="strb-style-section-title">
                    <h3>Title</h3>
                  </div>
                  <div className="strb-style-option">
                    <div className="strb-style-option-item strb-d-flex strb-align-items-center strb-justify-content-between strb-flex-wrap">
                      <div className="strb-style-option-content">
                        <h4 className="strb-style-option-title">Title color</h4>
                        <p>Default Color for universal layout.</p>
                      </div>
                      <div className="strb-style-option-action">
                        <div className="strb-style-color strb-d-flex strb-align-items-center ">
                          <div className="strb-style-color-select">
                            <label htmlFor="bgColor">
                              <input type="color" id="bgColor" />
                              <span className="strb-style-color-select-palate" />
                              <span className="strb-style-color-select-text">Select Color</span>
                            </label>
                          </div>
                          <div className="strb-style-color-input">
                            <input type="text" defaultValue="#FFF" />
                          </div>
                          <div className="strb-style-color-btn">
                            <button type="button">Clear</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="strb-style-option-item strb-d-flex strb-align-items-center strb-justify-content-between strb-flex-wrap">
                      <div className="strb-style-option-content">
                        <h4 className="strb-style-option-title">Title hover color</h4>
                        <p>Default Color for universal layout.</p>
                      </div>
                      <div className="strb-style-option-action">
                        <div className="strb-style-color strb-d-flex strb-align-items-center ">
                          <div className="strb-style-color-select">
                            <label htmlFor="bgColor">
                              <input type="color" id="bgColor" />
                              <span className="strb-style-color-select-palate" />
                              <span className="strb-style-color-select-text">Select Color</span>
                            </label>
                          </div>
                          <div className="strb-style-color-input">
                            <input type="text" defaultValue="#FFF" />
                          </div>
                          <div className="strb-style-color-btn">
                            <button type="button">Clear</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="strb-style-section-title">
                    <h3>Archive List View Action Button</h3>
                  </div>
                  <div className="strb-style-option">
                    <div className="strb-style-option-item strb-d-flex strb-align-items-center strb-justify-content-between strb-flex-wrap">
                      <div className="strb-style-option-content">
                        <h4 className="strb-style-option-title">List View Button color</h4>
                        <p>Default Color for universal layout.</p>
                      </div>
                      <div className="strb-style-option-action">
                        <div className="strb-style-color strb-d-flex strb-align-items-center ">
                          <div className="strb-style-color-select">
                            <label htmlFor="bgColor">
                              <input type="color" id="bgColor" />
                              <span className="strb-style-color-select-palate" />
                              <span className="strb-style-color-select-text">Select Color</span>
                            </label>
                          </div>
                          <div className="strb-style-color-input">
                            <input type="text" defaultValue="#FFF" />
                          </div>
                          <div className="strb-style-color-btn">
                            <button type="button">Clear</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="strb-style-option-item strb-d-flex strb-align-items-center strb-justify-content-between strb-flex-wrap">
                      <div className="strb-style-option-content">
                        <h4 className="strb-style-option-title">Regular price color</h4>
                        <p>Default Color for universal layout.</p>
                      </div>
                      <div className="strb-style-option-action">
                        <div className="strb-style-color strb-d-flex strb-align-items-center ">
                          <div className="strb-style-color-select">
                            <label htmlFor="bgColor">
                              <input type="color" id="bgColor" />
                              <span className="strb-style-color-select-palate" />
                              <span className="strb-style-color-select-text">Select Color</span>
                            </label>
                          </div>
                          <div className="strb-style-color-input">
                            <input type="text" defaultValue="#FFF" />
                          </div>
                          <div className="strb-style-color-btn">
                            <button type="button">Clear</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="strb-style-option-item strb-d-flex strb-align-items-center strb-justify-content-between strb-flex-wrap">
                      <div className="strb-style-option-content">
                        <h4 className="strb-style-option-title">Regular price hover color</h4>
                        <p>Default Color for universal layout.</p>
                      </div>
                      <div className="strb-style-option-action">
                        <div className="strb-style-color strb-d-flex strb-align-items-center ">
                          <div className="strb-style-color-select">
                            <label htmlFor="bgColor">
                              <input type="color" id="bgColor" />
                              <span className="strb-style-color-select-palate" />
                              <span className="strb-style-color-select-text">Select Color</span>
                            </label>
                          </div>
                          <div className="strb-style-color-input">
                            <input type="text" defaultValue="#FFF" />
                          </div>
                          <div className="strb-style-color-btn">
                            <button type="button">Clear</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="strb-style-section-title">
                    <h3>Helping Screenshot</h3>
                  </div>
                  <div className="strb-style-help">
                    <img src={MapImg} alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="strb-widget-option-save strb-d-flex strb-justify-content-end">
            <a href="#" className="strb-btn-fill">Save Settings</a>
          </div>
        </div>
    </div>
    </>
  )
}

export default Style