@redneckz/wildless-cms-uni-blocks 0.2.46 → 0.2.49

package/src/index.ts

@@ -0,0 +1,20 @@
+export type { ProjectSettings } from './ProjectSettings';
+export { projectSettings } from './ProjectSettings';
+
+export type { BlockDef, ContentPageMeta, ContentPageDef, Img, ImgSource, Picture } from './types';
+export type {
+  ContentPageContext,
+  Router,
+  LikeService,
+  Search,
+  HandlerDecorator,
+} from './ContentPageContext';
+
+export { ContentPageHead } from './ContentPageHead';
+export { ContentPage } from './ContentPage';
+
+export { Blocks } from './Blocks';
+export { LikeAPI } from './api/LikeAPI';
+
+export * as url from './utils/url';
+export { joinList } from './utils/joinList';

package/src/mergeTopItems.spec.ts

@@ -0,0 +1,20 @@
+import { mergeTopItems } from './mergeTopItems';
+
+describe('mergeTopItems', () => {
+  it('should return original items if no extra items provided', () => {
+    const items = [{ href: '/' }];
+    expect(mergeTopItems(items)).toEqual(items);
+  });
+
+  it('should append extra items to original ones', () => {
+    const items = [{ href: '/' }];
+    const extraItems = [{ href: '/foo' }, { href: '/bar' }];
+    expect(mergeTopItems(items, extraItems)).toEqual(items.concat(extraItems));
+  });
+
+  it('should replace original items with duplicating extra items (by href)', () => {
+    const items = [{ href: '/foo' }];
+    const extraItems = [{ href: '/foo', text: 'foo' }, { href: '/bar' }];
+    expect(mergeTopItems(items, extraItems)).toEqual(extraItems);
+  });
+});

package/src/mergeTopItems.ts

@@ -0,0 +1,13 @@
+import type { TopMenuItem } from './types';
+
+const cmp = (a?: TopMenuItem) => (b?: TopMenuItem) => a?.href === b?.href;
+
+const substitute = (items?: TopMenuItem[], substitution?: TopMenuItem[]) =>
+  (items || []).map((_) => substitution?.find(cmp(_)) || _);
+
+const subtract = (minuend?: TopMenuItem[], subtrahend?: TopMenuItem[]) =>
+  (minuend || []).filter((_) => !subtrahend?.find(cmp(_)));
+
+export function mergeTopItems(left?: TopMenuItem[], right?: TopMenuItem[]): TopMenuItem[] {
+  return substitute(left, right).concat(subtract(right, left));
+}

package/src/setup-fixture.ts

@@ -0,0 +1,49 @@
+import { setup } from '@redneckz/uni-jsx';
+import runtime from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import type { ContentPageContext } from './ContentPageContext';
+
+const { jsx, jsxs } = runtime as any;
+setup(jsx, jsxs);
+
+const TEST_ORIGIN = 'http://localhost:5001';
+
+export const context: ContentPageContext = {
+  useState,
+  useRouter: () => ({
+    href: `${TEST_ORIGIN}/credits`,
+    pathname: '/credits',
+    query: {},
+    push: (url: string) => {
+      console.log(url);
+    },
+  }),
+  useAsyncData: (key, fetcher) => {
+    const [data, setData] = useState();
+    useEffect(() => {
+      fetcher().then((_) => {
+        setData(_);
+      });
+    }, [key, fetcher]);
+    return { data };
+  },
+  useLikeService: () => ({
+    likeCount: 0,
+    like: () => {
+      console.log('like');
+    },
+    dislike: () => {
+      console.log('dislike');
+    },
+  }),
+  handlerDecorator:
+    (handler, targetContent): any =>
+    (ev) => {
+      ev.preventDefault();
+      console.log(ev.target, ev, targetContent);
+    },
+  useSearch: () => ({
+    term: 'кредит',
+    setTerm: (text: string) => console.log(text),
+  }),
+};

package/src/types.ts

@@ -0,0 +1,94 @@
+import type {
+  AvifOptions,
+  FormatEnum,
+  GifOptions,
+  HeifOptions,
+  JpegOptions,
+  PngOptions,
+  ResizeOptions,
+  TiffOptions,
+  WebpOptions,
+} from 'sharp';
+import type { BlockContent } from './Blocks';
+import type { ContentPageContext } from './ContentPageContext';
+
+export type ColorPalette = 'pc' | 'bc' | 'eo';
+
+export type BlockVersion = 'primary' | 'secondary';
+
+export interface BlockDef {
+  type: string;
+  style?: string[];
+  version?: BlockVersion;
+  content?: BlockContent;
+  blocks?: BlockDef[];
+}
+
+export interface ContentPageMeta {
+  title: string;
+  slug: string;
+  description?: string;
+  keywords?: string[];
+  robots?: string[];
+  og?: Record<string, string>;
+}
+
+export interface ContentPageDef extends ContentPageMeta {
+  style?: string[];
+  blocks?: BlockDef[];
+  likeControl?: boolean;
+  colorPalette?: ColorPalette;
+}
+
+export interface Img {
+  src: string;
+  alt?: string;
+  title?: string;
+}
+
+export interface ImgSource {
+  src: string;
+  format?: keyof FormatEnum;
+  options?:
+    | JpegOptions
+    | PngOptions
+    | WebpOptions
+    | AvifOptions
+    | HeifOptions
+    | GifOptions
+    | TiffOptions;
+  size?: ResizeOptions;
+}
+
+export interface Picture extends Img, ImgSource {
+  sources?: ImgSource[];
+}
+
+export interface UniBlockProps {
+  className?: string;
+  context: ContentPageContext;
+}
+
+export interface ContactInfo {
+  text: string;
+  type: 'tel' | 'email';
+  description: string;
+}
+
+export interface LinkContent {
+  text?: string;
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top' | string;
+}
+
+export type NavMenuItem = LinkContent;
+
+export interface TopMenuItem extends NavMenuItem {
+  items?: NavMenuItem[];
+}
+
+export interface Benefit {
+  label: string;
+  description?: string;
+  icon?: string;
+}

package/src/ui-kit/BlockItem.fixture.tsx

@@ -0,0 +1,5 @@
+import '../setup-fixture';
+
+import { BlockItem } from './BlockItem';
+
+export default <BlockItem text="Совершайте любые личные покупки" />;

package/src/ui-kit/BlockItem.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+type BlockItemVersion = 'primary' | 'secondary';
+export interface BlockItemContent {
+  text?: string;
+}
+
+export interface BlockItemProps extends BlockItemContent {
+  className?: string;
+  version?: BlockItemVersion;
+}
+
+const listStyleMap: Record<BlockItemVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-white',
+};
+
+const textStyleMap: Record<BlockItemVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
+
+export const BlockItem = JSX<BlockItemProps>(
+  ({ className, text, children, version = 'primary' }) => {
+    return (
+      <div className={`inline-block flex ${className || ''}`} role="listitem">
+        <div
+          className={`inline-block w-[8px] h-[8px] min-w-[8px] min-h-[8px] rounded-full mt-2 ${listStyleMap[version]}`}
+        ></div>
+        <span className={`text-base font-normal font-sans mx-3 ${textStyleMap[version]}`}>
+          {text || children}
+        </span>
+      </div>
+    );
+  },
+);

package/src/ui-kit/Breadcrumb.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../types';
+
+export interface BreadcrumbProps extends LinkContent {
+  className?: string;
+  onClick?: (ev: MouseEvent) => any;
+}
+
+export const Breadcrumb = JSX<BreadcrumbProps>(
+  ({ text, href, target, onClick, className, children }) => {
+    if (href) {
+      return (
+        <a
+          className={`no-underline ${className || ''}`}
+          href={href}
+          target={target}
+          onClick={onClick}
+        >
+          <span className={`${className || ''}`}>{text || children}</span>
+        </a>
+      );
+    } else {
+      return <span className={`${className || ''}`}>{text || children}</span>;
+    }
+  },
+);

package/src/ui-kit/Button.fixture.tsx

@@ -0,0 +1,113 @@
+import '../setup-fixture';
+
+import { Button } from './Button';
+
+export default {
+  all: (
+    <div className="font-sans overflow-hidden">
+      <div>
+        <p>Private clients</p>
+        <div className="flex gap-6" data-theme="pc">
+          <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Secondary"
+            version="secondary"
+          />
+        </div>
+      </div>
+      <div>
+        <p>Business clients</p>
+        <div className="flex gap-6" data-theme="bc">
+          <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Secondary"
+            version="secondary"
+          />
+        </div>
+      </div>
+      <div>
+        <p>Ecosystem own</p>
+        <div className="flex gap-6" data-theme="eo">
+          <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Secondary"
+            version="secondary"
+          />
+        </div>
+      </div>
+      <div>
+        <p>Disabled</p>
+        <div className="flex gap-6">
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Primary"
+            version="primary"
+            disabled
+          />
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Secondary"
+            version="secondary"
+            disabled
+          />
+        </div>
+      </div>
+    </div>
+  ),
+  'primary (Private clients)': (
+    <div data-theme="pc">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="primary" />
+    </div>
+  ),
+  'secondary (Private clients)': (
+    <div data-theme="pc">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="secondary" />
+    </div>
+  ),
+  'primary (Business clients)': (
+    <div data-theme="bc">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="primary" />
+    </div>
+  ),
+  'secondary (Business clients)': (
+    <div data-theme="bc">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="secondary" />
+    </div>
+  ),
+  'primary (Ecosystem own)': (
+    <div data-theme="eo">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="primary" />
+    </div>
+  ),
+  'secondary (Ecosystem own)': (
+    <div data-theme="eo">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="secondary" />
+    </div>
+  ),
+  'primary (disabled)': (
+    <Button
+      href="https://www.rshb.ru/"
+      target="_blank"
+      text="Сайт РСХБ"
+      version="primary"
+      disabled
+    />
+  ),
+  'secondary (disabled)': (
+    <Button
+      href="https://www.rshb.ru/"
+      target="_blank"
+      text="Сайт РСХБ"
+      version="secondary"
+      disabled
+    />
+  ),
+};

package/src/ui-kit/Button.tsx

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../types';
+
+type ButtonVersion = 'primary' | 'secondary';
+export interface ButtonProps extends LinkContent {
+  className?: string;
+  onClick?: (ev: MouseEvent) => any;
+  version?: ButtonVersion;
+  ariaLabel?: string;
+  disabled?: Boolean;
+}
+
+const buttonStyleMap: Record<ButtonVersion, string> = {
+  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+  secondary:
+    'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+};
+
+const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
+  primary: 'bg-secondary-dark text-secondary-text',
+  secondary: 'bg-secondary-light text-secondary-text',
+};
+
+const styleButton = 'inline-block rounded-md px-9 py-3.5 text-center font-sans';
+
+export const Button = JSX<ButtonProps>(
+  ({
+    className,
+    text,
+    href,
+    target,
+    onClick,
+    children,
+    disabled,
+    version = 'primary',
+    ariaLabel,
+  }) => {
+    if (disabled) {
+      return (
+        <div
+          role="button"
+          aria-disabled="true"
+          aria-label={ariaLabel}
+          tabindex="-1"
+          className={`${styleButton} select-none ${buttonDisabledStyleMap[version]} ${
+            className || ''
+          }`}
+        >
+          <span className="text-sm font-medium">{text || children}</span>
+        </div>
+      );
+    }
+
+    return (
+      <a
+        className={`${styleButton} no-underline ${buttonStyleMap[version]} ${className || ''}`}
+        href={href}
+        target={target}
+        onClick={onClick}
+        aria-label={ariaLabel}
+      >
+        <span className="text-sm font-medium">{text || children}</span>
+      </a>
+    );
+  },
+);

package/src/ui-kit/HeaderItem.fixture.tsx

@@ -0,0 +1,8 @@
+import '../setup-fixture';
+
+import { HeaderItem } from './HeaderItem';
+
+export default {
+  default: <HeaderItem href="https://www.rshb.ru/" target="_blank" text="Россельхозбанк" />,
+  active: <HeaderItem href="https://www.rshb.ru/" target="_blank" text="Россельхозбанк" active />,
+};

package/src/ui-kit/HeaderItem.tsx

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { TopItemProps } from './TopItem';
+
+export type HeaderItemProps = TopItemProps;
+
+export const HeaderItem = JSX<HeaderItemProps>(
+  ({ className, text, href, target, active, onClick, children }) => {
+    const textStyle = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
+    return (
+      <a
+        className={`relative inline-block bg-transparent text-center no-underline ${
+          className || ''
+        }`}
+        href={href}
+        target={target}
+        onClick={onClick}
+      >
+        <span className={`font-sans font-normal text-base ${textStyle}`}>{text || children}</span>
+        {active ? (
+          <div className="absolute left-0 -bottom-2 w-full h-[2px] bg-primary-main" />
+        ) : null}
+      </a>
+    );
+  },
+);

package/src/ui-kit/LikeButton.fixture.tsx

@@ -0,0 +1,6 @@
+import { LikeButton } from './LikeButton';
+
+export default {
+  default: <LikeButton />,
+  rotate: <LikeButton className="rotate-180" />,
+};

package/src/ui-kit/LikeButton.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface LikeButtonProps {
+  className?: string;
+  onClick?: (ev: MouseEvent) => any;
+  ariaLabel?: string;
+}
+
+export const LikeButton = JSX<LikeButtonProps>(({ className, onClick, ariaLabel }) => (
+  <button
+    type="button"
+    className={`border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`}
+    onClick={onClick}
+    aria-label={ariaLabel}
+  >
+    {renderLikeIcon()}
+  </button>
+));
+
+const renderLikeIcon = () => {
+  const params = {
+    stroke: '#292D32',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '1.5',
+  };
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <path
+        {...params}
+        strokeMiterlimit="10"
+        d="M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77"
+      />
+      <path
+        {...params}
+        d="M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z"
+      />
+    </svg>
+  );
+};

package/src/ui-kit/Logo.fixture.tsx

@@ -0,0 +1,5 @@
+import '../setup-fixture';
+
+import { Logo } from './Logo';
+
+export default <Logo href="https://www.rshb.ru/" />;

package/src/ui-kit/Logo.tsx

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SVG } from './SVG';
+
+export interface LogoProps {
+  className: string;
+  href: string;
+  targetBlank: boolean;
+}
+
+const LOGO_PATHS = [
+  'm13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z',
+  'M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z',
+  'M33.93 35.53c.3-.41.6-.85.87-1.3v-2.66h-.87v3.96Zm2.54-4.92c.12-.4.24-.78.34-1.16h-2.88v.7h.43c.77-.02 1.63-.03 2.11.46Zm-19.19-1.27h-.78v7.91h.78v-7.9Z',
+  'M14.7 27.83h2.58c.67 0 1.14.14 1.4.4.27.25.4.72.4 1.38v7.4c0 .66-.12 1.12-.4 1.38-.4.41-1.16.41-1.78.41l-.4-.01v3.5l.78.14v-2.88c1.2 0 1.97-.4 2.34-1.22v4.29h.26l.5-.01V29.74c0-.68.13-1.16.4-1.43.25-.27.72-.4 1.37-.4.67 0 1.65-.1 2.16.4.26.27.38.76.38 1.43v3.8h-1.77v-4.06h-.77v12.99c.26-.03.5-.07.77-.12V34.3h1.77v7.64c.36-.1.72-.21 1.08-.34v-7c0-.8.19-1.4 1-1.67l-.9-4.87h1.8l.3 5.31h.22l.3-5.31h1.88l-1.01 4.87c.84.3 1.01.81 1.01 1.66v4.53a16.63 16.63 0 0 0 1.5-1.27v-9.83h5.25l.1-.72H24.93l.17.89c-.38-.72-1.12-1.08-2.2-1.08h-.77c-1.3 0-2.1.52-2.4 1.55-.27-1.08-1.1-1.62-2.46-1.62h-3.36v14.52c.26.09.52.18.78.25V27.84Zm16.29 5.58-.85-.8.85-4.37v5.17Z',
+  'M27.66 40.79c.27-.14.55-.28.8-.43v-5.98h-.8v6.4Z',
+];
+
+export const Logo = JSX<Partial<LogoProps>>(({ className, href, children, targetBlank }) => {
+  return (
+    <a
+      className={`inline-flex items-center font-sans no-underline ${className || ''}`}
+      href={href || 'https://rshb.ru/'}
+      target={targetBlank ? '_blank' : '_self'}
+    >
+      <SVG
+        className="text-primary-main w-10"
+        viewBox="0 0 40 45"
+        paths={LOGO_PATHS.map((d) => ({ d }))}
+      />
+      <span className="text-black text-base font-medium ml-2.5">
+        {children || 'Россельхозбанк'}
+      </span>
+    </a>
+  );
+});

package/src/ui-kit/SVG.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+interface SVGPathOptions {
+  fill?: string;
+  stroke?: string;
+  strokeLinecap?: string;
+  strokeLinejoin?: string;
+  strokeWidth?: string;
+  strokeMiterlimit?: string;
+}
+
+interface SVGPath extends SVGPathOptions {
+  d: string;
+}
+
+export interface SVGProps extends SVGPathOptions {
+  className?: string;
+  viewBox?: string;
+  paths: SVGPath[];
+}
+
+export const SVG = JSX<SVGProps>(
+  ({ className, viewBox, fill = 'none', paths, ...commonOptions }) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox={viewBox} fill={fill}>
+        {paths.map(({ d, fill, ...options }, i) => (
+          <path key={i} d={d} fill={fill || 'currentColor'} {...commonOptions} {...options} />
+        ))}
+      </svg>
+    );
+  },
+);

package/src/ui-kit/SearchBar.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../types';
+import { LoupeIcon } from '../Icons/index';
+
+export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
+  const search = context.useSearch();
+  return (
+    <form className={`relative ${className || ''}`}>
+      <div className="absolute rounded-l-full h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5">
+        <div className="w-[24px] h-[24px]">{LoupeIcon()}</div>
+        <span className="font-sans font-normal text-sm text-secondary-text">Поиск по сайту</span>
+      </div>
+      <input
+        className="pl-[170px] w-full font-sans font-normal text-sm border border-solid border-main-divider rounded-full h-full box-border outline-none"
+        value={search.term}
+        onChange={(e) => search.setTerm(e.target.value)}
+        type="text"
+        placeholder="Поиск по сайту"
+        name="s"
+      />
+      <button
+        type="submit"
+        className="absolute font-sans font-normal text-sm cursor-pointer bg-transparent hover:bg-primary-hover active:bg-primary-active text-primary-main hover:text-white border-none px-5 rounded-r-full h-full top-0 right-0 outline-none"
+        onClick={(e) => {
+          e.preventDefault();
+          console.log('click');
+        }}
+      >
+        Найти
+      </button>
+    </form>
+  );
+});

package/src/ui-kit/TopItem.fixture.tsx

@@ -0,0 +1,8 @@
+import '../setup-fixture';
+
+import { TopItem } from './TopItem';
+
+export default {
+  default: <TopItem href="https://www.rshb.ru/" target="_blank" text="Экосистема Своё" />,
+  active: <TopItem href="https://www.rshb.ru/" target="_blank" text="Экосистема Своё" active />,
+};