tabexseriescomponents 0.0.65 → 0.0.67

package/{srcOLD → src1-10}/TabexComponents/Headers/Header6/Header6.jsx

@@ -2,11 +2,6 @@ import React, { useEffect, useState, useContext } from 'react';
 // import headerstyles from './header6.module.css';
 
 import headerstyles from '../../../styles/headers/header6.module.css';
-
-// import { serverbaselink } from '../../../Env_Variables';
-// import { FetchingContext } from '../../../FetchingContext';
-// import { TemplateRoutingContext } from '../../../TemplateRoutingContext';
-// import { WebsiteDesignWorkPlaceContext } from '../../../../WebsiteDesignWorkPlaceContext';
 import { css } from 'glamor';
 import Dropdown from 'react-bootstrap/Dropdown';
 // import '../../Generalfiles/CSS_GENERAL/dropdown.css';
@@ -330,7 +325,7 @@ const Header6 = (props) => {
 
     return (
         <div
-            class="row m-0 w-100 d-flex align-items-center justify-content-center "
+            className="row m-0 w-100 d-flex align-items-center justify-content-center "
             style={{
                 // overflow: 'hidden',
                 // height: sectionproperties.header_height + 'px',
@@ -338,13 +333,13 @@ const Header6 = (props) => {
                 marginBottom: sectionproperties.header_marginBottom + 'px',
             }}
         >
-            <div class={` ${header_cssstyles.headercontainer}` + ' d-flex d-md-none align-items-center m-0 '}>
-                <div class="row m-0 w-100 ">
-                    <div class="col-lg-12 p-0 ">
-                        <div class={` ${headerstyles.navbar}` + ' row m-0  w-100 d-flex flex-row align-items-center h-100 '}>
-                            <div class="col-lg-4 p-0 ">
+            <div className={` ${header_cssstyles.headercontainer}` + ' d-flex d-md-none align-items-center m-0 '}>
+                <div className="row m-0 w-100 ">
+                    <div className="col-lg-12 p-0 ">
+                        <div className={` ${headerstyles.navbar}` + ' row m-0  w-100 d-flex flex-row align-items-center h-100 '}>
+                            <div className="col-lg-4 p-0 ">
                                 <div
-                                    class={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
+                                    className={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
                                     style={{ cursor: 'pointer' }}
                                     onClick={() => {
                                         routingcountext('home');
@@ -361,8 +356,8 @@ const Header6 = (props) => {
                                     />
                                 </div>
                             </div>
-                            <div class={` ${headerstyles.nav__item}` + ' col-lg-4 p-0 d-flex flex-row align-items-center justify-content-center '}>
-                                {templatepropcontext.pagesnprop.map((item, index) => {
+                            <div className={` ${headerstyles.nav__item}` + ' col-lg-4 p-0 d-flex flex-row align-items-center justify-content-center '}>
+                                {templatepropcontext?.pagesnprop.map((item, index) => {
                                     var activeclass = '';
                                     var pagedisabled = '';
                                     if (item.isselected) {
@@ -375,26 +370,26 @@ const Header6 = (props) => {
                                                     routingcountext(item.navigationroute, false, '');
                                                 }}
                                             >
-                                                <p class={` ${headerstyles.link} ${header_cssstyles.navbar_item_text}` + ' p-0 mb-0 '}>{langdetect == 'en' ? item.pagename : item.pagename_ar}</p>
+                                                <p className={` ${headerstyles.link} ${header_cssstyles.navbar_item_text}` + ' p-0 mb-0 '}>{langdetect == 'en' ? item.pagename : item.pagename_ar}</p>
                                             </div>
                                         );
                                     }
                                 })}
                             </div>
 
-                            <div class="col-lg-4 p-0 d-flex align-items-center justify-content-center">
+                            <div className="col-lg-4 p-0 d-flex align-items-center justify-content-center">
                                 {sectionproperties.searchbar_show == 'Show' && (
                                     <div
-                                        class="col-lg-4 p-0 d-flex justify-content-end align-items-center"
+                                        className="col-lg-4 p-0 d-flex justify-content-end align-items-center"
                                         style={{
                                             marginRight: langdetect == 'en' ? '0.5rem' : 0,
                                             marginLeft: langdetect == 'ar' ? '0.5rem' : 0,
                                         }}
                                     >
-                                        <div class="row m-0 w-100 d-flex justify-content-end align-items-center">
-                                            <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                        <div className="row m-0 w-100 d-flex justify-content-end align-items-center">
+                                            <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
                                                 <input
-                                                    class={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
+                                                    className={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
                                                     placeholder={langdetect == 'en' ? "What're we looking for?" : 'البحث...'}
                                                     onChange={(event) => {
                                                         setSearchHeaderInputContext(event.target.value);
@@ -404,8 +399,8 @@ const Header6 = (props) => {
                                                         left: langdetect == 'en' ? '' : 0,
                                                     }}
                                                 />
-                                                <div class={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
-                                                    <i class={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
+                                                <div className={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
+                                                    <i className={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
                                                         <GoSearch
                                                             size={sectionproperties.searchbarcontfontsize}
                                                             style={{
@@ -415,8 +410,8 @@ const Header6 = (props) => {
                                                     </i>
                                                 </div>
                                             </div>
-                                            <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
-                                                <Searchlist sectionpropertiesprops={sectionproperties} srcfromprops={'header-250'} />
+                                            <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                                <Searchlist sectionpropertiesprops={sectionproperties} actions={actions} srcfromprops={'header-250'} />
                                             </div>
                                         </div>
                                     </div>
@@ -425,32 +420,32 @@ const Header6 = (props) => {
                                     <Dropdown.Toggle>
                                         {!authdetailsContext.loggedin && (
                                             <div
-                                                class={
+                                                className={
                                                     langdetect == 'en'
                                                         ? ` ${header_cssstyles.user_btn}` + ' d-flex align-items-center justify-content-center ml-2 '
                                                         : ` ${header_cssstyles.user_btn}` + ' d-flex align-items-center justify-content-center mr-2 '
                                                 }
                                                 sytle={{ position: 'relative' }}
                                             >
-                                                <i class={' h-100 d-flex align-items-center '}>
+                                                <i className={' h-100 d-flex align-items-center '}>
                                                     <AiOutlineUser size={sectionproperties.userBtnTextfontsize} />
                                                 </i>
                                             </div>
                                         )}
                                         {authdetailsContext.loggedin && (
-                                            <div class={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
-                                                <div class={header_cssstyles.userbtnloggedin + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
-                                                    <i class={' h-100 allcentered '}>
+                                            <div className={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
+                                                <div className={header_cssstyles.userbtnloggedin + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
+                                                    <i className={' h-100 allcentered '}>
                                                         <AiOutlineUser size={sectionproperties.loggedinusericonfontsize} />
                                                     </i>
                                                 </div>
                                                 <div
-                                                    class="m-0 p-0 loggedinuserbtn flex-column"
+                                                    className="m-0 p-0 loggedinuserbtn flex-column"
                                                     style={{
                                                         textAlign: langdetect == 'en' ? 'left' : 'right',
                                                     }}
                                                 >
-                                                    <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn text-capitalize m-0 p-0 '}>{authdetailsContext.customerinfo.name}</p>
+                                                    <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn text-capitalize m-0 p-0 '}>{authdetailsContext.customerinfo.name}</p>
                                                 </div>
                                             </div>
                                         )}
@@ -458,28 +453,28 @@ const Header6 = (props) => {
                                     {!authdetailsContext.loggedin && (
                                         <Dropdown.Menu>
                                             <Dropdown.Item
-                                                class={`${header_cssstyles.dropdownitem}`}
+                                                className={`${header_cssstyles.dropdownitem}`}
                                                 onClick={() => {
                                                     routingcountext(StaticPagesLinksContext.Login);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
-                                                        <AiOutlineLogin class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
+                                                        <AiOutlineLogin className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
                                                         {lang.login}
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
                                             <Dropdown.Divider></Dropdown.Divider>
                                             <Dropdown.Item
-                                                class={`${header_cssstyles.dropdownitem}`}
+                                                className={`${header_cssstyles.dropdownitem}`}
                                                 onClick={() => {
                                                     routingcountext(StaticPagesLinksContext.Signup);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 text-transform-none '}>
-                                                        <AiOutlineUserAdd class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 text-transform-none '}>
+                                                        <AiOutlineUserAdd className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
                                                         {lang.signup}
                                                     </p>
                                                 </div>
@@ -488,7 +483,7 @@ const Header6 = (props) => {
                                     )}
                                     {authdetailsContext.loggedin && (
                                         <Dropdown.Menu style={{ minWidth: '200px' }}>
-                                            <Dropdown.Item class={`${header_cssstyles.dropdownitem}` + ' allcentered '}>
+                                            <Dropdown.Item className={`${header_cssstyles.dropdownitem}` + ' allcentered '}>
                                                 <span
                                                     style={{
                                                         color: '#8fa0bd',
@@ -497,7 +492,7 @@ const Header6 = (props) => {
                                                     {lang.hello},
                                                 </span>
                                                 <span
-                                                    class="font-weight-600 ml-1 mr-1 text-overflow text-capitalize"
+                                                    className="font-weight-600 ml-1 mr-1 text-overflow text-capitalize"
                                                     onClick={() => {
                                                         routingcountext(StaticPagesLinksContext.accountinfo);
                                                     }}
@@ -511,14 +506,14 @@ const Header6 = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Ordershistory);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
-                                                        {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
+                                                        {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                        {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                        {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                        {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                        {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                        {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
                                                         {lang.orderhistory}
                                                     </p>
                                                 </div>
@@ -529,10 +524,10 @@ const Header6 = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
-                                                        {sectionproperties.faviconshape == 'Heart Shape' && <FaRegHeart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />} {lang.wishlist}
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
+                                                        {sectionproperties.faviconshape == 'Heart Shape' && <FaRegHeart className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                        {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />} {lang.wishlist}
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -542,9 +537,9 @@ const Header6 = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Policies);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
-                                                        <MdOutlinePolicy class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
+                                                        <MdOutlinePolicy className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
                                                         {lang.policies}
                                                     </p>
                                                 </div>
@@ -555,9 +550,9 @@ const Header6 = (props) => {
                                                     LogoutMutationContext.mutate();
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
-                                                        <BiLogOutCircle class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem allcenetered m-0 p-0 '}>
+                                                        <BiLogOutCircle className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
                                                         {lang.logout}
                                                     </p>
                                                 </div>
@@ -566,7 +561,7 @@ const Header6 = (props) => {
                                     )}
                                 </Dropdown>
                                 <div
-                                    class={
+                                    className={
                                         langdetect == 'en'
                                             ? `${header_cssstyles.wishlist_btn}` + ' cursor-pointer allcentered ml-3 '
                                             : `${header_cssstyles.wishlist_btn}` + ' cursor-pointer allcentered mr-3 '
@@ -575,8 +570,8 @@ const Header6 = (props) => {
                                         routingcountext(StaticPagesLinksContext.Wishlist);
                                     }}
                                 >
-                                    <span class={' pr-0  '} style={{ position: 'relative' }}>
-                                        <i class="allcentered">
+                                    <span className={' pr-0  '} style={{ position: 'relative' }}>
+                                        <i className="allcentered">
                                             {sectionproperties.faviconshape == 'Heart Shape' && (
                                                 <FaRegHeart
                                                     style={{
@@ -592,13 +587,13 @@ const Header6 = (props) => {
                                                 />
                                             )}
                                         </i>
-                                        <div class={`${headerstyles.badge_counter_header_notifications} ${header_cssstyles.badge_counter_header_notifications}`}>
+                                        <div className={`${headerstyles.badge_counter_header_notifications} ${header_cssstyles.badge_counter_header_notifications}`}>
                                             <span> {favoriteprojectscountContext.length >= 10 ? '+9' : favoriteprojectscountContext.length}</span>
                                         </div>
                                     </span>
                                 </div>
                                 <div
-                                    class={
+                                    className={
                                         langdetect == 'en'
                                             ? ` ${headerstyles.header_cart} ${header_cssstyles.cart_btn}` + '  d-flex align-items-center justify-content-start cursor-pointer ml-3 pl-2 pr-2 '
                                             : ` ${headerstyles.header_cart} ${header_cssstyles.cart_btn}` + '  d-flex align-items-center justify-content-start cursor-pointer mr-3 pl-2 pr-2 '
@@ -608,9 +603,9 @@ const Header6 = (props) => {
                                     }}
                                     style={{ zIndex: 1000 }}
                                 >
-                                    <p class="m-0 p-0">{langdetect == 'en' ? 'Cart' : 'الحقيبه'}</p>
+                                    <p className="m-0 p-0">{langdetect == 'en' ? 'Cart' : 'الحقيبه'}</p>
                                     <div
-                                        class={langdetect == 'en' ? ` ${headerstyles.header_badge}` + ' ml-auto ' : ` ${headerstyles.header_badge}` + '  mr-auto '}
+                                        className={langdetect == 'en' ? ` ${headerstyles.header_badge}` + ' ml-auto ' : ` ${headerstyles.header_badge}` + '  mr-auto '}
                                         style={{
                                             color: sectionproperties.cartBtnbgColor,
                                         }}
@@ -619,7 +614,9 @@ const Header6 = (props) => {
                                     </div>
                                 </div>
                                 <div
-                                    class={langdetect == 'en' ? `${headerstyles.navbar_item}` + ' allcentered m-0 cursor-pointer ml-3 ' : `${headerstyles.navbar_item}` + ' m-0 cursor-pointer mr-3 '}
+                                    className={
+                                        langdetect == 'en' ? `${headerstyles.navbar_item}` + ' allcentered m-0 cursor-pointer ml-3 ' : `${headerstyles.navbar_item}` + ' m-0 cursor-pointer mr-3 '
+                                    }
                                     onClick={() => {
                                         if (langdetect == 'en') {
                                             setlang('ar');
@@ -629,29 +626,29 @@ const Header6 = (props) => {
                                     }}
                                 >
                                     {langdetect == 'en' && (
-                                        <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 allcentered '}>
+                                        <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 allcentered '}>
                                             <img src={egyptflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                            <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} class="ml-2 mr-2"></div>
-                                            <p class="m-0 p-0">ع</p>
+                                            <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} className="ml-2 mr-2"></div>
+                                            <p className="m-0 p-0">ع</p>
                                         </div>
                                     )}
                                     {langdetect == 'ar' && (
-                                        <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 allcentered '}>
+                                        <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 allcentered '}>
                                             <img src={usflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                            <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} class="ml-2 mr-2"></div>
-                                            <p class="m-0 p-0">En</p>
+                                            <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} className="ml-2 mr-2"></div>
+                                            <p className="m-0 p-0">En</p>
                                         </div>
                                     )}
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-12 p-0">
+                    <div className="col-lg-12 p-0">
                         {sectionproperties.showhidesubheader == 'Show' && (
                             <Subheader
                                 sectionpropertiesprops={sectionproperties}
                                 subheaderpropertiesprops={{
-                                    subheaderpositionprops: 'in nav',
+                                    subheaderpositionprops: 'Full Width',
                                     paddingLeftprops: '25px',
                                     paddingRightprops: '25px',
                                 }}
@@ -661,7 +658,7 @@ const Header6 = (props) => {
                     </div>
                 </div>
             </div>
-            <Headerresponsive actions={actions} sectionpropertiesprops={sectionproperties} />
+            <Headerresponsive sectionpropertiesprops={sectionproperties} actions={actions} />
         </div>
     );
 };