thesn/volana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrap Browse in PageContainer

Browse Source
This commit is contained in:
thesn10
2026-07-03 13:11:37 +02:00
parent a04555637d
commit 7d6c779711
1 changed files with 104 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
app/src/app/(tabs)/browse.tsx
View File

@@ -6,6 +6,8 @@ import { Chip, SearchField, Switch, Typography, useThemeColor } from "heroui-nat
import type { Currency, Product } from "@/data/mock"; import type { Currency, Product } from "@/data/mock";
import { PRODUCTS } from "@/data/mock"; import { PRODUCTS } from "@/data/mock";
import { ListingCard } from "@/components/ListingCard"; import { ListingCard } from "@/components/ListingCard";
import { PageContainer } from "@/components/PageContainer";
import { MICRO_LABEL_CLASS } from "@/lib/typography";
type CurrencyFilter = "all" | Currency; type CurrencyFilter = "all" | Currency;
type SortMode = "newest" | "priceLow" | "priceHigh"; type SortMode = "newest" | "priceLow" | "priceHigh";
@@ -38,123 +40,115 @@ export default function BrowseTab(): JSX.Element {
return ( return (
<View className="flex-1 bg-background"> <View className="flex-1 bg-background">
<View className="gap-3 border-b border-border px-4 py-3"> <View className="border-b border-border">
<SearchField value={search} onChange={setSearch}> <PageContainer className="gap-3 py-3">
<SearchField.Group> <SearchField value={search} onChange={setSearch}>
<SearchField.SearchIcon /> <SearchField.Group>
<SearchField.Input placeholder="Search listings…" /> <SearchField.SearchIcon />
<SearchField.ClearButton /> <SearchField.Input placeholder="Search listings…" />
</SearchField.Group> <SearchField.ClearButton />
</SearchField> </SearchField.Group>
</SearchField>
<View className="flex-row flex-wrap items-center gap-2"> <View className="flex-row flex-wrap items-center gap-2">
<Typography type="body-xs" color="muted"> <Typography className={MICRO_LABEL_CLASS}>Currency</Typography>
Currency <Chip
</Typography> size="sm"
<Chip variant={currencyFilter === "all" ? "primary" : "soft"}
size="sm" color={currencyFilter === "all" ? "accent" : "default"}
variant={currencyFilter === "all" ? "primary" : "soft"} onPress={() => setCurrencyFilter("all")}
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 <Chip.Label>All</Chip.Label>
name="list" </Chip>
size={14} <Chip
color={viewMode === "list" ? accentForeground : mutedColor} size="sm"
/> variant={currencyFilter === "SOL" ? "primary" : "soft"}
</Pressable> color={currencyFilter === "SOL" ? "accent" : "default"}
<Pressable onPress={() => setCurrencyFilter("SOL")}
onPress={() => setViewMode("grid")}
className={`h-7 w-8 items-center justify-center rounded-md ${
viewMode === "grid" ? "bg-accent" : ""
}`}
> >
<Ionicons <Chip.Label>SOL</Chip.Label>
name="grid" </Chip>
size={14} <Chip
color={viewMode === "grid" ? accentForeground : mutedColor} size="sm"
/> variant={currencyFilter === "USDC" ? "primary" : "soft"}
</Pressable> color={currencyFilter === "USDC" ? "accent" : "default"}
onPress={() => setCurrencyFilter("USDC")}
>
<Chip.Label>USDC</Chip.Label>
</Chip>
<Typography className={`${MICRO_LABEL_CLASS} 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>
</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>
</PageContainer>
</View> </View>
<ScrollView className="flex-1"> <ScrollView className="flex-1">
{viewMode === "list" ? ( <PageContainer className="py-3.5">
<View className="gap-2.5 p-3.5"> {viewMode === "list" ? (
{products.map((product) => ( <View className="gap-2.5">
<ListingCard key={product.id} product={product} variant="list" /> {products.map((product) => (
))} <ListingCard key={product.id} product={product} variant="list" />
</View> ))}
) : ( </View>
<View className="flex-row flex-wrap p-2"> ) : (
{products.map((product) => ( <View className="flex-row flex-wrap">
<ListingCard key={product.id} product={product} variant="grid" /> {products.map((product) => (
))} <ListingCard key={product.id} product={product} variant="grid" />
</View> ))}
)} </View>
)}
</PageContainer>
</ScrollView> </ScrollView>
</View> </View>
); );