36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import {View, Text, ScrollView, TouchableOpacity} from 'react-native'
|
|
import React, {useState} from 'react'
|
|
import {router, useLocalSearchParams} from "expo-router";
|
|
import {categories} from "@/constants/data";
|
|
|
|
const Filters = () => {
|
|
const params = useLocalSearchParams<{filter?: string}>();
|
|
const [selectedCategory, setSelectedCategory] = useState(params.filter || 'All');
|
|
|
|
const handleCategoryChange = (category: string) => {
|
|
// setSelectedCategory(category);
|
|
// router.setParams({ filter: category });
|
|
if(selectedCategory === category) {
|
|
setSelectedCategory('All');
|
|
router.setParams({ filter: "All" });
|
|
return;
|
|
}
|
|
setSelectedCategory(category);
|
|
router.setParams({ filter: category });
|
|
console.log(category)
|
|
}
|
|
return (
|
|
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} className={'mt-3 mb-2'}>
|
|
{categories.map((item, index) => {
|
|
return (
|
|
<TouchableOpacity onPress={() => handleCategoryChange(item.category)} className={`flex flex-col items-start mr-4 px-4 py-2 rounded-full ${selectedCategory === item.category ? 'bg-blue-300' : 'border border-blue-200'}`}>
|
|
<Text>{item.title}</Text>
|
|
{/*mozam da gi napravam ikonki ili slikicki*/}
|
|
</TouchableOpacity>
|
|
)
|
|
})}
|
|
</ScrollView>
|
|
)
|
|
}
|
|
export default Filters
|