This commit is contained in:
CHIEFSOFT\ameye
2025-07-23 22:30:27 -04:00
parent ab6518e2ee
commit b26f8b4e0d
2 changed files with 31 additions and 49 deletions
+30 -48
View File
@@ -5,6 +5,15 @@ import GeneralTab from "./settingsTab/GeneralTab";
export default function ProductActive(){
const settingsObject = {
home_tab: { title: 'Home Page', controls: 'home', active: 'active show' },
footer_tab: { title: 'Footer', controls: 'footer', active: '' },
about_tab: { title: 'About Page', controls: 'about', active: '' },
contact_tab: { title: 'Contact Page', controls: 'contact', active: '' },
social_tab: { title: 'Socials', controls: 'social', active: '' },
template_tab: { title: 'Template', controls: 'template', active: '' },
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '' },
};
return(
<>
@@ -42,56 +51,29 @@ export default function ProductActive(){
<div className="card-body">
<div className="tab tab-vertical">
<ul className="nav nav-tabs" role="tablist">
<li className="nav-item">
<a className="nav-link active show" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">General</a>
</li>
<li className="nav-item">
<a className="nav-link" id="home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home Page</a>
</li>
<li className="nav-item">
<a className="nav-link" id="footer-tab" data-bs-toggle="pill" data-bs-target="#footer" type="button" role="tab" aria-controls="footer" aria-selected="false">Footer</a>
</li>
<li className="nav-item">
<a className="nav-link" id="about-tab" data-bs-toggle="pill" data-bs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="false">About Page</a>
</li>
<li className="nav-item">
<a className="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="true">Contact Page</a>
</li>
<li className="nav-item">
<a className="nav-link" id="social-tab" data-bs-toggle="pill" data-bs-target="#social" type="button" role="tab" aria-controls="social" aria-selected="false">Socials</a>
</li>
<li className="nav-item">
<a className="nav-link" id="template-tab" data-bs-toggle="pill" data-bs-target="#template" type="button" role="tab" aria-controls="template" aria-selected="false">Template</a>
</li>
<li className="nav-item">
<a className="nav-link" id="color-scheme-tab" data-bs-toggle="pill" data-bs-target="#color-scheme" type="button" role="tab" aria-controls="color-scheme" aria-selected="false">Color Scheme</a>
</li>
<>
{Object.entries(settingsObject).map(([key, value]) => (
<li className="nav-item">
<a className={`nav-link ${value.active}`}
id={key} data-bs-toggle="pill"
data-bs-target={`#${value.controls}`}
type="button" role="tab"
aria-controls={value.controls}
aria-selected="true">{value.title}</a>
</li>
))}
</>
</ul>
<div className="tab-content">
<div className="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
<GeneralTab name='General' />
</div>
<div className="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<GeneralTab name='Home Page' />
</div>
<div className="tab-pane fade" id="footer" role="tabpanel" aria-labelledby="footer-tab">
<GeneralTab name='Footer' />
</div>
<div className="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
<GeneralTab name='About Page' />
</div>
<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<GeneralTab name='Contact Page' />
</div>
<div className="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">
<GeneralTab name='Socials' />
</div>
<div className="tab-pane fade" id="template" role="tabpanel" aria-labelledby="template-tab">
<GeneralTab name='Template' />
</div>
<div className="tab-pane fade" id="color-scheme" role="tabpanel" aria-labelledby="color-scheme-tab">
<GeneralTab name='Color Scheme' />
</div>
<>
{Object.entries(settingsObject).map(([key, value]) => (
<div className={`tab-pane fade ${value.active}`}
id={value.controls} role="tabpanel"
aria-labelledby={key}>
<GeneralTab name={value.title} />
</div>
))}
</>
</div>
</div>
</div>
@@ -3,7 +3,7 @@ import React from 'react'
export default function GeneralTab({name='Full Name'}) {
return (
<div className="page-account-form">
<div className="p-4">
<div className="p-0">
<form>
<h4>{name}</h4>
<div className="form-row">