Connect to StoreSelectModal

apps/app/src/screens/Profile.tsx

@@ -61,8 +61,8 @@ const Profile: React.FC = () => {
 				<ProfileRow title='About this app' onPress={noop} />
 				<ProfileRow title='Support' onPress={noop} />
 			</View>
-			<Spacer y={16} />
-			<View style={{ paddingHorizontal: 16, marginTop: 8 }}>
+			<Spacer y={24} />
+			<View style={{ paddingHorizontal: 16 }}>
 				<Button text='Log Out' onPress={logOut} />
 			</View>
 		</Screen>

apps/dashboard/src/components/store/StoreProfile.tsx

@@ -1,7 +1,9 @@
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { Typography, useTheme } from '@habiti/components';
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Pressable } from 'react-native';
 
+import StoreSelectModal from './StoreSelectModal';
 import { StoreQuery } from '../../types/api';
 
 interface StoreProfileProps {
@@ -10,19 +12,22 @@ interface StoreProfileProps {
 
 const StoreProfile: React.FC<StoreProfileProps> = ({ store }) => {
 	const { theme } = useTheme();
+	const modalRef = React.useRef<BottomSheetModal>(null);
 
 	return (
 		<View style={styles.container}>
-			<View
+			<Pressable
 				style={[styles.avatar, { backgroundColor: theme.image.placeholder }]}
+				onPress={() => modalRef.current?.present()}
 			>
 				<Typography weight='medium' size='xxxlarge' style={styles.avatarText}>
 					{store.name[0]}
 				</Typography>
-			</View>
+			</Pressable>
 			<Typography weight='medium' size='xxlarge' style={styles.name}>
 				{store.name}
 			</Typography>
+			<StoreSelectModal modalRef={modalRef} />
 		</View>
 	);
 };

apps/dashboard/src/components/store/StoreSelectModal.tsx

@@ -0,0 +1,43 @@
+import {
+	BottomSheetBackdrop,
+	BottomSheetModal,
+	BottomSheetView
+} from '@gorhom/bottom-sheet';
+import { Button, Spacer, Typography, useTheme } from '@habiti/components';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface StoreSelectModalProps {
+	modalRef: React.RefObject<BottomSheetModal>;
+}
+
+const StoreSelectModal: React.FC<StoreSelectModalProps> = ({ modalRef }) => {
+	const { theme } = useTheme();
+	const { bottom } = useSafeAreaInsets();
+
+	return (
+		<BottomSheetModal
+			ref={modalRef}
+			enableDynamicSizing
+			backdropComponent={props => (
+				<BottomSheetBackdrop
+					{...props}
+					pressBehavior='close'
+					disappearsOnIndex={-1}
+					appearsOnIndex={0}
+				/>
+			)}
+			handleIndicatorStyle={{ backgroundColor: theme.text.primary }}
+			backgroundStyle={{ backgroundColor: theme.screen.background }}
+		>
+			<BottomSheetView style={{ paddingBottom: bottom, paddingHorizontal: 16 }}>
+				<Typography size='xlarge' weight='medium'>
+					Select store
+				</Typography>
+				<Spacer y={16} />
+				<Button onPress={() => {}} text='Create new store' />
+			</BottomSheetView>
+		</BottomSheetModal>
+	);
+};
+
+export default StoreSelectModal;