CodeBar.js
import styles from 'components/CodeBar.module.css';
import { useState } from 'react';
import CSSEditor from './Editor/CssEditor';
import JSEditor from './Editor/JsEditor';
import HtmlEditor from './Editor/HtmlEditor';

function CodeBar() {
    const [activeTab, setActiveTab] = useState('html');

    return (
        <aside className={styles.codebar}>
            <nav className={styles.tab}>
            <button  => setActiveTab('html')} className={`${styles.item} ${activeTab === 'html' && styles.activeTab || ''}`}>HTML</button>
            <button  => setActiveTab('css')} className={`${styles.item} ${activeTab === 'css' && styles.activeTab || ''}`}>CSS</button>
            <button  => setActiveTab('js')} className={`${styles.item} ${activeTab === 'js' && styles.activeTab || ''}`}>JS</button>
            </nav>

            {activeTab === 'html' && <HtmlEditor />}
            {activeTab === 'css' && <CSSEditor />}
            {activeTab === 'js' && <JSEditor />}

        </aside>
    )
}

export default CodeBar;


App.js
import logo from './logo.svg';
import './App.css';
import CodeBar from './components/CodeBar';
import Preview from 'components/Preview';
import Header from 'components/Header';

function App() {
  return (
    <>
      <CodeBar />

      <main>
        <Header />
        <Preview />
      </main>
    </>
    
  );
}

export default App;