From 4844bda468ff827451e8a392a52df5f4d2a14973 Mon Sep 17 00:00:00 2001 From: Saad Abdul Hamid Parkar Date: Wed, 7 May 2025 20:40:04 +0300 Subject: [PATCH 1/2] Solved --- components/PetItem.tsx | 188 +++++++++++++++++++++-------------------- components/PetList.tsx | 153 +++++++++++++++++---------------- 2 files changed, 174 insertions(+), 167 deletions(-) diff --git a/components/PetItem.tsx b/components/PetItem.tsx index d03edb5..7bdc57f 100644 --- a/components/PetItem.tsx +++ b/components/PetItem.tsx @@ -1,109 +1,111 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native"; -import React from "react"; +import React, { useState } from "react"; interface PetItemProps { - pet: { - id: number; - name: string; - description: string; - type: string; - image: string; - image2: string; - }; + pet: { + id: number; + name: string; + description: string; + type: string; + image: string; + image2: string; + }; } const PetItem = ({ pet }: PetItemProps) => { - return ( - - - + const [imageUri, setImageUri] = useState(pet.image); - {pet.name} + return ( + + + - {pet.description} - + {pet.name} - - - Pet - + {pet.description} + - - Adopt - - - - ); + + setImageUri(pet.image2)}> + Pet + + + + Adopt + + + + ); }; export default PetItem; const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - borderRadius: 10, - backgroundColor: "#f9e3be", - padding: 20, - margin: 10, - shadowColor: "#000", - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - elevation: 5, - }, - image: { - width: 200, - height: 200, - borderRadius: 10, - }, - petInfo: { - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - gap: 10, - marginBottom: 20, - }, - text: { - fontSize: 16, - fontWeight: "bold", - }, - name: { - fontSize: 18, - textAlign: "center", - color: "purple", - fontWeight: "bold", - }, - description: { - fontSize: 16, - color: "black", - fontWeight: "light", - }, - type: { - fontSize: 18, - fontWeight: "semibold", - }, - buttonContainer: { - flexDirection: "row", - gap: 10, - }, - petButton: { - backgroundColor: "#4ade80", - padding: 10, - borderRadius: 10, - width: "50%", - marginBottom: 10, - }, - buttonText: { - textAlign: "center", - fontWeight: "bold", - }, - adoptButton: { - backgroundColor: "#f43f5e", - padding: 10, - borderRadius: 10, - width: "50%", - marginBottom: 10, - }, + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + borderRadius: 10, + backgroundColor: "#f9e3be", + padding: 20, + margin: 10, + shadowColor: "#000", + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + image: { + width: 200, + height: 200, + borderRadius: 10, + }, + petInfo: { + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + gap: 10, + marginBottom: 20, + }, + text: { + fontSize: 16, + fontWeight: "bold", + }, + name: { + fontSize: 18, + textAlign: "center", + color: "purple", + fontWeight: "bold", + }, + description: { + fontSize: 16, + color: "black", + fontWeight: "light", + }, + type: { + fontSize: 18, + fontWeight: "semibold", + }, + buttonContainer: { + flexDirection: "row", + gap: 10, + }, + petButton: { + backgroundColor: "#4ade80", + padding: 10, + borderRadius: 10, + width: "50%", + marginBottom: 10, + }, + buttonText: { + textAlign: "center", + fontWeight: "bold", + }, + adoptButton: { + backgroundColor: "#f43f5e", + padding: 10, + borderRadius: 10, + width: "50%", + marginBottom: 10, + }, }); diff --git a/components/PetList.tsx b/components/PetList.tsx index e0ebf42..b3fec0f 100644 --- a/components/PetList.tsx +++ b/components/PetList.tsx @@ -1,87 +1,92 @@ -import { - ScrollView, - StyleSheet, - Text, - TextInput, - TouchableOpacity, -} from "react-native"; +import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity } from "react-native"; import React, { useState } from "react"; import pets from "@/data/pets"; import PetItem from "./PetItem"; +type PetType = "All" | "Dog" | "Cat" | "Rabbit"; + const PetList = () => { - const petList = pets.map((pet) => ); - return ( - - {/* Search Input */} - + const [query, setQuery] = useState(""); + const [type, setType] = useState("All"); + + const filteredPets = pets.filter((pets) => pets.name.toLowerCase().includes(query.toLowerCase())); + const petList = filteredPets.map((pets) => ); + + const categoryPets = filteredPets + .filter((pets) => pets.type.toLowerCase().includes(type.toLowerCase())) + .map((pet) => { + return ; + }); + + return ( + + {/* Search Input */} + setQuery(text)} value={query}> - {/* Filter by type */} - - - All - - - Cat - - - Dog - - - Rabbit - - + {/* Filter by type */} + + setType("All")}> + All + + setType("Cat")}> + Cat + + setType("Dog")}> + Dog + + setType("Rabbit")}> + Rabbit + + - {/* Pet List */} - {petList} - - ); + {/* Pet List */} + {/* {petList} */} + {type === "All" ? petList : categoryPets} + + ); }; export default PetList; const styles = StyleSheet.create({ - container: { - justifyContent: "center", - alignItems: "center", - }, - containerStyle: { - backgroundColor: "#f9e3be", - paddingRight: 20, - paddingLeft: 20, - paddingBottom: 20, - }, - searchInput: { - width: "100%", - borderWidth: 1, - borderRadius: 10, - padding: 10, - marginBottom: 10, - backgroundColor: "#fff", - borderColor: "#000", - }, - filterTitle: { - fontSize: 18, - fontWeight: "bold", - marginBottom: 10, - }, - filterContainer: { - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center", - width: "100%", - marginBottom: 10, - }, - filterButton: { - backgroundColor: "#fff", - borderWidth: 1, - borderRadius: 10, - padding: 10, - width: "20%", - justifyContent: "center", - alignItems: "center", - }, + container: { + justifyContent: "center", + alignItems: "center", + }, + containerStyle: { + backgroundColor: "#f9e3be", + paddingRight: 20, + paddingLeft: 20, + paddingBottom: 20, + }, + searchInput: { + width: "100%", + borderWidth: 1, + borderRadius: 10, + padding: 10, + marginBottom: 10, + backgroundColor: "#fff", + borderColor: "#000", + }, + filterTitle: { + fontSize: 18, + fontWeight: "bold", + marginBottom: 10, + }, + filterContainer: { + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + width: "100%", + marginBottom: 10, + }, + filterButton: { + backgroundColor: "#fff", + borderWidth: 1, + borderRadius: 10, + padding: 10, + width: "20%", + justifyContent: "center", + alignItems: "center", + }, }); From 68125dbe0769efa24a4fdd515ebab8a80d76faac Mon Sep 17 00:00:00 2001 From: Saad Abdul Hamid Parkar Date: Thu, 8 May 2025 18:15:20 +0300 Subject: [PATCH 2/2] Solved --- app/index.tsx | 25 +++++++++++++++---------- components/NewComponent.tsx | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 10 deletions(-) create mode 100644 components/NewComponent.tsx diff --git a/app/index.tsx b/app/index.tsx index e87d717..6d097f5 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -1,17 +1,22 @@ import PetList from "@/components/PetList"; -import { View, StyleSheet } from "react-native"; +import { useState } from "react"; +import { View, StyleSheet, Switch } from "react-native"; export default function Index() { - return ( - - - - ); + // const [toggle, setToggle] = useState(false); + + return ( + + + + {/* setToggle(!toggle)} /> */} + + ); } const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: "#f9e3be", - }, + container: { + flex: 1, + backgroundColor: "#f9e3be", + }, }); diff --git a/components/NewComponent.tsx b/components/NewComponent.tsx new file mode 100644 index 0000000..1977318 --- /dev/null +++ b/components/NewComponent.tsx @@ -0,0 +1,35 @@ +// rnfs + +// reactNativeFunctionalComponentWithStyles (ES7+ React/Redux/React-Native snippets) + +// import { StyleSheet, Switch, Text, View } from 'react-native' +// import React from 'react' + +// export default function () { +// return ( +// +// +// +// ) +// } + +// const styles = StyleSheet.create({}) + +// rnfes + +// reactNativeFunctionalExportComponentWithStyles (ES7+ React/Redux/React-Native snippets) + +// import { StyleSheet, Text, View } from 'react-native' +// import React from 'react' + +// const = () => { +// return ( +// +// +// +// ) +// } + +// export default + +// const styles = StyleSheet.create({})