@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.72

package/src/components/ComparisonTable/HeaderCell.mobile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import { Img } from '../../ui-kit/Img/Img';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
 
 export interface HeaderCellProps {
   icon?: Picture;
@@ -13,6 +13,10 @@ export interface HeaderCellProps {
   link?: LinkProps;
 }
 
+const headingStyle = (isFillGradient = false): string => (isFillGradient ? 'text-white' : '');
+const subtitleStyle = (isFillGradient = false): string =>
+  `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
+
 export const HeaderCell = JSX<HeaderCellProps>(
   ({ icon, image, title, subtitle, isFillGradient }) => (
     <div role="columnheader" scope="col">
@@ -30,19 +34,9 @@ export const HeaderCell = JSX<HeaderCellProps>(
         </div>
       )}
       {title ? (
-        <Heading
-          headingType="h4"
-          className={`${isFillGradient ? 'text-white' : ''}`}
-          title={title}
-        />
-      ) : null}
-      {subtitle ? (
-        <div
-          className={`text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`}
-        >
-          {subtitle}
-        </div>
+        <Heading headingType="h4" className={headingStyle(isFillGradient)} title={title} />
       ) : null}
+      {subtitle ? <div className={subtitleStyle(isFillGradient)}>{subtitle}</div> : null}
     </div>
   ),
 );

package/src/components/ComparisonTable/TableCell.tsx

@@ -28,17 +28,14 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
   );
 });
 
+const labelStyle = (isFillGradient = false): string =>
+  `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`;
+const descriptionStyle = (isFillGradient = false): string =>
+  `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
+
 const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
   <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
-    {label ? (
-      <h4 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h4>
-    ) : null}
-    {description ? (
-      <div
-        className={`text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`}
-      >
-        {description}
-      </div>
-    ) : null}
+    {label ? <h4 className={labelStyle(isFillGradient)}>{label}</h4> : null}
+    {description ? <div className={descriptionStyle(isFillGradient)}>{description}</div> : null}
   </div>
 );

package/src/components/ComparisonTable/TableRow.tsx

@@ -14,18 +14,15 @@ export interface TableRowProps {
   isLastRow: boolean;
 }
 
+const titleStyle = (isLastRow = false) =>
+  `text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
+    isLastRow ? 'border-b-0' : 'border-solid'
+  }`;
+
 export const TableRow = JSX<TableRowProps>(
   ({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
     <TableRowContainer>
-      {header?.title ? (
-        <div
-          className={`text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
-            !isLastRow ? 'border-solid' : 'border-b-0'
-          }`}
-        >
-          {header.title}
-        </div>
-      ) : null}
+      {header?.title ? <div className={titleStyle(isLastRow)}>{header.title}</div> : null}
       {data?.length ? (
         <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
           {data.map((cell, i) => (

package/src/components/ContentPage/ContentPage.fixture.mobile.tsx

@@ -1,4 +1,4 @@
-import { mobileContext } from '../../setup-fixture';
+import { mobileContext } from '../../react/setup-fixture';
 
 import type { ContentPageDef } from '../../types';
 import { Blocks } from '../Blocks';

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import type { ContentPageDef } from '../../types';
 import { Blocks } from '../Blocks';

package/src/components/ContentPage/ContentPage.page.json

@@ -1457,7 +1457,7 @@
       "anchor": "documents",
       "content": {
         "title": "Дополнительные документы",
-        "subtitle": "Ответы на часто задаваемые вопросы",
+        "description": "Ответы на часто задаваемые вопросы",
         "icon": {
           "icon": "DocIcon"
         },
@@ -1953,11 +1953,6 @@
         }
       }
     },
-    {
-      "type": "CreditCalculator",
-      "anchor": "calculator",
-      "style": ["col-span-12"]
-    },
     {
       "type": "Recommendation",
       "style": ["col-span-12"],

package/src/components/ContentPage/ContentPageContext.tsx

@@ -1,3 +1,6 @@
+import { VNode } from '../../model/VNode';
+import type { FuncReturnVoid } from '../../types';
+
 export interface Router {
   pathname: string;
   query: Record<string, string | string[] | undefined>;
@@ -20,19 +23,36 @@ export interface Search {
   setTerm: (t: string) => void;
 }
 
-export type AsyncDataHook = <Data, Error = any>(
+export type AsyncDataHook = <Data, Err = any>(
   key: string,
-  fetcher: (key: string) => Promise<Data>,
-) => { data?: Data; error?: Error };
+  fetcher: (fetcherKey: string) => Promise<Data>,
+) => { data?: Data; error?: Err };
 
 export type GeolocationHook = (defaultLocation: string) => [string, () => void];
 
+export type SetStateAction<S> = S | ((prevState: S) => S);
+export type SetStateHook = <State>(
+  initialState: State | (() => State),
+) => [State, FuncReturnVoid<SetStateAction<State>>];
+
+export interface IntersectionObserverTagProps {
+  Tag: string;
+  children?: VNode;
+  observerCallback: IntersectionObserverCallback;
+  observerOptions?: IntersectionObserverInit;
+}
+
+export type IntersectionObserverComponent = (
+  props: IntersectionObserverTagProps & Record<string, any>,
+) => VNode;
+
 export interface ContentPageContext {
   useRouter: () => Router;
-  useState: <State>(initialState: State) => [State, (_: State) => void];
+  useState: SetStateHook;
   useAsyncData: AsyncDataHook;
   useGeolocation: GeolocationHook;
   useLikeService: () => LikeService;
   useSearch: () => Search;
   handlerDecorator?: HandlerDecorator;
+  IntersectionObserverTag: IntersectionObserverComponent;
 }

package/src/components/ExchangeRateTile/CurrencyProps.ts

@@ -0,0 +1,5 @@
+export enum Currency {
+  RUB = 'RUB',
+  EUR = 'EUR',
+  USD = 'USD',
+}

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
-import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
+import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
@@ -31,7 +31,7 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 });
 
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
-  const code = exchangeCurrencyItem?.currency?.currency;
+  const code = exchangeCurrencyItem?.code;
   return (
     <tr key={code} className="pb-1">
       <td className="pt-4">
@@ -41,10 +41,10 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
         </div>
       </td>
       <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.buyExchangeRate)}
+        {formatCurrency(exchangeCurrencyItem.buy)}
       </td>
       <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.saleExchangeRate)}
+        {formatCurrency(exchangeCurrencyItem.sell)}
       </td>
     </tr>
   );

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,47 +1,132 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
-import { Input } from '../../ui-kit/Input/Input';
-import { Select } from '../../ui-kit/Select/Select';
-import { SelectOption } from '../../ui-kit/Select/SelectOption';
-import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
-
-export interface ExchangeCurrencyCalculatorProps {
-  exchangeCurrencyItems: ExchangeCurrencyItem[];
-  codes: string[];
+import type { FuncReturnVoid, UniBlockProps } from '../../types';
+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;
+  sell?: number;
+}
+export interface ExchangeCurrencyCalculatorProps extends UniBlockProps {
   className?: string;
+  currencyRatesBuy: ExchangeCurrencyItem[];
+  currencyRatesSell: ExchangeCurrencyItem[];
+}
+export interface CalcState {
+  inputSell: string;
+  inputBuy: string;
+  selectSell: Currency;
+  selectBuy: Currency;
 }
 
 export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
-  ({ codes, className = '' }) => {
+  ({ context, className = '', currencyRatesBuy, currencyRatesSell }) => {
+    const [calcState, setCalcState] = context.useState<CalcState>({
+      inputSell: '',
+      inputBuy: '',
+      selectSell: currencyRatesBuy?.[0]?.code || Currency.RUB,
+      selectBuy: currencyRatesSell?.[0]?.code || Currency.USD,
+    });
+
+    const handleSetCalcState = (newState: Partial<CalcState>) => {
+      setCalcState((oldState) => ({ ...oldState, ...newState }));
+    };
+
     return (
       <div className={`grid gap-3.5 ${className}`}>
-        {renderInput('Хочу продать', codes)}
-        {renderInput('Получу', codes, 'USD')}
-        <Button className="box-border mt-3.5 py-3 h-12 w-full" version="primary" href="#">
-          Купить валюту
-        </Button>
+        {renderInput({
+          placeholder: 'Хочу продать',
+          rates: currencyRatesBuy,
+          selected: calcState.selectSell,
+          setSelected: handleSelectSell(calcState, handleSetCalcState, currencyRatesSell),
+          value: calcState.inputSell,
+          setValue: (value) =>
+            handleInputSell(handleSetCalcState, currencyRatesSell)(
+              value,
+              calcState.selectSell,
+              calcState.selectBuy,
+            ),
+        })}
+        {renderInput({
+          placeholder: 'Получу',
+          rates: currencyRatesSell,
+          selected: calcState.selectBuy,
+          setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
+          value: calcState.inputBuy,
+          setValue: (value) =>
+            handleInputBuy(handleSetCalcState, currencyRatesBuy)(
+              value,
+              calcState.selectBuy,
+              calcState.selectSell,
+            ),
+        })}
+        {renderButton()}
       </div>
     );
   },
 );
 
-function renderInput(placeholder: string, codes: string[], selected?: string) {
-  return (
-    <div className="relative flex items-center">
-      <Input
-        className="h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12"
-        type="number"
-        placeholder={`${placeholder}`}
-      />
-      {codes.length ? (
-        <Select className="h-9 -translate-x-4">
-          {codes.map((code, i) => (
-            <SelectOption key={String(i)} value={code} selected={code === selected}>
-              {code}
-            </SelectOption>
-          ))}
-        </Select>
-      ) : null}
-    </div>
-  );
-}
+const handleSelectSell =
+  (
+    calcState: CalcState,
+    setCalcState: FuncReturnVoid<Partial<CalcState>>,
+    currencyRatesSell: ExchangeCurrencyItem[],
+  ) =>
+  (value: Currency) => {
+    setCalcState({ selectSell: value });
+    callbackCurrencySelect({
+      value,
+      oppositeValue: calcState.selectBuy,
+      handleConvert: (codeFrom = calcState.selectSell, codeTo = calcState.selectBuy) => {
+        handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, codeFrom, codeTo);
+      },
+    });
+  };
+
+const handleSelectBuy =
+  (
+    calcState: CalcState,
+    setCalcState: FuncReturnVoid<Partial<CalcState>>,
+    currencyRatesBuy: ExchangeCurrencyItem[],
+  ) =>
+  (value: Currency) => {
+    setCalcState({ selectBuy: value });
+    callbackCurrencySelect({
+      value,
+      oppositeValue: calcState.selectSell,
+      handleConvert: (codeTo = calcState.selectBuy, codeFrom = calcState.selectSell) =>
+        handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, codeTo, codeFrom),
+    });
+  };
+
+const handleInputSell =
+  (setCalcState: FuncReturnVoid<Partial<CalcState>>, currencyRatesSell: ExchangeCurrencyItem[]) =>
+  (value: string, codeFrom: Currency, codeTo: Currency) => {
+    setCalcState({ inputSell: formatValue(value), selectBuy: codeTo });
+    const rate =
+      currencyRatesSell.find((_) => _.code === codeTo)?.buy ||
+      currencyRatesSell.find((_) => _.code === codeFrom)?.sell;
+    if (rate) {
+      setCalcState({
+        inputBuy: String(calculateResult(value, rate, codeFrom === Currency.RUB) || ''),
+      });
+    }
+  };
+
+const handleInputBuy =
+  (setCalcState: FuncReturnVoid<Partial<CalcState>>, currencyRatesBuy: ExchangeCurrencyItem[]) =>
+  (value: string, codeTo: Currency, codeFrom: Currency) => {
+    setCalcState({ inputBuy: formatValue(value), selectSell: codeFrom });
+    const rate =
+      currencyRatesBuy.find((_) => _.code === codeFrom)?.sell ||
+      currencyRatesBuy.find((_) => _.code === codeTo)?.buy;
+    if (rate) {
+      setCalcState({
+        inputSell: String(calculateResult(value, rate, codeTo === Currency.RUB) || ''),
+      });
+    }
+  };

package/src/components/ExchangeRateTile/ExchangeRateTile.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { ExchangeRateTile } from './ExchangeRateTile';
 

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -4,26 +4,12 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import { Currency } from './CurrencyProps';
 import { CurrencyTable } from './CurrencyTable';
 import { CurrentLocation } from './CurrentLocation';
 import { ExchangeCurrencyCalculator } from './ExchangeCurrencyCalculator';
 import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
 
-const CURRENCY_CODES = ['USD', 'EUR'];
-const EXCHANGE_CODES = ['RUB', 'USD', 'EUR'];
-const DEFAULT_CURRENCY_ITEMS = [
-  {
-    buyExchangeRate: 90.6,
-    saleExchangeRate: 92.8,
-    currency: { id: 2, code: '978', currency: 'EUR', name: 'Евро' },
-  },
-  {
-    buyExchangeRate: 73.75,
-    saleExchangeRate: 75.95,
-    currency: { id: 1, code: '840', currency: 'USD', name: 'Американский доллар' },
-  },
-];
-
 const DEFAULT_LOCATION = {
   address: 'Москва, ул.Ленина д.28',
   distance: '6км',
@@ -33,11 +19,13 @@ export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlock
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   ({ className = '', context, title = 'Курсы обмена валют', anchor = null }) => {
-    const data = useExchangeRates(context.useAsyncData);
-    const exchangeCurrencyItems =
-      data?.exchangeRate?.currencies?.filter((item) => {
-        return CURRENCY_CODES.indexOf(item?.currency?.currency || '') !== -1;
-      }) || DEFAULT_CURRENCY_ITEMS;
+    const currencyRates = useExchangeRates(context.useAsyncData);
+
+    const currencyRatesBuy = currencyRates.filter((_) => _.buy);
+    currencyRatesBuy.unshift({ code: Currency.RUB });
+
+    const currencyRatesSell = currencyRates.filter((_) => _.sell);
+    currencyRatesSell.push({ code: Currency.RUB });
 
     return (
       <section
@@ -56,19 +44,17 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
         >
           <div className="flex">
             <div className="mr-[43px] pt-4">
-              {exchangeCurrencyItems ? (
-                <CurrencyTable
-                  className="mb-[31px]"
-                  exchangeCurrencyItems={exchangeCurrencyItems}
-                />
+              {currencyRates ? (
+                <CurrencyTable className="mb-[31px]" exchangeCurrencyItems={currencyRates} />
               ) : null}
               <CurrentLocation {...DEFAULT_LOCATION} />
             </div>
-            {exchangeCurrencyItems?.length ? (
+            {currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (
               <ExchangeCurrencyCalculator
                 className="grow"
-                exchangeCurrencyItems={exchangeCurrencyItems}
-                codes={EXCHANGE_CODES}
+                context={context}
+                currencyRatesBuy={currencyRatesBuy}
+                currencyRatesSell={currencyRatesSell}
               />
             ) : null}
           </div>

package/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -4,14 +4,3 @@ import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
  * @title Курсы валют
  */
 export type ExchangeRateTileContent = HeadingContent;
-
-export interface ExchangeCurrencyItem {
-  buyExchangeRate?: number;
-  saleExchangeRate?: number;
-  currency?: {
-    id?: number;
-    code?: string;
-    currency?: string;
-    name?: string;
-  };
-}

package/src/components/ExchangeRateTile/calculateResult.ts

@@ -0,0 +1,8 @@
+import { roundTo } from '../../utils/roundTo';
+
+export const calculateResult = (value: string, rate: number, precision: boolean) => {
+  const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+  return Number.isInteger(result) ? result : roundTo(result);
+};
+
+export const formatValue = (value: string) => value.replace(/[^\d.,]/g, '').replace(',', '.');

package/src/components/ExchangeRateTile/callbackCurrencySelect.ts

@@ -0,0 +1,21 @@
+import { tableFunc } from '../../utils/tableFunc';
+import { Currency } from './CurrencyProps';
+
+interface TableFuncProps {
+  value: Currency;
+  oppositeValue: Currency;
+  handleConvert: (codeFrom?: Currency, codeTo?: Currency) => void;
+}
+
+export const callbackCurrencySelect = (props: TableFuncProps) =>
+  tableFunc<TableFuncProps, () => void>([
+    [
+      (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
+      () => props.handleConvert(props.value, Currency.RUB),
+    ],
+    [
+      (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
+      () => props.handleConvert(props.value, Currency.USD),
+    ],
+    [() => true, () => props.handleConvert(props.value)],
+  ])(props)?.();

package/src/components/ExchangeRateTile/formatCurrency.ts

@@ -1,3 +1,8 @@
-const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
+import { Currency } from './CurrencyProps';
+
+const currencyNumberFormat = new Intl.NumberFormat('ru', {
+  style: 'currency',
+  currency: Currency.RUB,
+});
 
 export const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');

package/src/components/ExchangeRateTile/renderButton.tsx

@@ -0,0 +1,14 @@
+import { Button } from '../../ui-kit/Button/Button';
+
+export function renderButton() {
+  return (
+    <Button
+      className="box-border mt-3.5 py-3 h-12 w-full"
+      version="primary"
+      href="https://coins.rshb.ru/exchange"
+      target="_blank"
+    >
+      Купить валюту
+    </Button>
+  );
+}

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -0,0 +1,43 @@
+import { Input } from '../../ui-kit/Input/Input';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import type { Currency } from './CurrencyProps';
+import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
+
+interface InputProps {
+  placeholder: string;
+  rates: ExchangeCurrencyItem[];
+  selected: string;
+  setSelected: (value: Currency) => void;
+  value: string;
+  setValue: (value: string) => void;
+}
+
+export function renderInput(props: InputProps) {
+  const { placeholder, rates, selected, value, setValue, setSelected } = props;
+
+  return (
+    <div className="relative flex items-center">
+      <Input
+        className="h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12"
+        placeholder={placeholder}
+        type="text"
+        value={value}
+        onChange={setValue}
+      />
+      {rates.length ? (
+        <Select
+          className="h-9 -translate-x-4"
+          value={selected}
+          onChange={(_) => setSelected(_ as Currency)}
+        >
+          {rates.map((_, i) => (
+            <SelectOption key={String(i)} value={_.code}>
+              {_.code}
+            </SelectOption>
+          ))}
+        </Select>
+      ) : null}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Footer } from './Footer';
 
 const DEFAULT_ORIGIN = 'https://rshb.ru/';

package/src/components/Footer/Footer.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Footer } from './Footer';
 
 const DEFAULT_ORIGIN = 'https://rshb.ru/';

package/src/components/Footer/Footer.tsx

@@ -26,7 +26,7 @@ export const Footer = JSX<FooterProps>(
     anchor = null,
   }) => {
     return (
-      <footer className={`px-9 pt-9 pb-10 bg-white ${className || ''}`} id={anchor}>
+      <footer className={`p-9 bg-white ${className || ''}`} id={anchor}>
         <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
           <Logo className={LEFT_COL_WIDTH_FULL_HD} />
           <SearchBar context={context} className="grow" />