From 4116b4b0a81bb95a45919b61bce03be4f6c4212f Mon Sep 17 00:00:00 2001 From: Richa Juvekar Date: Wed, 18 Sep 2024 17:52:11 -0400 Subject: [PATCH 01/13] created main map components + formatted for phone compatibility --- frontend/assets/dropdown.png | Bin 0 -> 149 bytes frontend/src/app/App.tsx | 747 ++------------------ frontend/src/components/FiltersDropdown.tsx | 43 ++ frontend/src/components/Header.tsx | 37 + frontend/src/components/Logo.tsx | 35 + frontend/src/components/Map.tsx | 21 + frontend/src/components/SearchBar.tsx | 41 ++ 7 files changed, 217 insertions(+), 707 deletions(-) create mode 100644 frontend/assets/dropdown.png create mode 100644 frontend/src/components/FiltersDropdown.tsx create mode 100644 frontend/src/components/Header.tsx create mode 100644 frontend/src/components/Logo.tsx create mode 100644 frontend/src/components/Map.tsx create mode 100644 frontend/src/components/SearchBar.tsx diff --git a/frontend/assets/dropdown.png b/frontend/assets/dropdown.png new file mode 100644 index 0000000000000000000000000000000000000000..a351225e54ed4701ddd51f530e014db7df523088 GIT binary patch literal 149 zcmeAS@N?(olHy`uVBq!ia0vp^AT}!p8<4C?sm%aVoCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzLuwpV@L&K@2Ty)3=AC1j{WDJE#W%3Wcog9 p27&ng!zrH}rPZ!H6b$t_!N6W2@%B=SUj { - const [whatsNextYCoord, setWhatsNextYCoord] = useState(0); - const scrollViewRef = useRef(null); +import SearchBar from '../components/SearchBar'; +import Header from '../components/Header'; +import Logo from '../components/Logo'; +import Map from '../components/Map'; +import FiltersDropdown from '../components/FiltersDropdown'; +export const App = () => { return ( <> - - { - scrollViewRef.current = ref; - }} - contentInsetAdjustmentBehavior="automatic" - style={styles.scrollView} - > - - Hello there, - - Welcome Frontend 👋 - - - - - - - - - - You're up and running - - - { - scrollViewRef.current?.scrollTo({ - x: 0, - y: whatsNextYCoord, - }); - }} - > - - What's next? - - - + + + + - - - - Learning materials - - - Linking.openURL( - 'https://nx.dev/getting-started/intro?utm_source=nx-project' - ) - } - > - - - - - Documentation - - Everything is in there - - - - - - - - Linking.openURL('https://nx.dev/blog/?utm_source=nx-project') - } - > - - - - - Blog - - Changelog, features & events - - - - - - - - Linking.openURL( - 'https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project' - ) - } - > - - - - - Youtube channel - - Nx Show, talks & tutorials - - - - - - - - Linking.openURL( - 'https://nx.dev/nx-api/expo/documents/overview' - ) - } - > - - - - - Interactive tutorials - - Create an app, step by step - - - - - - - + + - - - Linking.openURL('https://nx.dev/nx-cloud?utm_source=nx-project') - } - > - - - - - - - Nx is open source - - - Love Nx? Give us a star! - - - - + +
- - - Linking.openURL( - 'https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project' - ) - } - > - - - - - - - Install Nx Console for VSCode - - - The official VSCode extension for Nx. - - - - + + - - - - Linking.openURL( - 'https://plugins.jetbrains.com/plugin/21060-nx-console' - ) - } - > - - - - - - - - - - - - - - - - - - - Install Nx Console for JetBrains - - - Available for WebStorm, Intellij IDEA Ultimate and more! - - - - - - - - - - - - - - - Nx Cloud - - - Enable faster CI & better DX - - - - - - Your Nx Cloud remote cache setup is almost complete. - - - { - Linking.openURL(''); - }} - > - - Click here to finish - - - - - - { - const layout = event.nativeEvent.layout; - setWhatsNextYCoord(layout.y); - }} - > - - - Next steps - - - Here are some things you can do with Nx: - - - - - - - - Build, test and lint your app - - - - - - # Build - - - nx build Frontend - - - # Test - - - nx test Frontend - - - # Lint - - - nx lint Frontend - - - # Run them together! - - - nx run-many -p Frontend -t build test lint - - - - - - - - - View project details - - - - - nx show project Frontend - - - - - - - - - View interactive project graph - - - - - nx graph - - - - - - - Add UI library - - - - - # Generate UI lib - - - nx g @nx/react-native:lib ui - - - # Add a component - - nx g \ - - @nx/react-native:component \ - - - ui/src/lib/button - - - - - Carefully crafted with - - - - + + ); }; + const styles = StyleSheet.create({ - scrollView: { + safeArea: { + flex: 1, backgroundColor: '#ffffff', }, - codeBlock: { - backgroundColor: 'rgba(55, 65, 81, 1)', - marginVertical: 12, - padding: 12, - borderRadius: 4, - }, - monospace: { - color: '#ffffff', - fontFamily: 'Courier New', - marginVertical: 4, - }, - comment: { - color: '#cccccc', - }, - marginBottomSm: { - marginBottom: 6, - }, - marginBottomMd: { - marginBottom: 18, - }, - marginBottomLg: { - marginBottom: 24, - }, - textLight: { - fontWeight: '300', - }, - textBold: { - fontWeight: '500', - }, - textCenter: { - textAlign: 'center', - }, - text2XS: { - fontSize: 12, - }, - textXS: { - fontSize: 14, - }, - textSm: { - fontSize: 16, + logoContainer: { + alignItems: 'flex-start', + paddingHorizontal: 20, + paddingTop: 11, + paddingBottom: 18, }, - textMd: { - fontSize: 18, - }, - textLg: { - fontSize: 24, - }, - textXL: { - fontSize: 48, - }, - textContainer: { - marginVertical: 12, - }, - textSubtle: { - color: '#6b7280', - }, - section: { - marginVertical: 12, - marginHorizontal: 12, - }, - shadowBox: { - backgroundColor: 'white', - borderRadius: 24, - shadowColor: 'black', - shadowOpacity: 0.15, - shadowOffset: { - width: 1, - height: 4, - }, - shadowRadius: 12, - padding: 24, - marginBottom: 24, - }, - listItem: { - display: 'flex', - flexDirection: 'row', + searchBarContainer: { alignItems: 'center', + paddingHorizontal: 13, + paddingBottom: 22, }, - listItemTextContainer: { - marginLeft: 12, - flex: 1, - }, - appTitleText: { - paddingTop: 12, - fontWeight: '500', - }, - hero: { - borderRadius: 12, - backgroundColor: '#143055', - padding: 36, - marginBottom: 24, - }, - heroTitle: { - flex: 1, - flexDirection: 'row', - }, - heroTitleText: { - color: '#ffffff', - marginLeft: 12, - }, - heroText: { - color: '#ffffff', - marginVertical: 12, - }, - - connectToCloudButton: { - backgroundColor: 'rgba(20, 48, 85, 1)', - paddingVertical: 10, - borderRadius: 8, - marginTop: 16, - width: '50%', - }, - - connectToCloudButtonText: { - color: '#ffffff', - }, - whatsNextButton: { - backgroundColor: '#ffffff', - paddingVertical: 16, - borderRadius: 8, - width: '50%', - marginTop: 24, + headerContainer: { + alignItems: 'center', + paddingHorizontal: 25, + paddingBottom: 30, }, - learning: { - marginVertical: 12, + filtersDropdownContainer: { + alignItems: 'flex-start', + paddingHorizontal: 13, + paddingBottom: 12, }, - love: { - marginTop: 12, - justifyContent: 'center', + mapContainer: { + width: '100%', }, }); diff --git a/frontend/src/components/FiltersDropdown.tsx b/frontend/src/components/FiltersDropdown.tsx new file mode 100644 index 0000000..9eaff40 --- /dev/null +++ b/frontend/src/components/FiltersDropdown.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { StyleSheet, View, Text, TouchableOpacity, Image } from 'react-native'; + +const FiltersDropdown = () => { + return ( + + Filters + + + ); +}; + +const styles = StyleSheet.create({ + filtersDropdown: { + width: 82, + height: 28, + backgroundColor: '#FFFFFF', + borderRadius: 4, + borderWidth: 1, + borderColor: '#000000', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'row', + }, + filtersText: { + fontFamily: 'Inter', + fontSize: 13, + fontWeight: '400', + lineHeight: 15.73, + color: '#000000', + textAlign: 'center', + marginRight: 8, + }, + dropdownIcon: { + width: 10, + height: 5, + }, +}); + +export default FiltersDropdown; diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx new file mode 100644 index 0000000..d824561 --- /dev/null +++ b/frontend/src/components/Header.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Text, StyleSheet, View } from 'react-native'; + +const Header = () => { + return ( + + Map + Brief description of map features + + ); +}; + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + width: '100%', + }, + headerText: { + fontFamily: 'Inter', + fontSize: 36, + fontWeight: '400', + lineHeight: 43.57, + textAlign: 'center', + color: '#1E1E1E', + marginBottom: 9, + }, + headerDescription: { + fontFamily: 'Inter', + fontSize: 15, + fontWeight: '400', + lineHeight: 18.15, + textAlign: 'center', + color: '#1E1E1E', + }, +}); + +export default Header; diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx new file mode 100644 index 0000000..8b0e65b --- /dev/null +++ b/frontend/src/components/Logo.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { StyleSheet, View, Text } from 'react-native'; + +const Logo = () => { + return ( + + + BAGLY + + ); +}; + +const styles = StyleSheet.create({ + container: { + width: 85, + height: 30, + flexDirection: 'row', // align logo image + text + }, + logoImage: { + width: 24, + height: 24, + backgroundColor: '#E2E2E2', + borderRadius: 12, + }, + text: { + marginLeft: 8, + fontFamily: 'Inter', + fontSize: 16, + fontWeight: '500', + lineHeight: 30, + color: '#000000', + }, +}); + +export default Logo; diff --git a/frontend/src/components/Map.tsx b/frontend/src/components/Map.tsx new file mode 100644 index 0000000..98c281f --- /dev/null +++ b/frontend/src/components/Map.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; + +const Map = () => { + return ( + + ); +}; + +const styles = StyleSheet.create({ + mapRectangle: { + alignItems: 'center', + justifyContent: 'flex-start', + width: '100%', + height: 562, + backgroundColor: '#D9D9D9', + borderRadius: 10, + }, +}); + +export default Map; diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx new file mode 100644 index 0000000..b0ec402 --- /dev/null +++ b/frontend/src/components/SearchBar.tsx @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import { TextInput, StyleSheet, View } from 'react-native'; + +const SearchBar = () => { + const [isTyping, setIsTyping] = useState(false); + + return ( + + setIsTyping(text.length > 0)} + /> + + ); +}; + +const styles = StyleSheet.create({ + searchBar: { + width: 360, + height: 41, + borderRadius: 11, + borderWidth: 1, + borderColor: '#000000', + backgroundColor: '#FFFFFF', + }, + searchInput: { + flex: 1, + fontFamily: 'Inter', + fontSize: 16, + fontWeight: '500', + color: '#00000099', + paddingLeft: 17, + paddingRight: 17, + lineHeight: 19.36, + opacity: 0.6, + }, +}); + +export default SearchBar; From 300b637eef3e14bd5d2920ea5266240a1c1b7de0 Mon Sep 17 00:00:00 2001 From: Richa Juvekar Date: Sun, 22 Sep 2024 19:40:29 -0400 Subject: [PATCH 02/13] added apple maps to app + basic markers from react native maps --- .idea/workspace.xml | 69 ++++++++++++++++++++++++-------- frontend/src/app/App.tsx | 1 - frontend/src/components/Logo.tsx | 1 + frontend/src/components/Map.tsx | 52 ++++++++++++++++++++---- package-lock.json | 52 ++++++++++++++++++++++++ package.json | 2 + 6 files changed, 152 insertions(+), 25 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 262cb88..f1c5497 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -4,30 +4,45 @@