mayak-common-library 0.0.13 → 0.0.14

package/dist/index.js

@@ -60,23 +60,30 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AppBar: () => AppBar_default,
+  ArticleCard: () => ArticleCard_default,
   Avatar: () => Avatar_default,
   Badge: () => Badge_default,
   Button: () => Button_default,
+  CategoryCard: () => CategoryCard_default,
   Chip: () => Chip_default,
   FromToInput: () => FromToInput_default,
   Greet: () => Greet,
   IconButton: () => IconButton_default,
+  ImageContainer: () => ImageContainer_default,
   Input: () => Input_default,
+  JobCard: () => JobCard_default,
   MenuItem: () => MenuItem_default,
   PhoneInput: () => PhoneInput_default,
   Providers: () => Providers_default,
   Radio: () => Radio_default,
   RadioGroup: () => RadioGroup_default,
+  RealtorCard: () => RealtorCard_default,
+  RealtyCard: () => RealtyCard_default,
   Select: () => Select_default,
   SelectPro: () => SelectPro_default,
   Slider: () => Slider_default,
   Switch: () => Switch_default,
+  TeamPersonCard: () => TeamPersonCard_default,
   Text: () => Text_default
 });
 module.exports = __toCommonJS(src_exports);
@@ -160,7 +167,7 @@ var IconButton_default = IconButton;
 var import_react = require("react");
 var import_material3 = require("@mui/material");
 
-// src/assets/dropdown-arrow.svg
+// src/icons/dropdown-arrow.svg
 var dropdown_arrow_default = "./dropdown-arrow-CDZAF5GJ.svg";
 
 // src/components/Select/Select.tsx
@@ -248,14 +255,14 @@ var CustomSelect = (props) => {
 };
 var Select_default = CustomSelect;
 
-// src/assets/search.svg
+// src/icons/search.svg
 var search_default = "./search-HJGCO2DZ.svg";
 
 // src/components/Select/SelectPro.tsx
 var import_react2 = require("react");
 var import_material4 = require("@mui/material");
 
-// src/assets/close.svg
+// src/icons/close.svg
 var close_default = "./close-4XJDSDVO.svg";
 
 // src/components/Select/SelectPro.tsx
@@ -609,8 +616,46 @@ var import_ThemeProvider = __toESM(require("@mui/material/styles/ThemeProvider")
 var import_createTheme = __toESM(require("@mui/material/styles/createTheme"));
 var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"));
 var import_stylis = require("stylis");
+
+// src/styles/assets.ts
+var WINDOW_SIZE = {
+  xs: 0,
+  sm: 400,
+  md: 700,
+  lg: 1200,
+  xl: 1620
+};
+var _theme = {
+  typography: {
+    fontFamily: ["RockStar", "sans-serif"].join(","),
+    body1: {
+      fontSize: 14,
+      lineHeight: "22px"
+    }
+  },
+  breakpoints: {
+    values: {
+      xs: WINDOW_SIZE.xs,
+      sm: WINDOW_SIZE.sm,
+      md: WINDOW_SIZE.md,
+      lg: WINDOW_SIZE.lg,
+      xl: WINDOW_SIZE.xl
+    }
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          fontFamily: "RockStar, sans-serif"
+        }
+      }
+    }
+  }
+};
+
+// src/theme/index.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var theme = (0, import_createTheme.default)({});
+var theme = (0, import_createTheme.default)(__spreadValues({}, _theme));
 function ThemeRegistry(props) {
   const { children } = props;
   const [{ cache, flush }] = (0, import_react4.useState)(() => {
@@ -637,9 +682,7 @@ function ThemeRegistry(props) {
   });
   (0, import_navigation.useServerInsertedHTML)(() => {
     const names = flush();
-    if (names.length === 0) {
-      return null;
-    }
+    if (names.length === 0) return null;
     let styles = "";
     for (const name of names) {
       styles += cache.inserted[name];
@@ -661,6 +704,225 @@ function ThemeRegistry(props) {
   ] }) });
 }
 
+// src/styles/globals.scss
+var import_lit_element = require("lit-element/lit-element.js");
+var globals_default = import_lit_element.css`@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.button {
+  width: fit-content;
+  padding: 12px 30px;
+  text-transform: unset;
+  border-radius: 0;
+  min-width: 145px;
+  font-size: 14px;
+  line-height: 16px;
+  box-shadow: none;
+}
+.button_dark {
+  background-color: #343434;
+  color: #fff;
+}
+.button_dark:hover {
+  background-color: #343434;
+}
+
+.border-gray {
+  border-color: #757575;
+}
+
+.border-dark {
+  border-color: #343434;
+}
+
+.border-gold {
+  border-color: #C8BCA1;
+}
+
+.border-gold2 {
+  border-color: #99835F;
+}
+
+.text-100 {
+  font-size: 100px;
+  line-height: 110px;
+}
+
+.text-40 {
+  font-size: 40px;
+  line-height: 48px;
+}
+
+.text-34 {
+  font-size: 34px;
+  line-height: 38px;
+}
+
+.text-10 {
+  font-size: 10px;
+  line-height: 12px;
+}
+
+.text-12 {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.text-16 {
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.text-18 {
+  font-size: 18px;
+  line-height: 19px;
+}
+
+.text-light {
+  color: #fff;
+}
+
+.text-dark {
+  color: #343434;
+}
+
+.text-gold {
+  color: #C8BCA1;
+}
+
+.text-gray {
+  color: #757575;
+}
+
+.text-gray-light {
+  color: #F5F5F5;
+}
+
+.bg-gray-light {
+  background-color: #F5F5F5;
+}
+
+.bg-gray-medium {
+  background-color: #D0CED2;
+}
+
+.bg-gray {
+  background-color: #757575;
+}
+
+.bg-dark {
+  background-color: #343434;
+}
+
+.bg-light {
+  background-color: #fff;
+}
+
+.bg-gold {
+  background-color: #C8BCA1;
+}
+
+.customImage {
+  position: relative;
+}
+.customImage img {
+  object-position: center;
+  object-fit: cover;
+}
+
+@layer components {
+  .white-block-snack {
+    @apply bg-white px-[10px] py-[2px] w-fit font-extrabold text-12;
+  }
+  .black-block-snack {
+    @apply bg-dark py-[6px] px-[16px] w-fit text-white font-extrabold text-12;
+  }
+  .gray-block-snack {
+    @apply bg-gray-light px-[10px] w-fit;
+  }
+  .border-block-snack {
+    @apply px-[10px] py-[2px] text-12 border-[1px] border-dark w-fit;
+  }
+  .border-gold-block-snack {
+    @apply w-fit px-[10px] py-[2px] text-gray border-[1px] border-gold font-extrabold text-12 group-hover/card:text-white group-hover/card:bg-gold;
+  }
+}
+@layer components {
+  .nav-item.active {
+    @apply text-accent-beige;
+  }
+  .nav-item {
+    @apply p-2 text-accent-dark;
+    text-decoration: none;
+    cursor: pointer;
+    font-weight: 800;
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+  .nav-indicator {
+    @apply absolute top-0 rounded-full bg-accent-beige;
+    width: 7px;
+    height: 7px;
+    transition: transform 0.3s ease-out;
+  }
+}
+@font-face {
+  font-family: RockStar;
+  src: url("fonts/RockStar/Rock Star_Regular_Web.woff2");
+  font-weight: 400;
+}
+@font-face {
+  font-family: RockStar;
+  src: url("fonts/RockStar/Rock Star_Extra Bold_Web.woff2");
+  font-weight: 800;
+}
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  color: #343434;
+  background-color: #F5F5F5;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  font-family: RockStar, sans-serif;
+}
+
+main {
+  flex-grow: 1;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+*:focus-visible {
+  outline: none;
+}
+
+@media screen and (min-width: 1200px) {
+  .MuiContainer-root {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .MuiContainer-root {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+@media screen and (max-width: 700px) {
+  .MuiContainer-root {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}`;
+
 // src/providers/Providers.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Providers = ({ children }) => {
@@ -698,8 +960,8 @@ var AppBar = ({ links }) => {
         ref: (el) => {
           navItemsRef.current[index] = el;
         },
-        href: link.href,
-        className: `nav-item ${index === activeIndex ? "active" : ""}`,
+        href: link.path,
+        className: `nav-item ${index === activeIndex ? "active" : ""} hover:text-accent-beige`,
         onClick: () => handleClick(index),
         children: link.title
       },
@@ -708,25 +970,224 @@ var AppBar = ({ links }) => {
   ] });
 };
 var AppBar_default = AppBar;
+
+// src/components/Image/ImageContainer.tsx
+var import_material13 = require("@mui/material");
+var import_image = __toESM(require("next/image"));
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ImageContainer = (props) => {
+  const {
+    src,
+    alt,
+    width = "w-full",
+    height = "h-full",
+    contentful = true,
+    priority = false,
+    loading = "lazy",
+    objectFit = "object-cover"
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material13.Box, { className: `relative ${width} ${height}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_image.default,
+    {
+      className: `${objectFit} object-center`,
+      src: contentful ? `https:${src}` : src,
+      alt,
+      fill: true,
+      loading,
+      sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+      priority
+    }
+  ) });
+};
+var ImageContainer_default = ImageContainer;
+
+// src/components/Card/CategoryCard.tsx
+var import_material14 = require("@mui/material");
+var import_link2 = __toESM(require("next/link"));
+
+// src/lib/assets.ts
+var NO_IMAGE = "/images/no-photo.svg";
+
+// src/components/Card/CategoryCard.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var CategoryCard = (props) => {
+  const { link, text, title, image_url = NO_IMAGE } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_link2.default, { href: link, className: "group/card", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material14.Box, { className: "flex flex-col gap-[20px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ImageContainer_default, { src: image_url, alt: title, height: "h-[300px]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material14.Box, { className: "flex flex-col px-[16px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_material14.Typography,
+        {
+          component: "span",
+          className: "font-extrabold text-16 group-hover/card:text-gold2",
+          children: title
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material14.Typography, { component: "span", className: "group-hover/card:text-gold2", children: text })
+    ] })
+  ] }) });
+};
+var CategoryCard_default = CategoryCard;
+
+// src/components/Card/ArticleCard.tsx
+var import_link3 = __toESM(require("next/link"));
+var import_material15 = require("@mui/material");
+var import_Typography5 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ArticleCard = (props) => {
+  const { image_src = NO_IMAGE } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_link3.default, { href: "/", className: "group/card bg-gray-light", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      ImageContainer_default,
+      {
+        src: image_src,
+        alt: "test",
+        contentful: false,
+        height: "h-[220px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_material15.Box, { className: "pt-[24px] pl-[16px] pr-[50px] pb-[10px] flex flex-col gap-[6px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_Typography5.default,
+        {
+          component: "span",
+          className: "text-16 font-extrabold group-hover/card:text-gold2",
+          children: "\u041E\u0441\u043E\u0431\u043B\u0438\u0432\u043E\u0441\u0442\u0456 \u043A\u0443\u043F\u0456\u0432\u043B\u0456 \u0433\u043E\u0442\u0435\u043B\u044E"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_Typography5.default,
+        {
+          component: "span",
+          className: "text-gray group-hover/card:text-gold2",
+          children: "We have built a strong network in Dubai since 2009, which allows us to source the best deal for"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_Typography5.default, { component: "span", className: "border-gold-block-snack", children: "\u0422\u0435\u0433-\u043D\u0430\u0437\u0432\u0430" })
+    ] })
+  ] });
+};
+var ArticleCard_default = ArticleCard;
+
+// src/components/Card/JobCard.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var JobCard = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
+};
+var JobCard_default = JobCard;
+
+// src/components/Card/RealtorCard.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var RealtorCard = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {});
+};
+var RealtorCard_default = RealtorCard;
+
+// src/components/Card/RealtyCard.tsx
+var import_material16 = require("@mui/material");
+var import_link4 = __toESM(require("next/link"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var RealtyCard = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_link4.default, { href: "/", className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { className: "absolute left-[16px] top-[16px] flex flex-col gap-[9px] z-[1]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "white", label: "id: 00154" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "white", label: "\u0416\u041A: \u0421\u0443\u0447\u0430\u0441\u043D\u0438\u0439 \u043A\u0432\u0430\u0440\u0442\u0430\u043B4" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      ImageContainer_default,
+      {
+        src: "/images/test.png",
+        alt: "test",
+        height: "h-[260px]",
+        contentful: false
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { className: "bg-white py-[20px] px-[16px] flex flex-col gap-[6px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "black", label: "120 000 \u20B4/\u043C\u0456\u0441\u044F\u0446\u044C" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { component: "span", className: "font-extrabold", children: "\u0432\u0443\u043B. \u0414\u0440\u0430\u0433\u043E\u043C\u0438\u0440\u043E\u0432\u0430 25" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { component: "span", className: "text-12", children: "\u041F\u0435\u0447\u0435\u0440\u0441\u044C\u043A\u0438\u0439 \u0440-\u043D" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        Chip_default,
+        {
+          view: "silver",
+          label: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Stack, { direction: "row", spacing: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { children: "\u043C\u0435\u0442\u0440\u043E:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { className: "font-extrabold", children: "\u041B\u0438\u0431\u0456\u0434\u0441\u044C\u043A\u0430" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { className: "flex flex-wrap gap-[6px] mt-[6px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "line", label: "2 \u043A\u0456\u043C\u043D" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "line", label: "60 \u043C\xB2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "line", label: "\u043F\u043E\u0432\u0435\u0440\u0445: 3/24" })
+      ] })
+    ] })
+  ] });
+};
+var RealtyCard_default = RealtyCard;
+
+// src/components/Card/TeamPersonCard.tsx
+var import_material17 = require("@mui/material");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var TeamPersonCard = (props) => {
+  const { image_url = NO_IMAGE, name, position, text } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_material17.Box, { className: "group/card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_material17.Box, { className: "relative h-[300px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Box, { className: "w-full h-full bg-gray-medium group-hover/card:brightness-[50%]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        ImageContainer_default,
+        {
+          contentful: false,
+          src: image_url,
+          alt: name,
+          objectFit: "object-contain"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_material17.Box, { className: "hidden absolute top-[110px] left-[30px] right-[30px] group-hover/card:flex flex-col text-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { component: "span", className: "text-16 font-extrabold", children: position }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { component: "span", className: "mt-[4px]", children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_material17.Typography,
+          {
+            component: "span",
+            className: "mt-[11px] text-12 !leading-[16px]",
+            children: text
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_material17.Box, { className: "mt-[20px] text-center mx-auto flex flex-col w-10/12", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { component: "span", className: "text-16 font-extrabold", children: position }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { component: "span", className: "text-gray", children: name })
+    ] })
+  ] });
+};
+var TeamPersonCard_default = TeamPersonCard;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppBar,
+  ArticleCard,
   Avatar,
   Badge,
   Button,
+  CategoryCard,
   Chip,
   FromToInput,
   Greet,
   IconButton,
+  ImageContainer,
   Input,
+  JobCard,
   MenuItem,
   PhoneInput,
   Providers,
   Radio,
   RadioGroup,
+  RealtorCard,
+  RealtyCard,
   Select,
   SelectPro,
   Slider,
   Switch,
+  TeamPersonCard,
   Text
 });