92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
import React, { useState, useMemo } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
ScrollView,
|
|
useColorScheme,
|
|
} from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import SearchBar from "../components/SearchBar";
|
|
import ExpandableItem from "../components/ExpandableItem";
|
|
import { SUBSCRIBED_ITEMS } from "@/data/mockData";
|
|
|
|
export default function SubscribedFeed() {
|
|
const [query, setQuery] = useState("");
|
|
const scheme = useColorScheme();
|
|
const dark = scheme === "dark";
|
|
|
|
const filtered = useMemo(() => {
|
|
if (!query.trim()) return SUBSCRIBED_ITEMS;
|
|
const lower = query.toLowerCase();
|
|
return SUBSCRIBED_ITEMS.filter(
|
|
(item) =>
|
|
item.title.toLowerCase().includes(lower) ||
|
|
item.author.toLowerCase().includes(lower) ||
|
|
item.tag.toLowerCase().includes(lower)
|
|
);
|
|
}, [query]);
|
|
|
|
return (
|
|
<SafeAreaView
|
|
className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}
|
|
>
|
|
|
|
<View
|
|
className={`border-b ${
|
|
dark ? "border-border-dark" : "border-border-light"
|
|
}`}
|
|
>
|
|
<View className="px-4 pt-2 pb-1">
|
|
<Text
|
|
className={`text-2xl font-display font-bold ${
|
|
dark ? "text-ink-dark" : "text-ink-light"
|
|
}`}
|
|
>
|
|
Your Feed
|
|
</Text>
|
|
<Text
|
|
className={`text-xs mt-0.5 font-sans ${
|
|
dark ? "text-muted-dark" : "text-muted-light"
|
|
}`}
|
|
>
|
|
{SUBSCRIBED_ITEMS.length} subscriptions · updated just now
|
|
</Text>
|
|
</View>
|
|
|
|
<SearchBar
|
|
placeholder="Search your subscribed subjects…"
|
|
onSearch={setQuery}
|
|
/>
|
|
</View>
|
|
|
|
{/* Scrollable list */}
|
|
<ScrollView
|
|
contentContainerStyle={{ paddingTop: 12, paddingBottom: 32 }}
|
|
showsVerticalScrollIndicator={false}
|
|
keyboardDismissMode="on-drag"
|
|
>
|
|
{filtered.length === 0 ? (
|
|
<View className="items-center mt-16 px-8">
|
|
<Text className="text-4xl mb-3">🔍</Text>
|
|
<Text
|
|
className={`text-base font-sans font-semibold text-center ${
|
|
dark ? "text-ink-dark" : "text-ink-light"
|
|
}`}
|
|
>
|
|
No results for "{query}"
|
|
</Text>
|
|
<Text
|
|
className={`text-sm font-sans text-center mt-1 ${
|
|
dark ? "text-muted-dark" : "text-muted-light"
|
|
}`}
|
|
>
|
|
Try a different title, author, or topic tag.
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
filtered.map((item) => <ExpandableItem key={item.id} item={item} />)
|
|
)}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
} |