feat: change headers styles & add filter jozz

obeim · Feb 1, 2024 · b9eabe7 · b9eabe7
1 parent 30abdfc
commit b9eabe7
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 18 deletions.
diff --git a/screens/home/components/JozzTab.tsx b/screens/home/components/JozzTab.tsx
@@ -1,8 +1,9 @@
-import { FlatList } from "react-native";
+import { FlatList, Text } from "react-native";
 import { router } from "expo-router";
 import JozzCard from "./JozzCard";
 import { useQuery } from "react-query";
-const JozzTab = () => {
+import { useMemo } from "react";
+const JozzTab = ({ search }: { search: string }) => {
   const { data } = useQuery(
     "jozzs",
     async () => {
@@ -18,17 +19,28 @@ const JozzTab = () => {
     { cacheTime: Infinity }
   );
 
+  const filterdData = useMemo(
+    () =>
+      data?.filter ? data?.filter((item) => item.name.includes(search)) : [],
+    [search, data]
+  );
+
   return (
     <FlatList
-      data={data}
+      data={filterdData}
       scrollEnabled
-      className="h-[60%] flex-2 flex-col "
+      className="h-[60%] flex-2 flex-col mt-3"
       numColumns={2}
       contentContainerStyle={{ gap: 2 }}
       columnWrapperStyle={{ gap: 10 }}
       initialNumToRender={10}
       showsVerticalScrollIndicator={false}
       onEndReachedThreshold={0.5}
+      ListEmptyComponent={
+        <Text className="my-8 text-center text-gray-300 font-HelveticaLight">
+          لا يوجد
+        </Text>
+      }
       renderItem={({ item }) => (
         <JozzCard
           onPress={() => {

diff --git a/screens/home/components/TypeTabs.tsx b/screens/home/components/TypeTabs.tsx
@@ -23,7 +23,10 @@ export const TypeTabs = (props: { data: Surah[]; search: string }) => {
 };
 export const tabs = (props: { data: Surah[]; search: string }) => [
   { name: "surah", title: "سورة", component: <SurahTab {...props} /> },
-  { name: "chapter", title: "جزء", component: <JozzTab /> },
-  { name: "ayah", title: "أية" },
+  {
+    name: "chapter",
+    title: "جزء",
+    component: <JozzTab search={props.search} />,
+  },
   { name: "azkar", title: "الأذكار" },
 ];
diff --git a/screens/jozz/Header.tsx b/screens/jozz/Header.tsx
@@ -12,13 +12,12 @@ export function Header({
   subtitle?: string;
 }) {
   return (
-    <View className="flex flex-row justify-between  py-4 px-2 h-[9%]  bg-white items-center">
-      <View></View>
+    <View className="flex flex-row justify-between  pb-4 pt-2 px-2 h-[7%]  bg-white items-center">
       <Pressable
         onPress={() => {
           router.back();
         }}
-        className="bg-white flex-1 items-center"
+        className="bg-white items-center"
       >
         <Text className="font-HelveticaRoman text-lg text-primary">
           {title}
@@ -30,7 +29,7 @@ export function Header({
         }}
         className=" h-10 items-center justify-end !w-10 flex-3 "
       >
-        <BigArrow height={28} width={20} />
+        <BigArrow height={24} width={20} />
       </Pressable>
     </View>
   );

diff --git a/screens/jozz/index.tsx b/screens/jozz/index.tsx
@@ -27,7 +27,7 @@ const Jozz = () => {
           renderItem={({ item, index }) => (
             <View key={index}>
               {item.sora_name_ar !== "no" && (
-                <Text className="my-2 rounded-full bg-primary mx-auto text-white font-UthmanicHafs text-lg w-1/2  text-center">
+                <Text className="my-2  bg-primary mx-auto text-white font-UthmanicHafs text-lg w-1/2  text-center">
                   {item.sora_name_ar}
                 </Text>
               )}
@@ -38,7 +38,7 @@ const Jozz = () => {
               />
             </View>
           )}
-          className="w-full bg-lotion h-[91%]  px-5 rounded-2xl overflow-hidden"
+          className="w-full bg-lotion h-[91%]  px-5  overflow-hidden"
         />
       </View>
     )

diff --git a/screens/surah/Header.tsx b/screens/surah/Header.tsx
@@ -13,15 +13,14 @@ export function Header({
   subtitle?: string;
 }) {
   return (
-    <View className="flex flex-row justify-between  py-4 px-2 h-[9%]  bg-white items-center">
-      <Menu width={24} height={32} />
+    <View className="flex flex-row justify-between  pb-4 pt-2 px-2 h-[7%]  bg-white items-center">
       <Pressable
         onPress={() => {
           router.back();
         }}
-        className="bg-white flex-1 items-center"
+        className="bg-white flex-3  items-center"
       >
-        <Text className="font-HelveticaRoman text-lg text-primary">
+        <Text className="font-HelveticaRoman text-lg text-primary text-center">
           {title}
         </Text>
         <Text className="font-HelveticaRoman text-primary/30 text-xs">
@@ -34,7 +33,7 @@ export function Header({
         }}
         className=" h-10 items-center justify-end !w-10 flex-3 "
       >
-        <BigArrow height={28} width={20} />
+        <BigArrow height={24} width={20} />
       </Pressable>
     </View>
   );

diff --git a/screens/surah/index.tsx b/screens/surah/index.tsx
@@ -43,7 +43,7 @@ const Surah = () => {
                 />
               </>
             )}
-            className="w-full bg-lotion h-[91%]  px-5 rounded-2xl overflow-hidden"
+            className="w-full bg-lotion h-[93%] px-5 overflow-hidden"
           />
         </View>
       </View>
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,7 +43,7 @@ const Surah = () => { @@
                     />
                   </>
                 )}
-                className="w-full bg-lotion h-[91%]  px-5 rounded-2xl overflow-hidden"
+                className="w-full bg-lotion h-[93%] px-5 overflow-hidden"
               />
             </View>
           </View>
@@ Expand Down @@