31 lines
942 B
TypeScript
31 lines
942 B
TypeScript
import { ScrollView, StyleSheet } from "react-native";
|
|
import { useApp } from "./store";
|
|
import { Pill } from "./ui";
|
|
|
|
// Horizontal pill row to scope the view to one project (or All). Only renders
|
|
// when there's more than one project — single-project users never see clutter.
|
|
export function ProjectSwitcher() {
|
|
const { projects, activeProjectId, setActiveProject } = useApp();
|
|
if (projects.length <= 1) return null;
|
|
|
|
const items = [{ id: "all", name: "All" }, ...projects];
|
|
|
|
return (
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
style={styles.scroll}
|
|
contentContainerStyle={styles.row}
|
|
>
|
|
{items.map((p) => (
|
|
<Pill key={p.id} label={p.name} active={activeProjectId === p.id} onPress={() => setActiveProject(p.id)} />
|
|
))}
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
scroll: { flexGrow: 0 },
|
|
row: { paddingHorizontal: 16, paddingBottom: 12, gap: 8, alignItems: "center" },
|
|
});
|