π§ Fix JSX Structure - Remove Nested Forms and Fix Closing Tags
β Fixed JSX Structure Issues: - Removed nested form tags that caused parsing errors - Fixed missing closing div tags after Direction section removal - Proper JSX hierarchy maintained throughout component - No more Babel parsing errors π§ Technical Fixes: - Removed duplicate form wrapper around Navigation Colors - Fixed theme-mode div structure and nesting - Proper closing tags for all JSX elements - Clean component structure without syntax errors π Changes Made: - src/InitialPage/themeSettings.jsx: Fixed JSX structure - Removed nested <form> tags - Fixed div closing tags hierarchy - Maintained all functionality while fixing structure π― Benefits: - No more build errors or parsing issues - Clean JSX structure following React best practices - Proper component hierarchy - All theme customizer features still working π Maintained Features: - Theme Mode selection (Dark/Light) - Layout Mode options (Default, Box, Collapsed, etc.) - Navigation Color options (Light, Grey, Dark) - All click handlers and functionality preserved - Reset and Buy Now buttons working
This commit is contained in:
tuan.cna
parent
8f8ee906ca
commit
39d68ee143
@ -389,246 +389,245 @@ const ThemeSettings = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="theme-mode border-0 mb-0">
|
<div className="theme-mode border-0 mb-0">
|
||||||
<div className="theme-head">
|
<div className="theme-head">
|
||||||
<h6><Layout size={18} style={{marginRight: '8px', verticalAlign: 'middle'}} />Layout Mode</h6>
|
<h6><Layout size={18} style={{marginRight: '8px', verticalAlign: 'middle'}} />Layout Mode</h6>
|
||||||
<p>Select the primary layout style for your app.</p>
|
<p>Select the primary layout style for your app.</p>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-xl-6 ere">
|
||||||
|
<div className="layout-wrap">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<div
|
||||||
|
className="status-toggle d-flex align-items-center me-2"
|
||||||
|
onClick={DefaultStyle}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="layout"
|
||||||
|
id="default_layout"
|
||||||
|
className="check layout-mode"
|
||||||
|
defaultValue="default"
|
||||||
|
defaultChecked
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="default_layout"
|
||||||
|
className="checktoggles"
|
||||||
|
>
|
||||||
|
<ImageWithBasePath
|
||||||
|
src="assets/img/theme/theme-img-01.jpg"
|
||||||
|
alt="img"
|
||||||
|
/>
|
||||||
|
<span className="theme-name">Default</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row">
|
</div>
|
||||||
<div className="col-xl-6 ere">
|
<div className="col-xl-6 ere">
|
||||||
<div className="layout-wrap">
|
<div className="layout-wrap">
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<div
|
<div
|
||||||
className="status-toggle d-flex align-items-center me-2"
|
className="status-toggle d-flex align-items-center me-2"
|
||||||
onClick={DefaultStyle}
|
onClick={LayoutBox}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
name="layout"
|
name="layout"
|
||||||
id="default_layout"
|
id="box_layout"
|
||||||
className="check layout-mode"
|
className="check layout-mode"
|
||||||
defaultValue="default"
|
defaultValue="box"
|
||||||
defaultChecked
|
/>
|
||||||
/>
|
<label
|
||||||
<label
|
htmlFor="box_layout"
|
||||||
htmlFor="default_layout"
|
className="checktoggles"
|
||||||
className="checktoggles"
|
>
|
||||||
>
|
<ImageWithBasePath
|
||||||
<ImageWithBasePath
|
src="assets/img/theme/theme-img-07.jpg"
|
||||||
src="assets/img/theme/theme-img-01.jpg"
|
alt="img"
|
||||||
alt="img"
|
/>
|
||||||
/>
|
<span className="theme-name">Box</span>
|
||||||
<span className="theme-name">Default</span>
|
</label>
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xl-6 ere">
|
</div>
|
||||||
<div className="layout-wrap">
|
</div>
|
||||||
<div className="d-flex align-items-center">
|
<div className="col-xl-6 ere">
|
||||||
<div
|
<div className="layout-wrap">
|
||||||
className="status-toggle d-flex align-items-center me-2"
|
<div className="d-flex align-items-center">
|
||||||
onClick={LayoutBox}
|
<div
|
||||||
>
|
className="status-toggle d-flex align-items-center me-2"
|
||||||
<input
|
onClick={collapsedLayout}
|
||||||
type="radio"
|
>
|
||||||
name="layout"
|
<input
|
||||||
id="box_layout"
|
type="radio"
|
||||||
className="check layout-mode"
|
name="layout"
|
||||||
defaultValue="box"
|
id="collapse_layout"
|
||||||
/>
|
className="check layout-mode"
|
||||||
<label
|
defaultValue="collapsed"
|
||||||
htmlFor="box_layout"
|
/>
|
||||||
className="checktoggles"
|
<label
|
||||||
>
|
htmlFor="collapse_layout"
|
||||||
<ImageWithBasePath
|
className="checktoggles"
|
||||||
src="assets/img/theme/theme-img-07.jpg"
|
>
|
||||||
alt="img"
|
<ImageWithBasePath
|
||||||
/>
|
src="assets/img/theme/theme-img-05.jpg"
|
||||||
<span className="theme-name">Box</span>
|
alt="img"
|
||||||
</label>
|
/>
|
||||||
</div>
|
<span className="theme-name">Collapsed</span>
|
||||||
</div>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xl-6 ere">
|
</div>
|
||||||
<div className="layout-wrap">
|
</div>
|
||||||
<div className="d-flex align-items-center">
|
<div className="col-xl-6 ere">
|
||||||
<div
|
<div className="layout-wrap">
|
||||||
className="status-toggle d-flex align-items-center me-2"
|
<div className="d-flex align-items-center">
|
||||||
onClick={collapsedLayout}
|
<div
|
||||||
>
|
className="status-toggle d-flex align-items-center me-2"
|
||||||
<input
|
onClick={HorizontalLayout}
|
||||||
type="radio"
|
>
|
||||||
name="layout"
|
<input
|
||||||
id="collapse_layout"
|
type="radio"
|
||||||
className="check layout-mode"
|
name="layout"
|
||||||
defaultValue="collapsed"
|
id="horizontal_layout"
|
||||||
/>
|
className="check layout-mode"
|
||||||
<label
|
defaultValue="horizontal"
|
||||||
htmlFor="collapse_layout"
|
/>
|
||||||
className="checktoggles"
|
<label
|
||||||
>
|
htmlFor="horizontal_layout"
|
||||||
<ImageWithBasePath
|
className="checktoggles"
|
||||||
src="assets/img/theme/theme-img-05.jpg"
|
>
|
||||||
alt="img"
|
<ImageWithBasePath
|
||||||
/>
|
src="assets/img/theme/theme-img-06.jpg"
|
||||||
<span className="theme-name">Collapsed</span>
|
alt
|
||||||
</label>
|
/>
|
||||||
</div>
|
<span className="theme-name">Horizontal</span>
|
||||||
</div>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xl-6 ere">
|
</div>
|
||||||
<div className="layout-wrap">
|
</div>
|
||||||
<div className="d-flex align-items-center">
|
<div className="col-xl-6 ere">
|
||||||
<div
|
<div className="layout-wrap">
|
||||||
className="status-toggle d-flex align-items-center me-2"
|
<div className="d-flex align-items-center">
|
||||||
onClick={HorizontalLayout}
|
<div
|
||||||
>
|
className="status-toggle d-flex align-items-center me-2"
|
||||||
<input
|
onClick={modernLayout}
|
||||||
type="radio"
|
>
|
||||||
name="layout"
|
<input
|
||||||
id="horizontal_layout"
|
type="radio"
|
||||||
className="check layout-mode"
|
name="layout"
|
||||||
defaultValue="horizontal"
|
id="modern_layout"
|
||||||
/>
|
className="check layout-mode"
|
||||||
<label
|
defaultValue="modern"
|
||||||
htmlFor="horizontal_layout"
|
/>
|
||||||
className="checktoggles"
|
<label
|
||||||
>
|
htmlFor="modern_layout"
|
||||||
<ImageWithBasePath
|
className="checktoggles"
|
||||||
src="assets/img/theme/theme-img-06.jpg"
|
>
|
||||||
alt
|
<ImageWithBasePath
|
||||||
/>
|
src="assets/img/theme/theme-img-04.jpg"
|
||||||
<span className="theme-name">Horizontal</span>
|
alt
|
||||||
</label>
|
/>
|
||||||
</div>
|
<span className="theme-name">Modern</span>
|
||||||
</div>
|
</label>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xl-6 ere">
|
|
||||||
<div className="layout-wrap">
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<div
|
|
||||||
className="status-toggle d-flex align-items-center me-2"
|
|
||||||
onClick={modernLayout}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="layout"
|
|
||||||
id="modern_layout"
|
|
||||||
className="check layout-mode"
|
|
||||||
defaultValue="modern"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
htmlFor="modern_layout"
|
|
||||||
className="checktoggles"
|
|
||||||
>
|
|
||||||
<ImageWithBasePath
|
|
||||||
src="assets/img/theme/theme-img-04.jpg"
|
|
||||||
alt
|
|
||||||
/>
|
|
||||||
<span className="theme-name">Modern</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form id="nav_color" method="post">
|
</div>
|
||||||
<div className="theme-mode">
|
|
||||||
<div className="theme-head">
|
<div className="theme-mode">
|
||||||
<h6>Navigation Colors</h6>
|
<div className="theme-head">
|
||||||
<p>Setup the color for the Navigation</p>
|
<h6>Navigation Colors</h6>
|
||||||
</div>
|
<p>Setup the color for the Navigation</p>
|
||||||
<div className="row">
|
</div>
|
||||||
<div className="col-xl-4 ere">
|
<div className="row">
|
||||||
<div className="layout-wrap">
|
<div className="col-xl-4 ere">
|
||||||
<div className="d-flex align-items-center">
|
<div className="layout-wrap">
|
||||||
<div className="status-toggle d-flex align-items-center me-2">
|
<div className="d-flex align-items-center">
|
||||||
<input
|
<div className="status-toggle d-flex align-items-center me-2">
|
||||||
type="radio"
|
<input
|
||||||
name="nav_color"
|
type="radio"
|
||||||
id="light_color"
|
name="nav_color"
|
||||||
className="check nav-color"
|
id="light_color"
|
||||||
defaultValue="light"
|
className="check nav-color"
|
||||||
defaultChecked
|
defaultValue="light"
|
||||||
/>
|
defaultChecked
|
||||||
<label
|
/>
|
||||||
htmlFor="light_color"
|
<label
|
||||||
className="checktoggles"
|
htmlFor="light_color"
|
||||||
>
|
className="checktoggles"
|
||||||
<span
|
>
|
||||||
className="theme-name"
|
<span
|
||||||
onClick={LayoutLight}
|
className="theme-name"
|
||||||
>
|
onClick={LayoutLight}
|
||||||
Light
|
>
|
||||||
</span>
|
Light
|
||||||
</label>
|
</span>
|
||||||
</div>
|
</label>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xl-4 ere">
|
|
||||||
<div className="layout-wrap">
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<div className="status-toggle d-flex align-items-center me-2">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="nav_color"
|
|
||||||
id="grey_color"
|
|
||||||
className="check nav-color"
|
|
||||||
defaultValue="grey"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
htmlFor="grey_color"
|
|
||||||
className="checktoggles"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="theme-name"
|
|
||||||
onClick={LayoutGrey}
|
|
||||||
>
|
|
||||||
Grey
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xl-4 ere">
|
|
||||||
<div className="layout-wrap">
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<div className="status-toggle d-flex align-items-center me-2">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="nav_color"
|
|
||||||
id="dark_color"
|
|
||||||
className="check nav-color"
|
|
||||||
defaultValue="dark"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
htmlFor="dark_color"
|
|
||||||
className="checktoggles"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="theme-name"
|
|
||||||
onClick={LayoutDark}
|
|
||||||
>
|
|
||||||
Dark
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
|
<div className="col-xl-4 ere">
|
||||||
|
<div className="layout-wrap">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<div className="status-toggle d-flex align-items-center me-2">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="nav_color"
|
||||||
|
id="grey_color"
|
||||||
|
className="check nav-color"
|
||||||
|
defaultValue="grey"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="grey_color"
|
||||||
|
className="checktoggles"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="theme-name"
|
||||||
|
onClick={LayoutGrey}
|
||||||
|
>
|
||||||
|
Grey
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-xl-4 ere">
|
||||||
|
<div className="layout-wrap">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<div className="status-toggle d-flex align-items-center me-2">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="nav_color"
|
||||||
|
id="dark_color"
|
||||||
|
className="check nav-color"
|
||||||
|
defaultValue="dark"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="dark_color"
|
||||||
|
className="checktoggles"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="theme-name"
|
||||||
|
onClick={LayoutDark}
|
||||||
|
>
|
||||||
|
Dark
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="sidebar-footer">
|
<div className="sidebar-footer">
|
||||||
|
|||||||
Loadingβ¦
x
Reference in New Issue
Block a user