keralawaterauthority/components/form/authselection/layoutform.js

import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
import SigninForm from '../SigninForm';
import React from 'react';


function Layoutform({ doughnutData }) {
    const [key, setKey] = React.useState('consumer');
    return (
       <React.Fragment>
    
        
         <Tabs
          defaultActiveKey="profile"
          id="justify-tab-example"
          className="mb-3 biz-tab-main"
          onSelect={(k) => setKey(k)}
          value={key}
        >
          <Tab className='border-bottom biz-tab-item selectedtab-biz' eventKey="consumer" title={   <div>
            <div>
            <i className="px-2 fa-solid fa-user"></i>
            </div>
            <div>
            Consumer
            </div>
        </div>
        }>
          <SigninForm />
          </Tab>
    
          <Tab className='border-bottom biz-tab-item' eventKey="employee" title={        <div>
            <div>
            <i className="px-2 fa-solid fa-user"></i>
            </div>
            <div>
            Employee
            </div>
        </div>
        } >
          <SigninForm />
          </Tab>
          <Tab className='border-bottom biz-tab-item' eventKey="plumber" title={     <div>
            <div>
            <i className="px-2 fa-solid fa-gear"></i>
            </div>
            <div>
            Plumber
            </div>
        </div>
        }>
          <SigninForm />
          </Tab>
         
        </Tabs>
       </React.Fragment>
      );
}
export default Layoutform;