feat(suite-native): Create generic picker header component

suite-native/module-trading/src/components/general/PickerCloseButton.tsx

@@ -0,0 +1,13 @@
+import { Button, ButtonProps } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
+
+export type PickerCloseButtonProps = Omit<
+    ButtonProps,
+    'children' | 'colorScheme' | 'viewLeft' | 'viewRight'
+>;
+
+export const PickerCloseButton = (props: PickerCloseButtonProps) => (
+    <Button colorScheme="tertiaryElevation0" {...props}>
+        <Translation id="generic.buttons.close" />
+    </Button>
+);

suite-native/module-trading/src/components/general/PickerHeader.tsx

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+
+import { HStack, SearchInput, Text, VStack } from '@suite-native/atoms';
+
+export type PickerHeaderProps = {
+    title: string | ReactNode;
+    children?: ReactNode;
+} & (
+    | {
+          isSearchInputVisible?: false;
+          onSearchInputChange?: never;
+          searchInputPlaceholder?: never;
+          isSearchInputDisabled?: never;
+          maxSearchInputLength?: never;
+      }
+    | {
+          isSearchInputVisible: true;
+          onSearchInputChange: (value: string) => void;
+          searchInputPlaceholder?: string;
+          isSearchInputDisabled?: boolean;
+          maxSearchInputLength?: number;
+      }
+);
+
+export const PickerHeader = ({
+    title,
+    isSearchInputVisible,
+    children,
+    maxSearchInputLength,
+    searchInputPlaceholder,
+    isSearchInputDisabled,
+    onSearchInputChange,
+}: PickerHeaderProps) => (
+    <VStack spacing="sp16">
+        <HStack justifyContent="space-between" alignItems="center">
+            <Text variant="titleMedium" textAlign="left">
+                {title}
+            </Text>
+            {children}
+        </HStack>
+        {isSearchInputVisible && (
+            <SearchInput
+                onChange={onSearchInputChange}
+                maxLength={maxSearchInputLength}
+                placeholder={searchInputPlaceholder}
+                isDisabled={isSearchInputDisabled}
+            />
+        )}
+    </VStack>
+);

suite-native/module-trading/src/components/general/__tests__/PickerHeader.comp.test.tsx

@@ -0,0 +1,38 @@
+import { render, fireEvent } from '@suite-native/test-utils';
+import { Text } from '@suite-native/atoms';
+
+import { PickerHeader } from '../PickerHeader';
+
+describe('PickerHeader', () => {
+    it('should render without children', () => {
+        const { getByText } = render(<PickerHeader title="Title" />);
+        expect(getByText('Title')).toBeDefined();
+    });
+
+    it('should render with children', () => {
+        const { getByText } = render(
+            <PickerHeader title="Title">
+                <Text>Child</Text>
+            </PickerHeader>,
+        );
+        expect(getByText('Title')).toBeDefined();
+        expect(getByText('Child')).toBeDefined();
+    });
+
+    it('should render search input when `isSearchInputVisible`', () => {
+        const searchInputSpy = jest.fn();
+        const { getByPlaceholderText } = render(
+            <PickerHeader
+                title="Title"
+                isSearchInputVisible
+                onSearchInputChange={searchInputSpy}
+                searchInputPlaceholder="Search placeholder"
+            />,
+        );
+        const searchInput = getByPlaceholderText('Search placeholder');
+
+        fireEvent.changeText(searchInput, 'search');
+
+        expect(searchInputSpy).toHaveBeenCalledWith('search');
+    });
+});