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