Segmented ControliOS

import * as React from "react";
import { View } from "react-native";
import { SegmentedControl } from "../segmented-control";
import { Ambient } from "../../glass/ambient";

/** SegmentedGlass — liquid-glass capsule over a photo canvas; the
 *  indicator pill glides and refracts what's beneath it. */
export function SegmentedGlass() {
  const [value, setValue] = React.useState("Photos");
  return (
    <View className="relative h-[420px] w-full overflow-hidden rounded-3xl">
      <Ambient seed="album" />
      <View className="absolute bottom-5 left-4 right-4">
        <SegmentedControl
          glass
          options={["Photos", "Albums", "Favorites"]}
          value={value}
          onValueChange={setValue}
        />
      </View>
    </View>
  );
}

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

const VIEWS: Record<string, { rows: { title: string; sub: string }[] }> = {
  List: {
    rows: [
      { title: "Global index", sub: "+ $212.40 today" },
      { title: "Green bonds", sub: "+ $18.05 today" },
      { title: "Clean energy ETF", sub: "− $8.40 today" },
    ],
  },
  Grid: {
    rows: [
      { title: "9 holdings", sub: "Two-column tiles" },
      { title: "Totals strip", sub: "$1,204.10 this month" },
    ],
  },
  Map: {
    rows: [
      { title: "London", sub: "4 instruments pinned" },
      { title: "Frankfurt", sub: "2 instruments pinned" },
      { title: "New York", sub: "7 instruments pinned" },
    ],
  },
};

/** SegmentedObjects — view switcher driving a live preview list below. */
export function SegmentedObjects() {
  const [view, setView] = React.useState("List");
  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">Activity</Text>
            <Text variant="muted" className="text-xs">{view} view</Text>
          </View>
          <SegmentedControl
            glass
            options={[
              { value: "List", label: "List", icon: <Icon name="menu" size="sm" color="mutedForeground" /> },
              { value: "Grid", label: "Grid", icon: <Icon name="grid" size="sm" color="mutedForeground" /> },
              { value: "Map", label: "Map", icon: <Icon name="map-pin" size="sm" color="mutedForeground" /> },
            ]}
            value={view}
            onValueChange={setView}
            className="w-full"
          />
          <View className="gap-1">
            {(VIEWS[view] ?? VIEWS.List!).rows.map((r) => (
              <Glass interactive key={r.title} curvature="edge" className="flex-row items-center justify-between rounded-lg px-3 py-2">
                <Text variant="small">{r.title}</Text>
                <Text variant="muted" className="text-xs">{r.sub}</Text>
              </Glass>
            ))}
          </View>
        </Glass>
      </View>
  );
}

import * as React from "react";
import { View } from "react-native";
import { SegmentedControl } from "../segmented-control";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** SegmentedStrings — string options with the gliding indicator. */
export function SegmentedStrings() {
  const [value, setValue] = React.useState("Today");
  const totals: Record<string, { amount: string; note: string }> = {
    Today: { amount: "$1,240.00", note: "3 transfers, largest $860 to Savings" },
    Week: { amount: "$4,280.50", note: "18 transfers · up 4.2% vs last week" },
    Month: { amount: "$16,940.00", note: "74 transfers · rent and payroll included" },
  };
  const active = totals[value] ?? totals.Today!;
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <SegmentedControl
            glass
            options={["Today", "Week", "Month"]}
            value={value}
            onValueChange={setValue}
            className="w-full"
          />
          <Text variant="large">{active.amount}</Text>
          <Text variant="muted">{active.note}</Text>
        </Glass>
      </View>
  );
}