init

components/form/authselection/AuthIcon.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+function AuthIcon({title,icon,isActive=false}) {
+    return (
+        <div className={`align-items-center d-flex justify-content-center text-center flex-column `}>
+            <div style={{fontSize:'25px',width:'50px',height:'50px'}} className=' text-center'>
+                <i className={`px-2 fa-solid w-100 align-items-center  d-flex justify-content-center h-100 fa-${icon} ${isActive ? 'auth-select-icon bg-primary text-white':''}`}></i>
+            </div>
+            <div className='font-13'>
+                {title}
+            </div>
+        </div>
+    )
+}
+
+export default AuthIcon

components/form/authselection/layoutform.js

@@ -0,0 +1,59 @@
+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;