Screens for searching the explore page (#80)

Co-authored-by: aravgoyal <[email protected]>
Co-authored-by: Ryan Saperstein <[email protected]>

frontend/babel.config.js

@@ -1,17 +1,17 @@
-module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo', '@babel/preset-typescript'],
-    plugins: [
-      '@babel/plugin-transform-react-jsx',
-      'nativewind/babel',
-      [
-        'module:react-native-dotenv',
-        {
-          moduleName: '@env',
-          path: '.env',
-        },
-      ],
-    ],
-  };
-};
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo', '@babel/preset-typescript'],
+    plugins: [
+      '@babel/plugin-transform-react-jsx',
+      'nativewind/babel',
+      [
+        'module:react-native-dotenv',
+        {
+          moduleName: '@env',
+          path: '.env',
+        },
+      ],
+    ],
+  };
+};

frontend/src/components/Card.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-import { View, ViewProps } from 'react-native';
-import { styled } from 'nativewind';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-const StyledView = styled(View);
-
-const cardVariants = cva('bg-white rounded-[16px] border border-border p-4', {
-  variants: {},
-  defaultVariants: {},
-});
-
-interface CardProps extends ViewProps, VariantProps<typeof cardVariants> {
-  children: React.ReactNode;
-}
-
-export function Card({ children, className, ...props }: CardProps & { className?: string }) {
-  return (
-    <StyledView className={`${cardVariants()} ${className || ''}`} {...props}>
-      {children}
-    </StyledView>
-  );
-}
-
-export default Card;
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import { styled } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const StyledView = styled(View);
+
+const cardVariants = cva('bg-white rounded-[16px] border border-border p-4', {
+  variants: {},
+  defaultVariants: {},
+});
+
+interface CardProps extends ViewProps, VariantProps<typeof cardVariants> {
+  children: React.ReactNode;
+}
+
+export function Card({ children, className, ...props }: CardProps & { className?: string }) {
+  return (
+    <StyledView className={`${cardVariants()} ${className || ''}`} {...props}>
+      {children}
+    </StyledView>
+  );
+}
+
+export default Card;

frontend/src/components/Divider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Image, ImageSourcePropType } from 'react-native';
 import { styled } from 'nativewind';
-import { CaptionText } from './Typography';
+import { CaptionText } from './typography';
 
 const StyledView = styled(View);
 const StyledImage = styled(Image);

frontend/src/components/SearchBar.tsx

@@ -37,27 +37,35 @@ const iconVariants = {
   'search-disabled': require('../../assets/images/search-icon-disabled.png'),
 };
 
-const { height: screenHeight } = Dimensions.get('window');
-const calculatedWidth = (239 / 1000) * screenHeight;
-const calculatedHeight = (42 / 1000) * screenHeight;
+
 
 type SearchBarProps = VariantProps<typeof searchBarVariants> & {
   value: string;
   onValueChange: (text: string) => void;
   onPressed: (event: GestureResponderEvent) => void;
+  onSubmit: (event: GestureResponderEvent) => void;
   intent: string;
   icon: string;
   textColor: string;
+  width: number;
+  height: number;
 };
 
 const SearchBar: React.FC<SearchBarProps> = ({
   value,
   intent,
   icon,
   textColor,
+  width,
+  height,
   onValueChange,
   onPressed,
+  onSubmit,
 }) => {
+
+const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
+const calculatedWidth = (width / 100) * screenWidth;
+const calculatedHeight = (height / 100) * screenHeight;
   return (
     <StyledView
       className={searchBarVariants({ intent, icon })}
@@ -69,6 +77,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
         placeholder={value}
         placeholderTextColor={textColor}
         onChangeText={onValueChange}
+        onSubmitEditing={onSubmit}
       />
       <StyledPressable className='ml-2' onPress={onPressed}>
         <StyledImage source={iconVariants[icon || 'clear']} style={{ width: 14, height: 14 }} />