stone-kit/dist/layout/components/Header/Header.js

uikit for redesign

import { jsxs as n, jsx as t } from "react/jsx-runtime";
import { Menu as f } from "../Menu.js";
import { useState as i } from "react";
import "../../../components/Button/ui/Button.js";
import "../../../components/mobileButton/ui/MobileButton.js";
import { NewIcon as c } from "../../../components/NewIcon/ui/NewIcon.js";
import "../../../components/DestinationTab/ui/DestinationTab.js";
import "../../../components/RoundButton/ui/RoundButton.js";
import "../../../components/Tag/ui/Tag.js";
import "../../../components/Switcher/ui/Switcher.js";
import "../../../components/Text/ui/Text.js";
import "../../../components/Flex/ui/Flex.js";
import "../../../components/Input/ui/Input.js";
import "react-dom";
import "../../../index-YnD2EP-S.js";
import "../../../FilterWithSave-D4iIFzmS.js";
import "../../../components/GroupedInput/ui/GroupedInputs.js";
import "../../../components/MetroTag/ui/MetroTag.js";
import "../../../components/Select/ui/Select.js";
import "../../../components/SliderNavigation/ui/SliderNavigation.js";
import "../../../components/LotCardSkeleton/ui/LotCardSkeleton.js";
import "../../../components/TabSelect/ui/TabSelect.js";
import "../../../components/CheckBox/CheckBox.js";
import "../../../components/CheckBoxNew/CheckBoxNew.js";
import "../../../components/CheckboxSelect/ui/CheckboxSelect.js";
const w = "_root_15wfn_1", _ = "_wrap_15wfn_12", g = "_search_15wfn_32", x = "_searchInp_15wfn_47", y = "_searchIcon_15wfn_67", I = "_closeBtn_15wfn_73", e = {
  root: w,
  wrap: _,
  search: g,
  searchInp: x,
  searchIcon: y,
  closeBtn: I
}, P = () => {
  const [a, s] = i(!1), [l, r] = i(""), h = (o) => {
    r(o.target.value);
  }, p = (o) => {
    o.key === "Enter" && (window.location.href = "https://test.stone.ru");
  }, m = () => {
    s(!0);
  }, u = () => {
    setTimeout(() => {
      document?.activeElement?.classList.contains("close-button") || s(!1);
    }, 0);
  }, d = () => {
    r(""), s(!1);
  };
  return /* @__PURE__ */ n("nav", { className: e.root, children: [
    /* @__PURE__ */ n("div", { className: e.wrap, children: [
      /* @__PURE__ */ n(
        "svg",
        {
          xmlns: "http://www.w3.org/2000/svg",
          width: "200",
          height: "60",
          children: [
            /* @__PURE__ */ t(
              "rect",
              {
                width: "200",
                height: "60",
                fill: "transparent"
              }
            ),
            /* @__PURE__ */ t(
              "text",
              {
                x: "0",
                y: "42",
                fontFamily: "Arial, sans-serif",
                fontSize: "40",
                fill: "white",
                children: "Stone"
              }
            ),
            /* @__PURE__ */ t(
              "rect",
              {
                x: "110",
                y: "10",
                width: "85",
                height: "40",
                rx: "8",
                ry: "8",
                fill: "#f90"
              }
            ),
            /* @__PURE__ */ t(
              "text",
              {
                x: "115",
                y: "42",
                fontFamily: "Arial, sans-serif",
                fontWeight: "bold",
                fontSize: "40",
                fill: "black",
                children: "Hub"
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ n("search", { className: e.search, children: [
        /* @__PURE__ */ t(
          "button",
          {
            style: {
              margin: "unset",
              border: "unset",
              background: "unset",
              padding: "unset",
              cursor: "pointer"
            },
            onClick: (o) => {
              o.preventDefault(), window.location.href = "https://test.stone.ru";
            },
            children: /* @__PURE__ */ t(
              c,
              {
                additionalClass: e.searchIcon,
                size: "24",
                name: "search"
              }
            )
          }
        ),
        /* @__PURE__ */ t(
          "input",
          {
            type: "text",
            value: l,
            onChange: h,
            onKeyDown: p,
            onFocus: m,
            onBlur: u,
            className: e.searchInp,
            placeholder: "Изучить stone-kit"
          }
        ),
        a && /* @__PURE__ */ t(
          "button",
          {
            onClick: d,
            className: `${e.closeBtn} close-button`,
            children: /* @__PURE__ */ t(
              c,
              {
                strokeWidth: "2.5",
                color: "#252525",
                size: "18",
                name: "close"
              }
            )
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ t(f, {})
  ] });
};
export {
  P as Header
};