@redneckz/wildless-cms-uni-blocks 0.3.91 → 0.3.92

package/src/components/Catalog/Catalog.example.json

@@ -15,7 +15,7 @@
       "button": {
         "href": "",
         "text": "Подробнее",
-        "target": "_blank",
+        "target": "_self",
         "version": "primary"
       }
     },
@@ -32,7 +32,7 @@
       "button": {
         "href": "",
         "text": "Подробнее",
-        "target": "_blank",
+        "target": "_self",
         "version": "primary"
       }
     },
@@ -49,7 +49,7 @@
       "button": {
         "href": "",
         "text": "Подробнее",
-        "target": "_blank",
+        "target": "_self",
         "version": "primary"
       }
     }

package/src/components/Catalog/CatalogCard.tsx

@@ -1,7 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { Picture } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CatalogCardType, CatalogProductColor } from './CatalogContent';
@@ -36,7 +38,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
           </div>
         ) : null}
         {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
-        {button?.text ? <Button className="mt-5 w-full" {...button} /> : null}
+        {button ? renderButton(button) : null}
       </section>
     );
   },
@@ -48,3 +50,28 @@ const renderColorOption = (color: CatalogProductColor, i: number) => (
     className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />
 );
+
+const renderButton = (button: ButtonWithIconProps) => {
+  const { icon, iconRight, text } = button;
+
+  if (!text) {
+    return null;
+  }
+
+  const leftIcon = renderButtonIcon(icon);
+  const rightIcon = renderButtonIcon(iconRight);
+
+  return (
+    <Button className="mt-5 w-full" appendLeft={leftIcon} appendRight={rightIcon} {...button} />
+  );
+};
+
+const renderButtonIcon = (buttonIcon?: Picture) => {
+  if (!buttonIcon || !buttonIcon.icon) {
+    return null;
+  }
+
+  const iconWidth = buttonIcon?.size?.width ? `${buttonIcon.size.width}` : '24';
+
+  return <Img image={buttonIcon} width={iconWidth} height="24" asSVG />;
+};

package/src/components/Catalog/CatalogContent.ts

@@ -1,6 +1,6 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @enumNames ["Черный", "Белый"]
@@ -12,7 +12,13 @@ export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
   price?: number;
   /** @title Доступные цвета */
   colors?: CatalogProductColor[];
-  /** @title Кнопка */
+  /**
+   * @title Кнопка
+   * @default {
+   *  "icon": { "format": "webp", "size": { "width": 24, "height": 24 } },
+   *  "iconRight" : { "format": "webp", "size": { "width": 24, "height": 24 } }
+   * }
+   */
   button?: ButtonWithIconProps;
 }
 

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
 import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { calculateResult, formatValue } from './calculateResult';
 import { callbackCurrencySelect } from './callbackCurrencySelect';
 import { Currency } from './CurrencyProps';
-import { renderButton } from './renderButton';
 import { renderInput } from './renderInput';
-
 export interface ExchangeCurrencyItem {
   code?: Currency;
   buy?: number;
@@ -27,6 +27,9 @@ export interface CalcState {
 
 export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
   ({ context, className = '', currencyRatesBuy, currencyRatesSell, button }) => {
+    const { useRouter, handlerDecorator } = context;
+    const router = useRouter();
+
     const [calcState, setCalcState] = context.useState<CalcState>({
       inputSell: '',
       inputBuy: '',
@@ -66,7 +69,15 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
               calcState.selectSell,
             ),
         })}
-        {button?.text ? renderButton(button) : null}
+        {button?.text ? (
+          <Button
+            className="py-4 mr-1"
+            version={button?.version}
+            {...useLink({ router, handlerDecorator }, button)}
+          >
+            {button.text}
+          </Button>
+        ) : null}
       </div>
     );
   },

package/src/components/Footer/Contacts.tsx

@@ -40,7 +40,7 @@ const renderContact = (item: ContactInfo, index: number) => {
   return (
     <div className="mb-4" key={String(index)}>
       <div>{renderText(type, text)}</div>
-      <div className="mt-1 font-sans text-s-light text-secondary-text">{description}</div>
+      <div className="mt-1 text-s-light text-secondary-text">{description}</div>
     </div>
   );
 };
@@ -50,7 +50,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
     case 'tel':
       return (
         <a
-          className="font-sans text-xl-light text-primary-text no-underline"
+          className="text-h6 text-primary-text hover:text-primary-main no-underline"
           href={`tel:${formatTel(text)}`}
         >
           {text}
@@ -58,10 +58,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
       );
     case 'email':
       return (
-        <a
-          className="font-sans text-xl-light text-primary-text no-underline"
-          href={`mailto:${text}`}
-        >
+        <a className="text-xl-light text-primary-text no-underline" href={`mailto:${text}`}>
           {text}
         </a>
       );

package/src/components/Footer/Footer.mobile.tsx

@@ -30,7 +30,7 @@ export const Footer = JSX<FooterProps>(
     const dispositions = sitemap?.dispositions;
 
     return (
-      <footer className={`px-4 py-[26px] bg-white ${className}`}>
+      <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
         <Accordion
           context={context}

package/src/components/Footer/Footer.tsx

@@ -30,7 +30,7 @@ export const Footer = JSX<FooterProps>(
       <BlockWrapper
         tag="footer"
         context={context}
-        className={`p-9 bg-white ${className || ''}`}
+        className={`p-9 bg-white font-sans ${className || ''}`}
         {...rest}
       >
         <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">

package/src/components/Footer/HorizontalNavigation.mobile.tsx

@@ -15,7 +15,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
 
     return (
       <div className={className}>
-        <span className="text-primary-text font-sans font-medium text-sm">{title}</span>
+        <span className="text-primary-text font-medium text-sm">{title}</span>
         {links?.length ? (
           <div className="flex flex-col gap-2 pt-3">
             {links.map((_, i) => (

package/src/components/Footer/HorizontalNavigation.tsx

@@ -21,7 +21,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
               <HorizontalNavigationLink
                 key={String(i)}
                 index={i}
-                className="font-light max-w-[292px]"
+                className="font-l-light max-w-[292px]"
                 {...useLink({ router, handlerDecorator }, _)}
               />
             ))}

package/src/components/Footer/HorizontalNavigationLink.tsx

@@ -10,7 +10,7 @@ interface HorizontalNavigationLinkProps extends LinkProps {
 export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
   ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+      className={`text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/src/components/Footer/MediaButton.tsx

@@ -51,7 +51,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
   const classes =
     version === 'secondary'
       ? 'bg-secondary-light hover:bg-secondary-hover'
-      : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
+      : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
 
   const isPrimary = version === 'primary';
 

package/src/components/Footer/Sitemap.tsx

@@ -19,7 +19,7 @@ export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) =>
   };
 
   return (
-    <div className={`flex items-start justify-between gap-11 xl:gap-5 ${className}`}>
+    <div className={`flex items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
       {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
     </div>
   );
@@ -29,9 +29,9 @@ const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator
   const { text, href, items, target } = c;
 
   return (
-    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-[14px]">
+    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-3.5">
       <a
-        className="block font-sans leading-5 text-l text-primary-text no-underline"
+        className="block leading-5 text-l text-primary-text hover:text-primary-main no-underline"
         href={href}
         target={target || '_self'}
       >
@@ -50,7 +50,7 @@ interface ColumnItemProps extends LinkProps {
 
 const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
   <a
-    className="block font-sans text-l-light text-secondary-text hover:text-primary-main no-underline"
+    className="block text-l-light text-secondary-text hover:text-primary-main no-underline"
     href={href}
     target={target || '_self'}
   >

package/src/components/Footer/SocialMedia.tsx

@@ -16,7 +16,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
     const { handlerDecorator } = context;
 
     return (
-      <div>
+      <div className="font-sans">
         <div className={`flex gap-2.5 ${className}`}>
           {media?.map((_, index) => (
             <MediaButton

package/src/components/Footer/TextInformation.mobile.tsx

@@ -10,7 +10,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   return (
     <div className={`${className || ''}`}>
       <div className="py-6">
-        <span className="font-sans font-normal text-xs text-secondary-text">
+        <span className="font-normal text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>

package/src/components/Footer/TextInformation.tsx

@@ -10,7 +10,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   return (
     <div className={`${className || ''}`}>
       <div className="pt-5">
-        <span className="font-sans font-light text-xs text-secondary-text">
+        <span className="font-light text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>

package/src/components/Footer/TextInformationLink.tsx

@@ -10,7 +10,7 @@ interface TextInformationLinkProps extends LinkProps {
 export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
   ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className}`}
+      className={`text-xs text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/src/components/Header/Header.tsx

@@ -35,8 +35,9 @@ export const Header = JSX<HeaderProps>(
     const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-    const activeTopItem = mergedItems.find(isTopItemActive(router));
-
+    const [firstPortal] = mergedItems;
+    // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
+    const activeTopItem = mergedItems.find(isTopItemActive(router)) || firstPortal;
     const topMenu = mergedItems.map((_, i) => (
       <TopItem
         key={String(i)}

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconVersion } from '../../model/IconVersion';
 import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img/Img';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
@@ -50,22 +50,24 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           bgColor={bgColor}
         />
         <HeaderSecondaryMenuButton
-          className={`mr-5 ${COLORS_MAP[bgColor]}`}
+          className={`mr-5 group ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
           <Img
             image={{ icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
-            className="h-full"
+            className="h-full pointer-events-none"
+            imageClassName="group-hover:text-primary-main pointer-events-none"
             asSVG
           />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
+          className={`${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
           <Img
             image={{ icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
-            className="h-full bg-secondary-light rounded-full"
+            className="h-full bg-main-divider rounded-full pointer-events-none"
+            imageClassName="group-hover:text-primary-main"
             asSVG
           />
         </HeaderSecondaryMenuButton>

package/src/components/Header/HeaderSubMenu.tsx

@@ -39,7 +39,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
   };
 
   return (
-    <nav className="relative mt-5">
+    <nav className="relative mt-6">
       <div className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
           <IntersectionObserverTag

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
+import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsList } from './LinkDocsList';
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {

package/src/components/ProductBlock/ProductBlock.tsx

@@ -36,10 +36,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   return (
     <BlockWrapper
       context={context}
-      className={`font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border
-      ${backwardButton?.text ? 'min-h-[542px] max-h-[542]' : 'min-h-[454px] max-h-[454px]'} ${
-        productBlockStyleMap[version]
-      } ${className}`}
+      className={`font-sans overflow-hidden p-[50px] box-border min-h-[528px] ${productBlockStyleMap[version]} ${className}`}
       {...otherProps}
     >
       {backwardButton?.text
@@ -64,12 +61,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
           )}
         </div>
       ) : null}
-      <ProductBlockInner
-        context={context}
-        version={version}
-        {...otherProps}
-        className={backwardButton?.text ? 'pb-[88px]' : ''}
-      />
+      <ProductBlockInner context={context} version={version} {...otherProps} />
     </BlockWrapper>
   );
 });

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -13,7 +13,7 @@ export function renderBackwardButton(
   const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
 
   return (
-    <div className={`flex items-center ${className}`}>
+    <div className={`flex items-center cursor-pointer ${className}`} onClick={onClick}>
       <Button
         version={version}
         rounded
@@ -21,7 +21,6 @@ export function renderBackwardButton(
         ariaLabel={text}
         href={href}
         target={target}
-        onClick={onClick}
       >
         <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
       </Button>

package/src/components/ProductTile/ProductTile.tsx

@@ -57,7 +57,7 @@ export const ProductTile = JSX<ProductTileProps>(
           <ButtonSection
             context={context}
             buttons={buttons}
-            className="flex self-end mt-5 gap-4 z-[1]"
+            className="flex self-end mt-5 gap-4 z-[1] text-l"
           />
         ) : null}
         {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
@@ -96,7 +96,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-m ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );

package/src/components/SafeDepositRental/SafeDepositRental.fixture.tsx

@@ -0,0 +1,9 @@
+import { context } from '../../react/setup-fixture';
+import { SafeDepositRental } from './SafeDepositRental';
+export default {
+  default: (
+    <div className="container grid grid-cols-12 mb-1">
+      <SafeDepositRental className="col-span-12" context={context} />
+    </div>
+  ),
+};

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useSafeDepositRental } from '../../hooks/useSafeDepositRental';
+import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
+import { SafeDepositRentalForm } from './SafeDepositRentalForm';
+import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
+
+export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
+
+const DEFAULT_DAYS = 26;
+
+export const SafeDepositRental = JSX<SafeDepositRentalProps>(
+  ({ context, className = '', ...rest }) => {
+    const [days, setDays] = context.useState(DEFAULT_DAYS);
+    const data = useSafeDepositRental(context.useAsyncData);
+
+    return (
+      <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
+        <div className="flex justify-between align-top mb-6">
+          {data?.cities?.length ? (
+            <SafeDepositRentalForm {...data} days={days} setDays={setDays} context={context} />
+          ) : null}
+          <SafeDepositRentalTotal days={days} />
+        </div>
+        <p className="text-button font-light text-secondary-text">
+          Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
+          или процедуры ипотечной сделки
+        </p>
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -0,0 +1,7 @@
+/**
+ * @title Аренда сейфовых ячеек
+ */
+export interface SafeDepositRentalContent {
+  /** @title Заголовок */
+  title?: string;
+}

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -0,0 +1,164 @@
+import { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Radio } from '../../ui-kit/Radio/Radio';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+
+export type SafeDepositRentalFormProps = UniBlockProps;
+
+export const SafeDepositRentalForm = ({
+  cities,
+  cellDimensions,
+  cellOptions,
+  days,
+  setDays,
+  context,
+}) => {
+  return (
+    <div className="flex-1 mr-9">
+      {cities.length ? renderCitiesOffices(cities, context) : null}
+      {renderRentalPeriod(days, setDays)}
+      {cellDimensions.length && cellOptions.length
+        ? renderDimensionsOptions(cellDimensions, cellOptions, context)
+        : null}
+      <span className="text-secondary-text font-light">Тип договора</span>
+      <div className="flex justify-between items-center mt-5">
+        {renderRadioButtons(context)}
+        <Button text="Офисы на карте" version="primary" />
+      </div>
+    </div>
+  );
+};
+
+const renderCitiesOffices = (cities, context) => {
+  const [selectedCity, setSelectedCity] = context.useState(cities[0].city);
+
+  const setSelected = (_) => setSelectedCity(_);
+
+  const offices = cities.find((_) => _.city === selectedCity).offices;
+
+  return (
+    <div className="flex justify-between mb-6">
+      <div className="w-full mr-4">
+        {cities.length
+          ? renderSelect({
+              data: cities,
+              field: 'city',
+              selected: selectedCity,
+              setSelected,
+              label: 'Город',
+            })
+          : null}
+      </div>
+      <div className="w-full">
+        {offices.length
+          ? renderSelect({
+              data: offices,
+              field: 'office',
+              selected: offices[0],
+              setSelected,
+              label: 'Отделение',
+            })
+          : null}
+      </div>
+    </div>
+  );
+};
+
+const renderDimensionsOptions = (cellDimensions, cellOptions, context) => {
+  const [selectedDimension, setSelectedDimension] = context.useState(cellDimensions[0].dimension);
+  const [selectedOption, setSelectedOption] = context.useState(cellOptions[0].option);
+
+  return (
+    <div className="flex justify-between mb-6">
+      <div className="mr-4 w-full">
+        {cellDimensions.length
+          ? renderSelect({
+              data: cellDimensions,
+              field: 'dimension',
+              selected: selectedDimension,
+              setSelected: setSelectedDimension,
+              label: 'Размер ячейки',
+            })
+          : null}
+      </div>
+      <div className="w-full">
+        {cellOptions.length
+          ? renderSelect({
+              data: cellOptions,
+              field: 'option',
+              selected: selectedOption,
+              setSelected: setSelectedOption,
+              label: 'Параметры ячейки, мм (ВхШхД)',
+            })
+          : null}
+      </div>
+    </div>
+  );
+};
+
+interface SelectProps {
+  data: any[];
+  field: string;
+  selected: string;
+  setSelected: (value: string) => void;
+  label: string;
+}
+
+const renderSelect = (props: SelectProps) => {
+  const { data, field, selected, setSelected, label } = props;
+
+  return (
+    <div>
+      <span className="block font-light text-m mb-2">{label}</span>
+      <Select
+        className="h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+        value={selected}
+        onChange={(_) => setSelected(_)}
+      >
+        {data.map((_, i) => (
+          <SelectOption key={String(i)} value={_?.[field]}>
+            {_?.[field]}
+          </SelectOption>
+        ))}
+      </Select>
+    </div>
+  );
+};
+
+export const renderRentalPeriod = (days, setDays) => {
+  const items = ['От 1 дня', 'До 365 дней'];
+
+  return (
+    <div className="mb-6">
+      <span className="block font-light text-m mb-[3px]">Срок аренды</span>
+      <InputRange min={1} max={365} value={days} items={items} onChange={setDays} />
+    </div>
+  );
+};
+
+const renderRadioButtons = (context) => {
+  const [selected, setSelected] = context.useState('option1');
+  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelected(_.target.value);
+
+  return (
+    <div>
+      <Radio
+        className="mb-2"
+        name="contractType"
+        text="Простое хранение"
+        value="option1"
+        checked={selected === 'option1'}
+        onChange={onChange}
+      />
+      <Radio
+        name="contractType"
+        text="Сделка с недвижимостью"
+        value="option2"
+        checked={selected === 'option2'}
+        onChange={onChange}
+      />
+    </div>
+  );
+};