add simple home section

ArtisanConnect/components/CategorySection.jsx

@@ -0,0 +1,52 @@
+import { View} from 'react-native';
+import { useEffect, useState } from 'react'
+import { Heading } from '@/components/ui/heading';
+import { Text } from '@/components/ui/text';
+// import { useNoticesStore } from '@/store/noticesStore';
+import { Pressable } from '@/components/ui/pressable';
+import { FlatList } from 'react-native';
+import axios from 'axios';
+
+export function CategorySection({notices, title}) {
+// const notices = useNoticesStore((state) => state.notices);
+
+  const [categoryMap, setCategoryMap] = useState({});
+
+  useEffect(() => {
+    axios.get('https://testowe.zikor.pl/api/v1/vars/categories')
+      .then(res => setCategoryMap(res.data))
+      .catch(() => setCategoryMap({}));
+  }, []);
+    
+const categories = Array.from(
+  new Set(notices.map((notice) => notice.category))
+).filter(Boolean);
+
+
+  const getCount = (category) =>
+    notices.filter((notice) => notice.category === category).length;
+
+return (
+    <View className="mb-6">
+      <Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>
+      <FlatList
+        data={categories}
+        keyExtractor={(item) => item}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: 8, gap: 12 }}
+        renderItem={({ item }) => {
+          const categoryObj = categoryMap.find((cat) => cat.value === item);
+          return (
+            <Pressable className="bg-gray-200 p-4 rounded-lg mr-2">
+              <Text>
+                {categoryObj ? categoryObj.label : item} ({getCount(item)})
+              </Text>
+            </Pressable>
+          );
+        }}
+      />
+    </View>
+  );
+
+}