datastake-daf 0.6.595 → 0.6.597

package/src/@daf/layouts/AuthLayout/components/Navbar/style.js

@@ -0,0 +1,305 @@
+import styled, { createGlobalStyle } from "styled-components";
+import { MOBILE_WIDTH, TABLET_WIDTH } from "datastake-daf/src/constants/Style";
+
+// Global styles for portaled elements (dropdowns, modals, etc.)
+export const GlobalNavbarStyles = createGlobalStyle`
+  .language-select-popup {
+    .ant-select-dropdown {
+      padding: 4px;
+      background: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+                  0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+      border: none !important;
+    }
+
+    .ant-select-item {
+      border-radius: 6px;
+      padding: 8px 12px;
+      min-height: 40px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: #265a80;
+
+        .language-option span {
+          color: #ffffff;
+        }
+      }
+
+      &.ant-select-item-option-selected {
+        background-color: #265a80;
+        color: #ffffff;
+
+        .language-option span {
+          color: #ffffff;
+        }
+      }
+
+      .language-option {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .flag-icon {
+          width: 20px;
+          height: 14px;
+          border-radius: 2px;
+        }
+
+        span {
+          font-size: 14px;
+          font-weight: 500;
+          color: #344054;
+        }
+      }
+    }
+  }
+`;
+
+const style = styled.div`
+  font-family: Outfit;
+
+  .btns {
+    display: flex;
+    gap: 12px;
+  }
+
+  .d-container {
+    width: 80vw;
+    margin-left: auto;
+    margin-right: auto;
+
+    @media (max-width: 1440px) {
+      width: 85vw;
+    }
+
+    @media (${TABLET_WIDTH}) {
+      width: calc(100vw - 4.6rem);
+    }
+  }
+
+  .flex-c {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .jus-c {
+    justify-content: center;
+  }
+
+  .d-navbar {
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: white;
+    z-index: 1000;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+
+    @media (${TABLET_WIDTH}) {
+      height: 72px;
+    }
+
+    @media (${MOBILE_WIDTH}) {
+      height: 64px;
+    }
+
+    .main-cont {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+      padding: 0 80px;
+
+      @media (max-width: 1200px) {
+        padding: 0 32px;
+      }
+
+      @media (${TABLET_WIDTH}) {
+        padding: 0 24px;
+      }
+
+      @media (${MOBILE_WIDTH}) {
+        padding: 0 16px;
+      }
+
+      .left {
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        .navbar-logo {
+          cursor: pointer;
+          height: 40px;
+          width: auto;
+          object-fit: contain;
+
+          @media (${MOBILE_WIDTH}) {
+            height: 32px;
+          }
+        }
+
+        img {
+          cursor: pointer;
+          height: 40px;
+          width: auto;
+          object-fit: contain;
+
+          @media (${MOBILE_WIDTH}) {
+            height: 32px;
+          }
+        }
+      }
+
+      .right {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+
+        .language-select {
+          min-width: 100px;
+
+          .ant-select-selector {
+            padding: 8px 12px !important;
+            height: auto !important;
+            border: none !important;
+
+            .ant-select-selection-item {
+              padding: 0 !important;
+              line-height: none !important;
+              &:hover{
+                background-color: transparent !important;
+              border: none !important;
+              }
+            }
+          }
+
+          .ant-select-arrow {
+            color: #667085;
+            display: flex;
+            align-items: center;
+            height: 80%;
+          }
+        }
+
+        .language-option {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .flag-icon {
+            width: 20px;
+            height: 15px;
+            object-fit: cover;
+            border-radius: 2px;
+          }
+
+          span {
+            font-size: 14px;
+            font-weight: 500;
+            color: #344054;
+          }
+        }
+
+        .back-btn {
+          background: transparent;
+          border: 1px solid #D0D5DD;
+          border-radius: 8px;
+          padding: 8px 16px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #344054;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+
+          &:hover {
+            background: #F9FAFB;
+            border-color: #98A2B3;
+          }
+
+          &:active {
+            transform: scale(0.98);
+          }
+        }
+
+        .ant-btn {
+          font-size: 14px;
+          padding: 6px 0;
+          text-align: center;
+          width: 70px;
+
+          @media (${MOBILE_WIDTH}) {
+            padding: 3px 0;
+          }
+        }
+
+        @media (max-width: 1070px) {
+          gap: 1rem;
+        }
+      }
+    }
+  }
+
+  &.bordered {
+    .d-navbar {
+      position: relative;
+      box-shadow: unset;
+      border-bottom: 1px solid var(--base-gray-40);
+    }
+  }
+
+  .tazama-extra {
+    &.mobile {
+      display: none;
+    }
+
+    @media (${MOBILE_WIDTH}) {
+      &.mobile {
+        display: flex;
+      }
+
+      &.desktop {
+        display: none;
+      }
+    }
+
+    .ant-btn {
+      width: 90px !important;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      &.w-100 {
+        width: 100% !important;
+      }
+
+      span {
+        margin: 0 auto;
+      }
+    }
+
+    .nav-extra {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100dvh;
+      width: 100%;
+      background: white;
+      margin-left: -100%;
+      transition: 0.4s margin-left;
+
+      &.toggled {
+        margin-left: 0;
+      }
+    }
+  }
+`;
+
+export default style;

package/src/@daf/layouts/AuthLayout/index.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import AuthNavbar from "./components/Navbar/index.jsx";
+import { formatClassname } from "../../../helpers/ClassesHelper.js";
+import Style from './style';
+
+const AuthLayout = ({
+  children,
+  StyleComponent,
+  t = (key) => key,
+  title = "Welcome Back",
+  subTitle = "Please introduce yourself",
+  logo,
+  appName = "default",
+  containerClassName = "",
+  leftClassName = "",
+  rightClassName = "",
+  rightImgClassName = "",
+  rightImageUrl,
+  additionalContent,
+  showTopHeader = true,
+  showLanguageSelector = true,
+  updateLanguage,
+  showBack = false,
+  onBack,
+  backLabel = "Back",
+}) => {
+  const Wrapper = StyleComponent || "div";
+  const wrapperClassName = formatClassname([
+    "auth-layout",
+    appName,
+    containerClassName,
+  ]);
+
+  return (
+
+  
+    <>
+      {showTopHeader && (
+        <AuthNavbar
+          logo={logo}
+          appName={appName}
+          showLanguageSelector={showLanguageSelector}
+          updateLanguage={updateLanguage}
+          showBack={showBack}
+          onBack={onBack}
+          backLabel={backLabel}
+        />
+      )}
+<Style>
+      <div className="main-cont">
+        <div className={formatClassname(["d-cont left", leftClassName])}>
+          <div className="main">
+            {logo && (
+              <div className="left-logo">
+                <img src={logo} alt={`${appName} logo`} />
+              </div>
+            )}
+            <div className="left-header">
+              {title && <h2>{t(title)}</h2>}
+              {subTitle && (
+                <p>{typeof subTitle === "string" ? t(subTitle) : subTitle}</p>
+              )}
+            </div>
+            {children}
+            {additionalContent}
+          </div>
+        </div>
+
+        <div
+          className={formatClassname(["d-cont right", rightClassName])}
+          style={
+            rightImageUrl
+              ? { backgroundImage: `url(${rightImageUrl})`, backgroundSize: "cover" }
+              : {}
+          }
+        >
+          <div className={formatClassname(["right-img", rightImgClassName])} />
+        </div>
+      </div>
+      </Style>
+    </>
+  );
+};
+
+export default AuthLayout;