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

32
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,7 +40,8 @@ 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">
<PageContainer className="gap-3 py-3">
<SearchField value={search} onChange={setSearch}> <SearchField value={search} onChange={setSearch}>
<SearchField.Group> <SearchField.Group>
<SearchField.SearchIcon /> <SearchField.SearchIcon />
@@ -48,9 +51,7 @@ export default function BrowseTab(): JSX.Element {
</SearchField> </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
</Typography>
<Chip <Chip
size="sm" size="sm"
variant={currencyFilter === "all" ? "primary" : "soft"} variant={currencyFilter === "all" ? "primary" : "soft"}
@@ -76,9 +77,7 @@ export default function BrowseTab(): JSX.Element {
<Chip.Label>USDC</Chip.Label> <Chip.Label>USDC</Chip.Label>
</Chip> </Chip>
<Typography type="body-xs" color="muted" className="ml-2"> <Typography className={`${MICRO_LABEL_CLASS} ml-2`}>Sort</Typography>
Sort
</Typography>
<Chip <Chip
size="sm" size="sm"
variant={sortMode === "newest" ? "primary" : "soft"} variant={sortMode === "newest" ? "primary" : "soft"}
@@ -119,11 +118,7 @@ export default function BrowseTab(): JSX.Element {
viewMode === "list" ? "bg-accent" : "" viewMode === "list" ? "bg-accent" : ""
}`} }`}
> >
<Ionicons <Ionicons name="list" size={14} color={viewMode === "list" ? accentForeground : mutedColor} />
name="list"
size={14}
color={viewMode === "list" ? accentForeground : mutedColor}
/>
</Pressable> </Pressable>
<Pressable <Pressable
onPress={() => setViewMode("grid")} onPress={() => setViewMode("grid")}
@@ -131,30 +126,29 @@ export default function BrowseTab(): JSX.Element {
viewMode === "grid" ? "bg-accent" : "" viewMode === "grid" ? "bg-accent" : ""
}`} }`}
> >
<Ionicons <Ionicons name="grid" size={14} color={viewMode === "grid" ? accentForeground : mutedColor} />
name="grid"
size={14}
color={viewMode === "grid" ? accentForeground : mutedColor}
/>
</Pressable> </Pressable>
</View> </View>
</View> </View>
</PageContainer>
</View> </View>
<ScrollView className="flex-1"> <ScrollView className="flex-1">
<PageContainer className="py-3.5">
{viewMode === "list" ? ( {viewMode === "list" ? (
<View className="gap-2.5 p-3.5"> <View className="gap-2.5">
{products.map((product) => ( {products.map((product) => (
<ListingCard key={product.id} product={product} variant="list" /> <ListingCard key={product.id} product={product} variant="list" />
))} ))}
</View> </View>
) : ( ) : (
<View className="flex-row flex-wrap p-2"> <View className="flex-row flex-wrap">
{products.map((product) => ( {products.map((product) => (
<ListingCard key={product.id} product={product} variant="grid" /> <ListingCard key={product.id} product={product} variant="grid" />
))} ))}
</View> </View>
)} )}
</PageContainer>
</ScrollView> </ScrollView>
</View> </View>
); );