From 8fd6e7c5dcd2b402cfed343ff5c8fd4335515f88 Mon Sep 17 00:00:00 2001 From: Jeremy Cortez Date: Wed, 29 Oct 2025 17:23:05 -0400 Subject: [PATCH 1/3] Jac722 - Created home.tsx file adding UI design for Cards. CHanged Card Component to be able to take color prop to change the color of icons. Changed App to be scrollable --- client/App.tsx | 27 ++++++++------------ client/components/Card.tsx | 7 ++--- client/screens/home.tsx | 52 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 19 deletions(-) create mode 100644 client/screens/home.tsx 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/components/Card.tsx b/client/components/Card.tsx index 52b67f2..b3cac71 100644 --- a/client/components/Card.tsx +++ b/client/components/Card.tsx @@ -7,13 +7,14 @@ type CardProps = { icon?: LucideIcon; label: string; description?: string; + color?: string; }; -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/screens/home.tsx b/client/screens/home.tsx new file mode 100644 index 0000000..87b14ab --- /dev/null +++ b/client/screens/home.tsx @@ -0,0 +1,52 @@ +import { Search } from "lucide-react-native"; +import { View , Text} from "react-native"; +import SearchBar from "../components/SearchBar"; +import Card from "../components/Card"; +import Button from "../components/Button"; +import { useState } from "react"; +import { Pill, Heart, ShieldAlert} from "lucide-react-native"; + + +export default function Home() { + const [input, setInput] = useState(""); + + return( + + This is a testing page. + {/* Add New Components here */} + setInput(text)} + /> + + + + +