add filter and cleat btn

ArtisanConnect/app/(tabs)/notices.jsx

@@ -1,16 +1,31 @@
+// import React from "react"
 import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
 import {useState, useEffect} from "react";
+import { Ionicons } from "@expo/vector-icons";
 import {useNoticesStore} from "@/store/noticesStore";
 import {NoticeCard} from "@/components/NoticeCard";
 import { useLocalSearchParams } from "expo-router";
-import { HStack } from "@gluestack-ui/themed";
-import { Button, ButtonText } from "@components/ui/Button";
-import { Actionsheet } from "@components/ui/Actionsheet";
+import { HStack } from "@/components/ui/hstack"
+import { Box } from "@/components/ui/box"
+import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
+import {
+  Actionsheet,
+  ActionsheetContent,
+  ActionsheetItem,
+  ActionsheetItemText,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetBackdrop,
+} from "@/components/ui/actionsheet"
+import { useRouter } from "expo-router";
+
 export default function Notices() {
     const {notices, fetchNotices} = useNoticesStore();
     const [refreshing, setRefreshing] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [showActionsheet, setShowActionsheet] = useState(false)
+    const handleClose = () => setShowActionsheet(false)
 
     const params = useLocalSearchParams();
    console.log("GET params:", params);
@@ -18,6 +33,8 @@ export default function Notices() {
         loadData();
     }, []);
 
+
+
     const loadData = async () => {
         setIsLoading(true);
         try {
@@ -30,8 +47,10 @@ export default function Notices() {
         }
     };
 
-    let filteredNotices = notices;
+ const router = useRouter();
 
+    let filteredNotices = notices;
+    let filterActive = false;
     if (params.sort) {
         if( params.sort === "latest") {
         filteredNotices = [...filteredNotices].sort(
@@ -44,8 +63,13 @@ export default function Notices() {
         filteredNotices = filteredNotices.filter(
             (notice) => notice.category === params.category
         );
+        filterActive = true;
     }
 
+    if(params.attribute) {
+        filterActive = true;
+    }
+    
     const onRefresh = async () => {
         setRefreshing(true);
         try {
@@ -65,9 +89,29 @@ export default function Notices() {
         return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
     }
 
-
     return (
-
+<>
+    <Box className="flex-row p-2 pt-4 pb-4 bg-white items-center justify-between">
+     <Button variant="outline" onPress={() => setShowActionsheet(true)}>
+        <ButtonText>Filtry</ButtonText>
+        <Ionicons name="filter-outline" size={20} color="black" />
+      </Button>
+      {filterActive && (
+      <Button variant="link" onPress={() => router.replace("/notices")}>
+        <ButtonText>Wyczyść</ButtonText>
+        </Button>)}
+      </Box>
+          <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
+        <ActionsheetBackdrop />
+        <ActionsheetContent>
+          <ActionsheetDragIndicatorWrapper>
+            <ActionsheetDragIndicator />
+          </ActionsheetDragIndicatorWrapper>
+          <ActionsheetItem>
+            <ActionsheetItemText>Kategoria</ActionsheetItemText>
+          </ActionsheetItem>
+        </ActionsheetContent>
+      </Actionsheet>
         <FlatList
             key={2}
             data={filteredNotices}
@@ -84,5 +128,6 @@ export default function Notices() {
                 />
             }
         />
+        </>
     );
 }