GridAndroid

import * as React from "react";
import { View } from "react-native";
import { Grid } from "../grid";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

const TILES: { icon: Parameters<typeof Icon>[0]["name"]; label: string; color?: string }[] = [
  { icon: "coffee", label: "Broths" },
  { icon: "star", label: "Top rated", color: "warning" },
  { icon: "tag", label: "Under $10" },
  { icon: "moon", label: "Late night" },
  { icon: "map-pin", label: "Near me" },
  { icon: "heart", label: "Saved" },
];

/** GridCategories — six-tile browse grid with a section header. */
export function GridCategories() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center justify-between">
            <Text variant="small" className="font-semibold">Browse by category</Text>
            <Text variant="muted" className="text-xs">Ramen · Bairro Alto</Text>
          </View>
          <Grid columns={3} gap={8} className="w-full">
            {TILES.map((t) => (
              <Glass interactive key={t.label} curvature="edge" className="items-center gap-1 rounded-xl p-3">
                <Icon name={t.icon} size="md" color={t.color ?? "foreground"} />
                <Text variant="small">{t.label}</Text>
              </Glass>
            ))}
          </Grid>
        </Glass>
      </View>
  );
}

import * as React from "react";
import { View } from "react-native";
import { Grid } from "../grid";
import { Image } from "../../image/image";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

// Pinned Unsplash IDs verified to show each dish — picsum seeds served
// arbitrary subjects (a lake for Tonkotsu, a desk for Shoyu).
const DISHES = [
  { name: "Tonkotsu", price: "$14.50 • 4.9 ★", photo: "photo-1569718212165-3a8278d5f624" },
  { name: "Spicy Miso", price: "$13.00 • 4.8 ★", photo: "photo-1591814468924-caf88d1232e1" },
  { name: "Shoyu Classic", price: "$12.50 • 4.7 ★", photo: "photo-1557872943-16a5ac26437e" },
  { name: "Gyoza (6 pc)", price: "$7.50 • 4.9 ★", photo: "photo-1496116218417-1a781b1c416c" },
];

/** GridMenu — two-column product grid with images and prices. */
export function GridMenu() {
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="font-semibold text-white drop-shadow">Sakura Ramen — popular dishes</Text>
        <Grid columns={2} gap={8} className="w-full">
          {DISHES.map((d) => (
            <Glass interactive key={d.name} curvature="edge" className="gap-1 overflow-hidden rounded-xl p-3">
              <Image
                source={{ uri: `https://images.unsplash.com/${d.photo}?w=300&h=200&fit=crop&q=70&auto=format` }}
                className="h-20 w-full rounded-lg"
              />
              <Text>{d.name}</Text>
              <Text variant="muted">{d.price}</Text>
            </Glass>
          ))}
        </Grid>
      </View>
  );
}