mayak-common-library 0.0.105 → 0.0.106

package/dist/index.d.mts

@@ -258,4 +258,12 @@ interface CustomCheckboxProps {
 }
 declare const CustomCheckbox: FC<CustomCheckboxProps>;
 
-export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BigNumber, Button, CategoryCard, CustomCheckbox as Checkbox, Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, SearchInput, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock, ToggleButton, ToggleButtonGroup, ToggleButtonsWithLabel };
+interface IBannerBlock {
+    videoLink?: string;
+    bigText?: string;
+    smallText?: string;
+    classes?: string;
+}
+declare function BannerBlock({ bigText, smallText, classes, videoLink, }: IBannerBlock): react_jsx_runtime.JSX.Element;
+
+export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BannerBlock, BigNumber, Button, CategoryCard, CustomCheckbox as Checkbox, Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, SearchInput, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock, ToggleButton, ToggleButtonGroup, ToggleButtonsWithLabel };

package/dist/index.d.ts

@@ -258,4 +258,12 @@ interface CustomCheckboxProps {
 }
 declare const CustomCheckbox: FC<CustomCheckboxProps>;
 
-export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BigNumber, Button, CategoryCard, CustomCheckbox as Checkbox, Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, SearchInput, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock, ToggleButton, ToggleButtonGroup, ToggleButtonsWithLabel };
+interface IBannerBlock {
+    videoLink?: string;
+    bigText?: string;
+    smallText?: string;
+    classes?: string;
+}
+declare function BannerBlock({ bigText, smallText, classes, videoLink, }: IBannerBlock): react_jsx_runtime.JSX.Element;
+
+export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BannerBlock, BigNumber, Button, CategoryCard, CustomCheckbox as Checkbox, Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, SearchInput, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock, ToggleButton, ToggleButtonGroup, ToggleButtonsWithLabel };

package/dist/index.js

@@ -64,6 +64,7 @@ __export(src_exports, {
   Autocomplete: () => Autocomplete_default,
   Avatar: () => Avatar_default,
   Badge: () => Badge_default,
+  BannerBlock: () => BannerBlock,
   BigNumber: () => BigNumber_default,
   Button: () => Button_default,
   CategoryCard: () => CategoryCard_default,
@@ -1454,6 +1455,91 @@ var CustomCheckbox = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_Checkbox.default, __spreadValues({}, checkboxProps));
 };
 var Checkbox_default = CustomCheckbox;
+
+// src/c/blocks/BannerBlock.tsx
+var import_material32 = require("@mui/material");
+
+// src/lib/hooks/useWindowsSize.ts
+var import_react8 = require("react");
+function useWindowSize() {
+  const [windowSize, setWindowSize] = (0, import_react8.useState)(0);
+  const [loading, setLoading] = (0, import_react8.useState)(true);
+  const handleResize = (0, import_react8.useCallback)(() => {
+    setWindowSize(window.innerWidth);
+    setLoading(false);
+  }, []);
+  const xl = windowSize < WINDOW_SIZE.xl;
+  const lg = windowSize < WINDOW_SIZE.lg;
+  const md = windowSize < WINDOW_SIZE.md;
+  const sm = windowSize < WINDOW_SIZE.sm;
+  const xs = windowSize < WINDOW_SIZE.xs;
+  (0, import_react8.useEffect)(() => {
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleResize);
+      handleResize();
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, [handleResize]);
+  return {
+    windowSize,
+    xs,
+    md,
+    lg,
+    xl,
+    sm,
+    loading
+  };
+}
+
+// src/c/blocks/BannerBlock.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function BannerBlock({
+  bigText,
+  smallText,
+  classes,
+  videoLink
+}) {
+  const { sm, loading: loadingWindowSize } = useWindowSize();
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material32.Box, { className: `h-screen relative${classes ? " " + classes : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_material32.Box,
+      {
+        sx: {
+          background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))`
+        },
+        className: `absolute h-full w-full bg-cover z-[5]`
+      }
+    ),
+    !loadingWindowSize && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "video",
+      {
+        autoPlay: !sm,
+        muted: true,
+        loop: true,
+        className: "absolute w-full h-full object-cover",
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("source", { src: videoLink, type: "video/mp4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_material32.Container,
+      {
+        className: "pt-[282px] pb-[96px] flex flex-col gap-11 relative z-[10] h-full justify-center md:pt-[215px] md:pb-[54px] md:gap-[20px] sm:pt-[115px] sm:pb-[30px]",
+        maxWidth: CONTAINER_WIDTH,
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material32.Box, { className: "flex flex-col gap-2.5 text-light md:gap-[6px] w-1/2 md:w-2/3 sm:gap-[4px] sm:!w-full", children: [
+          bigText && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_material32.Typography,
+            {
+              className: "uppercase text-40 font-extrabold md:text-26 sm:text-22",
+              component: "h1",
+              children: bigText
+            }
+          ),
+          smallText && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material32.Typography, { className: "text-base md:text-14", component: "span", children: smallText })
+        ] })
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppBar,
@@ -1461,6 +1547,7 @@ var Checkbox_default = CustomCheckbox;
   Autocomplete,
   Avatar,
   Badge,
+  BannerBlock,
   BigNumber,
   Button,
   CategoryCard,

package/dist/index.mjs

@@ -1409,12 +1409,98 @@ var CustomCheckbox = (props) => {
   return /* @__PURE__ */ jsx47(Checkbox, __spreadValues({}, checkboxProps));
 };
 var Checkbox_default = CustomCheckbox;
+
+// src/c/blocks/BannerBlock.tsx
+import { Box as Box14, Container as Container4, Typography as Typography19 } from "@mui/material";
+
+// src/lib/hooks/useWindowsSize.ts
+import { useCallback, useEffect as useEffect3, useState as useState6 } from "react";
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState6(0);
+  const [loading, setLoading] = useState6(true);
+  const handleResize = useCallback(() => {
+    setWindowSize(window.innerWidth);
+    setLoading(false);
+  }, []);
+  const xl = windowSize < WINDOW_SIZE.xl;
+  const lg = windowSize < WINDOW_SIZE.lg;
+  const md = windowSize < WINDOW_SIZE.md;
+  const sm = windowSize < WINDOW_SIZE.sm;
+  const xs = windowSize < WINDOW_SIZE.xs;
+  useEffect3(() => {
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleResize);
+      handleResize();
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, [handleResize]);
+  return {
+    windowSize,
+    xs,
+    md,
+    lg,
+    xl,
+    sm,
+    loading
+  };
+}
+
+// src/c/blocks/BannerBlock.tsx
+import { jsx as jsx48, jsxs as jsxs19 } from "react/jsx-runtime";
+function BannerBlock({
+  bigText,
+  smallText,
+  classes,
+  videoLink
+}) {
+  const { sm, loading: loadingWindowSize } = useWindowSize();
+  return /* @__PURE__ */ jsxs19(Box14, { className: `h-screen relative${classes ? " " + classes : ""}`, children: [
+    /* @__PURE__ */ jsx48(
+      Box14,
+      {
+        sx: {
+          background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))`
+        },
+        className: `absolute h-full w-full bg-cover z-[5]`
+      }
+    ),
+    !loadingWindowSize && /* @__PURE__ */ jsx48(
+      "video",
+      {
+        autoPlay: !sm,
+        muted: true,
+        loop: true,
+        className: "absolute w-full h-full object-cover",
+        children: /* @__PURE__ */ jsx48("source", { src: videoLink, type: "video/mp4" })
+      }
+    ),
+    /* @__PURE__ */ jsx48(
+      Container4,
+      {
+        className: "pt-[282px] pb-[96px] flex flex-col gap-11 relative z-[10] h-full justify-center md:pt-[215px] md:pb-[54px] md:gap-[20px] sm:pt-[115px] sm:pb-[30px]",
+        maxWidth: CONTAINER_WIDTH,
+        children: /* @__PURE__ */ jsxs19(Box14, { className: "flex flex-col gap-2.5 text-light md:gap-[6px] w-1/2 md:w-2/3 sm:gap-[4px] sm:!w-full", children: [
+          bigText && /* @__PURE__ */ jsx48(
+            Typography19,
+            {
+              className: "uppercase text-40 font-extrabold md:text-26 sm:text-22",
+              component: "h1",
+              children: bigText
+            }
+          ),
+          smallText && /* @__PURE__ */ jsx48(Typography19, { className: "text-base md:text-14", component: "span", children: smallText })
+        ] })
+      }
+    )
+  ] });
+}
 export {
   AppBar_default as AppBar,
   ArticleCard_default as ArticleCard,
   Autocomplete_default as Autocomplete,
   Avatar_default as Avatar,
   Badge_default as Badge,
+  BannerBlock,
   BigNumber_default as BigNumber,
   Button_default as Button,
   CategoryCard_default as CategoryCard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayak-common-library",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",