mayak-common-library 0.0.13 → 0.0.14

package/dist/index.mjs

@@ -109,7 +109,7 @@ var IconButton_default = IconButton;
 import { useRef, useState, useEffect } from "react";
 import { Select, styled as styled3 } from "@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
@@ -197,7 +197,7 @@ 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
@@ -214,7 +214,7 @@ import {
   Button as Button2
 } from "@mui/material";
 
-// src/assets/close.svg
+// src/icons/close.svg
 var close_default = "./close-4XJDSDVO.svg";
 
 // src/components/Select/SelectPro.tsx
@@ -568,8 +568,46 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import createTheme from "@mui/material/styles/createTheme";
 import CssBaseline from "@mui/material/CssBaseline";
 import { prefixer } from "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
 import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var theme = createTheme({});
+var theme = createTheme(__spreadValues({}, _theme));
 function ThemeRegistry(props) {
   const { children } = props;
   const [{ cache, flush }] = useState3(() => {
@@ -596,9 +634,7 @@ function ThemeRegistry(props) {
   });
   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];
@@ -620,6 +656,225 @@ function ThemeRegistry(props) {
   ] }) });
 }
 
+// src/styles/globals.scss
+import { css } from "lit-element/lit-element.js";
+var globals_default = 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
 import { jsx as jsx18 } from "react/jsx-runtime";
 var Providers = ({ children }) => {
@@ -657,8 +912,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
       },
@@ -667,24 +922,223 @@ var AppBar = ({ links }) => {
   ] });
 };
 var AppBar_default = AppBar;
+
+// src/components/Image/ImageContainer.tsx
+import { Box as Box3 } from "@mui/material";
+import Image from "next/image";
+import { jsx as jsx20 } from "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__ */ jsx20(Box3, { className: `relative ${width} ${height}`, children: /* @__PURE__ */ jsx20(
+    Image,
+    {
+      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
+import { Box as Box4, Typography as Typography6 } from "@mui/material";
+import Link2 from "next/link";
+
+// src/lib/assets.ts
+var NO_IMAGE = "/images/no-photo.svg";
+
+// src/components/Card/CategoryCard.tsx
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+var CategoryCard = (props) => {
+  const { link, text, title, image_url = NO_IMAGE } = props;
+  return /* @__PURE__ */ jsx21(Link2, { href: link, className: "group/card", children: /* @__PURE__ */ jsxs7(Box4, { className: "flex flex-col gap-[20px]", children: [
+    /* @__PURE__ */ jsx21(ImageContainer_default, { src: image_url, alt: title, height: "h-[300px]" }),
+    /* @__PURE__ */ jsxs7(Box4, { className: "flex flex-col px-[16px]", children: [
+      /* @__PURE__ */ jsx21(
+        Typography6,
+        {
+          component: "span",
+          className: "font-extrabold text-16 group-hover/card:text-gold2",
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsx21(Typography6, { component: "span", className: "group-hover/card:text-gold2", children: text })
+    ] })
+  ] }) });
+};
+var CategoryCard_default = CategoryCard;
+
+// src/components/Card/ArticleCard.tsx
+import Link3 from "next/link";
+import { Box as Box5 } from "@mui/material";
+import Typography7 from "@mui/material/Typography";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+var ArticleCard = (props) => {
+  const { image_src = NO_IMAGE } = props;
+  return /* @__PURE__ */ jsxs8(Link3, { href: "/", className: "group/card bg-gray-light", children: [
+    /* @__PURE__ */ jsx22(
+      ImageContainer_default,
+      {
+        src: image_src,
+        alt: "test",
+        contentful: false,
+        height: "h-[220px]"
+      }
+    ),
+    /* @__PURE__ */ jsxs8(Box5, { className: "pt-[24px] pl-[16px] pr-[50px] pb-[10px] flex flex-col gap-[6px]", children: [
+      /* @__PURE__ */ jsx22(
+        Typography7,
+        {
+          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__ */ jsx22(
+        Typography7,
+        {
+          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__ */ jsx22(Typography7, { 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
+import { Fragment, jsx as jsx23 } from "react/jsx-runtime";
+var JobCard = () => {
+  return /* @__PURE__ */ jsx23(Fragment, {});
+};
+var JobCard_default = JobCard;
+
+// src/components/Card/RealtorCard.tsx
+import { Fragment as Fragment2, jsx as jsx24 } from "react/jsx-runtime";
+var RealtorCard = () => {
+  return /* @__PURE__ */ jsx24(Fragment2, {});
+};
+var RealtorCard_default = RealtorCard;
+
+// src/components/Card/RealtyCard.tsx
+import { Box as Box6, Stack as Stack4, Typography as Typography8 } from "@mui/material";
+import Link4 from "next/link";
+import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
+var RealtyCard = () => {
+  return /* @__PURE__ */ jsxs9(Link4, { href: "/", className: "relative", children: [
+    /* @__PURE__ */ jsxs9(Box6, { className: "absolute left-[16px] top-[16px] flex flex-col gap-[9px] z-[1]", children: [
+      /* @__PURE__ */ jsx25(Chip_default, { view: "white", label: "id: 00154" }),
+      /* @__PURE__ */ jsx25(Chip_default, { view: "white", label: "\u0416\u041A: \u0421\u0443\u0447\u0430\u0441\u043D\u0438\u0439 \u043A\u0432\u0430\u0440\u0442\u0430\u043B4" })
+    ] }),
+    /* @__PURE__ */ jsx25(
+      ImageContainer_default,
+      {
+        src: "/images/test.png",
+        alt: "test",
+        height: "h-[260px]",
+        contentful: false
+      }
+    ),
+    /* @__PURE__ */ jsxs9(Box6, { className: "bg-white py-[20px] px-[16px] flex flex-col gap-[6px]", children: [
+      /* @__PURE__ */ jsx25(Chip_default, { view: "black", label: "120 000 \u20B4/\u043C\u0456\u0441\u044F\u0446\u044C" }),
+      /* @__PURE__ */ jsx25(Typography8, { component: "span", className: "font-extrabold", children: "\u0432\u0443\u043B. \u0414\u0440\u0430\u0433\u043E\u043C\u0438\u0440\u043E\u0432\u0430 25" }),
+      /* @__PURE__ */ jsx25(Typography8, { component: "span", className: "text-12", children: "\u041F\u0435\u0447\u0435\u0440\u0441\u044C\u043A\u0438\u0439 \u0440-\u043D" }),
+      /* @__PURE__ */ jsx25(
+        Chip_default,
+        {
+          view: "silver",
+          label: /* @__PURE__ */ jsxs9(Stack4, { direction: "row", spacing: 1, children: [
+            /* @__PURE__ */ jsx25(Typography8, { children: "\u043C\u0435\u0442\u0440\u043E:" }),
+            /* @__PURE__ */ jsx25(Typography8, { className: "font-extrabold", children: "\u041B\u0438\u0431\u0456\u0434\u0441\u044C\u043A\u0430" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs9(Box6, { className: "flex flex-wrap gap-[6px] mt-[6px]", children: [
+        /* @__PURE__ */ jsx25(Chip_default, { view: "line", label: "2 \u043A\u0456\u043C\u043D" }),
+        /* @__PURE__ */ jsx25(Chip_default, { view: "line", label: "60 \u043C\xB2" }),
+        /* @__PURE__ */ jsx25(Chip_default, { view: "line", label: "\u043F\u043E\u0432\u0435\u0440\u0445: 3/24" })
+      ] })
+    ] })
+  ] });
+};
+var RealtyCard_default = RealtyCard;
+
+// src/components/Card/TeamPersonCard.tsx
+import { Box as Box7, Typography as Typography9 } from "@mui/material";
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var TeamPersonCard = (props) => {
+  const { image_url = NO_IMAGE, name, position, text } = props;
+  return /* @__PURE__ */ jsxs10(Box7, { className: "group/card", children: [
+    /* @__PURE__ */ jsxs10(Box7, { className: "relative h-[300px]", children: [
+      /* @__PURE__ */ jsx26(Box7, { className: "w-full h-full bg-gray-medium group-hover/card:brightness-[50%]", children: /* @__PURE__ */ jsx26(
+        ImageContainer_default,
+        {
+          contentful: false,
+          src: image_url,
+          alt: name,
+          objectFit: "object-contain"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs10(Box7, { className: "hidden absolute top-[110px] left-[30px] right-[30px] group-hover/card:flex flex-col text-white", children: [
+        /* @__PURE__ */ jsx26(Typography9, { component: "span", className: "text-16 font-extrabold", children: position }),
+        /* @__PURE__ */ jsx26(Typography9, { component: "span", className: "mt-[4px]", children: name }),
+        /* @__PURE__ */ jsx26(
+          Typography9,
+          {
+            component: "span",
+            className: "mt-[11px] text-12 !leading-[16px]",
+            children: text
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs10(Box7, { className: "mt-[20px] text-center mx-auto flex flex-col w-10/12", children: [
+      /* @__PURE__ */ jsx26(Typography9, { component: "span", className: "text-16 font-extrabold", children: position }),
+      /* @__PURE__ */ jsx26(Typography9, { component: "span", className: "text-gray", children: name })
+    ] })
+  ] });
+};
+var TeamPersonCard_default = TeamPersonCard;
 export {
   AppBar_default as AppBar,
+  ArticleCard_default as ArticleCard,
   Avatar_default as Avatar,
   Badge_default as Badge,
   Button_default as Button,
+  CategoryCard_default as CategoryCard,
   Chip_default as Chip,
   FromToInput_default as FromToInput,
   Greet,
   IconButton_default as IconButton,
+  ImageContainer_default as ImageContainer,
   Input_default as Input,
+  JobCard_default as JobCard,
   MenuItem_default as MenuItem,
   PhoneInput_default as PhoneInput,
   Providers_default as Providers,
   Radio_default as Radio,
   RadioGroup_default as RadioGroup,
+  RealtorCard_default as RealtorCard,
+  RealtyCard_default as RealtyCard,
   Select_default as Select,
   SelectPro_default as SelectPro,
   Slider_default as Slider,
   Switch_default as Switch,
+  TeamPersonCard_default as TeamPersonCard,
   Text_default as Text
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayak-common-library",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,6 +21,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.52.0",
     "react-number-format": "^5.4.0",
+    "sass": "^1.77.7",
     "stylis": "^4.3.2",
     "tailwindcss": "^3.4.4"
   },
@@ -31,6 +32,7 @@
     "@types/react-dom": "^18",
     "@types/stylis": "^4.2.6",
     "autoprefixer": "^10.4.19",
+    "esbuild-sass-plugin": "^3.3.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "install": "^0.13.0",

package/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
@@ -20,6 +21,8 @@ module.exports = {
         "accent-beige": "#C8BCA1",
         "accent-silver": "#F5F5F5",
         "accent-silver-2": "#939393",
+        gold2: "#99835F",
+        gold: "#C8BCA1",
         primary: {
           light: "#EAEDF6",
           main: "#3041C7",
@@ -30,5 +33,10 @@ module.exports = {
       },
     },
   },
+  variants: {
+    extend: {
+      textColor: ["group-hover"],
+    },
+  },
   plugins: [],
 };