diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/client/App.tsx b/client/App.tsx index 4c5df12..eb210bc 100644 --- a/client/App.tsx +++ b/client/App.tsx @@ -1,24 +1,19 @@ -import { StyleSheet, View } from "react-native"; +import { StyleSheet, ScrollView } from "react-native"; import "./global.css"; -import TestingScreen from "./screens/TestingScreen"; +import Home from "./screens/home"; export default function App() { return ( - - - + + + + ); } - -// className="flex-1 bg-white items-stretch justify-center" - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: "#fff", - alignItems: "center", - justifyContent: "center", - }, -}); \ No newline at end of file diff --git a/client/assets/ellipse-left.png b/client/assets/ellipse-left.png new file mode 100644 index 0000000..1493e3d Binary files /dev/null and b/client/assets/ellipse-left.png differ diff --git a/client/assets/ellipse-right.png b/client/assets/ellipse-right.png new file mode 100644 index 0000000..6a3c55c Binary files /dev/null and b/client/assets/ellipse-right.png differ diff --git a/client/components/Button.tsx b/client/components/Button.tsx index f87e5aa..db5b48b 100644 --- a/client/components/Button.tsx +++ b/client/components/Button.tsx @@ -2,18 +2,20 @@ import { Text, TouchableOpacity, View } from "react-native"; type ButtonProps = { label: string; + color?: string; + className?: string ; onPress: () => void; }; -export default function Button({ label, onPress }: ButtonProps) { +export default function Button({ label, className, color, onPress }: ButtonProps) { return ( - {label} + {label} ); diff --git a/client/components/Card.tsx b/client/components/Card.tsx index 52b67f2..cc9f3ac 100644 --- a/client/components/Card.tsx +++ b/client/components/Card.tsx @@ -1,5 +1,5 @@ import React, { FC } from "react"; -import { View, Text } from "react-native"; +import { View, Text, ViewStyle} from "react-native"; import { LucideIcon } from "lucide-react-native"; type CardProps = { @@ -7,13 +7,15 @@ type CardProps = { icon?: LucideIcon; label: string; description?: string; + color?: string; + style?: ViewStyle; }; -const Card: FC = ({ className, icon: Icon, label, description }) => { +const Card: FC = ({ className, icon: Icon, label, description, color}) => { return ( - + - {Icon && } + {Icon && } {label} {description && ( diff --git a/client/components/SearchBar.tsx b/client/components/SearchBar.tsx index c6a63b2..195a220 100644 --- a/client/components/SearchBar.tsx +++ b/client/components/SearchBar.tsx @@ -1,16 +1,29 @@ import React, { forwardRef } from "react"; -import { TextInput, TextInputProps, View} from "react-native"; - +import { View, TextInput, TextInputProps } from "react-native"; +import { Search } from "lucide-react-native"; const SearchBar = forwardRef( ({ className, ...props }, ref) => { return ( - - + + {/* Search Icon */} + + + {/* Input Field */} + ); } ); +SearchBar.displayName = "SearchBar"; export default SearchBar; diff --git a/client/package-lock.json b/client/package-lock.json index 1534ff2..35bfd9e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@expo/metro-runtime": "~6.1.1", "expo": "~54.0.1", + "expo-linear-gradient": "~15.0.7", "expo-status-bar": "~3.0.7", "firebase": "^12.3.0", "lucide-react-native": "^0.545.0", @@ -18,6 +19,8 @@ "react-dom": "19.1.0", "react-native": "0.81.4", "react-native-reanimated": "^4.1.3", + "react-native-safe-area-context": "~5.6.0", + "react-native-svg": "15.12.1", "react-native-web": "^0.21.0", "tailwindcss": "^3.4.18" }, @@ -4491,8 +4494,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/bplist-creator": { "version": "0.1.0", @@ -5154,7 +5156,6 @@ "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz", "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==", "license": "BSD-2-Clause", - "peer": true, "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", @@ -5171,7 +5172,6 @@ "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", "license": "MIT", - "peer": true, "dependencies": { "mdn-data": "2.0.14", "source-map": "^0.6.1" @@ -5185,7 +5185,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "license": "BSD-3-Clause", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -5195,7 +5194,6 @@ "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz", "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==", "license": "BSD-2-Clause", - "peer": true, "engines": { "node": ">= 6" }, @@ -5323,7 +5321,6 @@ "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", "license": "MIT", - "peer": true, "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -5343,15 +5340,13 @@ "url": "https://github.com/sponsors/fb55" } ], - "license": "BSD-2-Clause", - "peer": true + "license": "BSD-2-Clause" }, "node_modules/domhandler": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", "license": "BSD-2-Clause", - "peer": true, "dependencies": { "domelementtype": "^2.3.0" }, @@ -5367,7 +5362,6 @@ "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", "license": "BSD-2-Clause", - "peer": true, "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -5442,7 +5436,6 @@ "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", "license": "BSD-2-Clause", - "peer": true, "engines": { "node": ">=0.12" }, @@ -5590,6 +5583,17 @@ } } }, + "node_modules/expo-linear-gradient": { + "version": "15.0.7", + "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-15.0.7.tgz", + "integrity": "sha512-yF+y+9Shpr/OQFfy/wglB/0bykFMbwHBTuMRa5Of/r2P1wbkcacx8rg0JsUWkXH/rn2i2iWdubyqlxSJa3ggZA==", + "license": "MIT", + "peerDependencies": { + "expo": "*", + "react": "*", + "react-native": "*" + } + }, "node_modules/expo-modules-autolinking": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.10.tgz", @@ -7720,8 +7724,7 @@ "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", - "license": "CC0-1.0", - "peer": true + "license": "CC0-1.0" }, "node_modules/memoize-one": { "version": "5.2.1", @@ -8346,7 +8349,6 @@ "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", "license": "BSD-2-Clause", - "peer": true, "dependencies": { "boolbase": "^1.0.0" }, @@ -9403,12 +9405,21 @@ "react-native-worklets": ">=0.5.0" } }, + "node_modules/react-native-safe-area-context": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.2.tgz", + "integrity": "sha512-4XGqMNj5qjUTYywJqpdWZ9IG8jgkS3h06sfVjfw5yZQZfWnRFXczi0GnYyFyCc2EBps/qFmoCH8fez//WumdVg==", + "license": "MIT", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-svg": { - "version": "15.14.0", - "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.14.0.tgz", - "integrity": "sha512-B3gYc7WztcOT4N54AtUutbe0Nuqqh/nkresY0fAXzUHYLsWuIu/yGiCCD3DKfAs6GLv5LFtWTu7N333Q+e3bkg==", + "version": "15.12.1", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.1.tgz", + "integrity": "sha512-vCuZJDf8a5aNC2dlMovEv4Z0jjEUET53lm/iILFnFewa15b4atjVxU6Wirm6O9y6dEsdjDZVD7Q3QM4T1wlI8g==", "license": "MIT", - "peer": true, "dependencies": { "css-select": "^5.1.0", "css-tree": "^1.1.3", @@ -10855,8 +10866,7 @@ "version": "0.1.1", "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz", "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/wcwidth": { "version": "1.0.1", diff --git a/client/package.json b/client/package.json index a66bbbe..df58650 100644 --- a/client/package.json +++ b/client/package.json @@ -11,6 +11,7 @@ "dependencies": { "@expo/metro-runtime": "~6.1.1", "expo": "~54.0.1", + "expo-linear-gradient": "~15.0.7", "expo-status-bar": "~3.0.7", "firebase": "^12.3.0", "lucide-react-native": "^0.545.0", @@ -19,6 +20,8 @@ "react-dom": "19.1.0", "react-native": "0.81.4", "react-native-reanimated": "^4.1.3", + "react-native-safe-area-context": "~5.6.0", + "react-native-svg": "15.12.1", "react-native-web": "^0.21.0", "tailwindcss": "^3.4.18" }, diff --git a/client/screens/TestingScreen.tsx b/client/screens/TestingScreen.tsx index 82b5e1c..2798601 100644 --- a/client/screens/TestingScreen.tsx +++ b/client/screens/TestingScreen.tsx @@ -1,36 +1,44 @@ -import { StyleSheet, Text, View } from "react-native"; -import { useState } from "react"; +import React, { useState } from "react"; +import { ScrollView, View, Text } from "react-native"; import { Star } from "lucide-react-native"; - import SearchBar from "../components/SearchBar"; import Card from "../components/Card"; - import Button from "../components/Button"; +import Home from "./home"; export default function App() { const [input, setInput] = useState(""); return ( - - This is a testing page. - {/* Add New Components here */} - setInput(text)} - /> + + + + This is a testing page. + + + + + + + setInput(text)} + /> + + - -