Add browse screen
This commit is contained in:
thesn10
161
app/src/app/(tabs)/browse.tsx
Normal file
161
app/src/app/(tabs)/browse.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import type { JSX } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Pressable, ScrollView, View } from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Chip, SearchField, Switch, Typography, useThemeColor } from "heroui-native";
|
||||
import type { Currency, Product } from "@/data/mock";
|
||||
import { PRODUCTS } from "@/data/mock";
|
||||
import { ListingCard } from "@/components/ListingCard";
|
||||
|
||||
type CurrencyFilter = "all" | Currency;
|
||||
type SortMode = "newest" | "priceLow" | "priceHigh";
|
||||
type ViewMode = "list" | "grid";
|
||||
|
||||
export default function BrowseTab(): JSX.Element {
|
||||
const [search, setSearch] = useState("");
|
||||
const [currencyFilter, setCurrencyFilter] = useState<CurrencyFilter>("all");
|
||||
const [sortMode, setSortMode] = useState<SortMode>("newest");
|
||||
const [inStockOnly, setInStockOnly] = useState(true);
|
||||
const [viewMode, setViewMode] = useState<ViewMode>("list");
|
||||
const mutedColor = useThemeColor("muted");
|
||||
const accentForeground = useThemeColor("accent-foreground");
|
||||
|
||||
const products = useMemo<Product[]>(() => {
|
||||
let result = [...PRODUCTS];
|
||||
if (inStockOnly) result = result.filter((product) => product.qty > 0);
|
||||
if (currencyFilter !== "all") result = result.filter((product) => product.cur === currencyFilter);
|
||||
if (search.trim()) {
|
||||
const query = search.trim().toLowerCase();
|
||||
result = result.filter(
|
||||
(product) =>
|
||||
product.name.toLowerCase().includes(query) || product.desc.toLowerCase().includes(query),
|
||||
);
|
||||
}
|
||||
if (sortMode === "priceLow") result.sort((a, b) => a.priceNum - b.priceNum);
|
||||
else if (sortMode === "priceHigh") result.sort((a, b) => b.priceNum - a.priceNum);
|
||||
return result;
|
||||
}, [search, currencyFilter, sortMode, inStockOnly]);
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-background">
|
||||
<View className="gap-3 border-b border-border px-4 py-3">
|
||||
<SearchField value={search} onChange={setSearch}>
|
||||
<SearchField.Group>
|
||||
<SearchField.SearchIcon />
|
||||
<SearchField.Input placeholder="Search listings…" />
|
||||
<SearchField.ClearButton />
|
||||
</SearchField.Group>
|
||||
</SearchField>
|
||||
|
||||
<View className="flex-row flex-wrap items-center gap-2">
|
||||
<Typography type="body-xs" color="muted">
|
||||
Currency
|
||||
</Typography>
|
||||
<Chip
|
||||
size="sm"
|
||||
variant={currencyFilter === "all" ? "primary" : "soft"}
|
||||
color={currencyFilter === "all" ? "accent" : "default"}
|
||||
onPress={() => setCurrencyFilter("all")}
|
||||
>
|
||||
<Chip.Label>All</Chip.Label>
|
||||
</Chip>
|
||||
<Chip
|
||||
size="sm"
|
||||
variant={currencyFilter === "SOL" ? "primary" : "soft"}
|
||||
color={currencyFilter === "SOL" ? "accent" : "default"}
|
||||
onPress={() => setCurrencyFilter("SOL")}
|
||||
>
|
||||
<Chip.Label>SOL</Chip.Label>
|
||||
</Chip>
|
||||
<Chip
|
||||
size="sm"
|
||||
variant={currencyFilter === "USDC" ? "primary" : "soft"}
|
||||
color={currencyFilter === "USDC" ? "accent" : "default"}
|
||||
onPress={() => setCurrencyFilter("USDC")}
|
||||
>
|
||||
<Chip.Label>USDC</Chip.Label>
|
||||
</Chip>
|
||||
|
||||
<Typography type="body-xs" color="muted" className="ml-2">
|
||||
Sort
|
||||
</Typography>
|
||||
<Chip
|
||||
size="sm"
|
||||
variant={sortMode === "newest" ? "primary" : "soft"}
|
||||
color={sortMode === "newest" ? "accent" : "default"}
|
||||
onPress={() => setSortMode("newest")}
|
||||
>
|
||||
<Chip.Label>Newest</Chip.Label>
|
||||
</Chip>
|
||||
<Chip
|
||||
size="sm"
|
||||
variant={sortMode === "priceLow" ? "primary" : "soft"}
|
||||
color={sortMode === "priceLow" ? "accent" : "default"}
|
||||
onPress={() => setSortMode("priceLow")}
|
||||
>
|
||||
<Chip.Label>Price ↑</Chip.Label>
|
||||
</Chip>
|
||||
<Chip
|
||||
size="sm"
|
||||
variant={sortMode === "priceHigh" ? "primary" : "soft"}
|
||||
color={sortMode === "priceHigh" ? "accent" : "default"}
|
||||
onPress={() => setSortMode("priceHigh")}
|
||||
>
|
||||
<Chip.Label>Price ↓</Chip.Label>
|
||||
</Chip>
|
||||
</View>
|
||||
|
||||
<View className="flex-row items-center justify-between">
|
||||
<View className="flex-row items-center gap-2">
|
||||
<Switch isSelected={inStockOnly} onSelectedChange={setInStockOnly} />
|
||||
<Typography type="body-xs" color="muted">
|
||||
In stock only
|
||||
</Typography>
|
||||
</View>
|
||||
<View className="flex-row gap-1 rounded-lg border border-border bg-surface p-1">
|
||||
<Pressable
|
||||
onPress={() => setViewMode("list")}
|
||||
className={`h-7 w-8 items-center justify-center rounded-md ${
|
||||
viewMode === "list" ? "bg-accent" : ""
|
||||
}`}
|
||||
>
|
||||
<Ionicons
|
||||
name="list"
|
||||
size={14}
|
||||
color={viewMode === "list" ? accentForeground : mutedColor}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={() => setViewMode("grid")}
|
||||
className={`h-7 w-8 items-center justify-center rounded-md ${
|
||||
viewMode === "grid" ? "bg-accent" : ""
|
||||
}`}
|
||||
>
|
||||
<Ionicons
|
||||
name="grid"
|
||||
size={14}
|
||||
color={viewMode === "grid" ? accentForeground : mutedColor}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ScrollView className="flex-1">
|
||||
{viewMode === "list" ? (
|
||||
<View className="gap-2.5 p-3.5">
|
||||
{products.map((product) => (
|
||||
<ListingCard key={product.id} product={product} variant="list" />
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
<View className="flex-row flex-wrap p-2">
|
||||
{products.map((product) => (
|
||||
<ListingCard key={product.id} product={product} variant="grid" />
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import type { JSX } from "react";
|
||||
import { View } from "react-native";
|
||||
|
||||
export default function ExploreTab(): JSX.Element {
|
||||
return <View className="flex-1 bg-background" />;
|
||||
}
|
||||
Reference in New Issue
Block a user