UI examples

function ProductBanner({ title, subtitle }: { title: string; subtitle: string }) {
  return (
    <box class="promo-card" style={{ padding: 16, spacing: 8 }}>
      <text style={{ fontSize: 20, fontWeight: 700 }}>{title}</text>
      <text style={{ color: "#6b7280" }}>{subtitle}</text>
    </box>
  );
}

<scrollable horizontal style={{ paddingStart: 16, paddingEnd: 16, spacing: 12 }}>
  {items.map((item) => (
    <box key={item.id} style={{ width: 140, height: 96 }}>
      <text>{item.title}</text>
    </box>
  ))}
</scrollable>

import { linearGradient } from "@napps/nodes";

<box
  style={{
    padding: 20,
    borderRadius: 16,
    backgroundGradient: linearGradient(90, ["#111827", "#2563eb"]),
    verticalAlignment: "center",
    horizontalAlignment: "center",
  }}
>
  <text style={{ color: "#ffffff", fontWeight: 700, textAlignment: "center" }}>Member offer</text>
</box>

function DraggableCard() {
  const x = sv(0);

  return (
    <gestureDetector
      gesture={{ type: "pan", minDistance: 8 }}
      onUpdate={mapEvent({ translationX: x })}
      onEnd={(event) => {
        x.value = spring(0, { velocity: event.velocityX });
      }}
    >
      <box style={animatedProps({ translationX: x })}>
        <text>Drag me</text>
      </box>
    </gestureDetector>
  );
}

function ProductCards() {
  const { products, loadingCount, surface } = useProductCards();
  if (surface === null) return null;

  return (
    <>
      {products.map((product) => <Card key={product.id} item={product} />)}
      {Array.from({ length: loadingCount }, (_, index) => (
        <SkeletonCard key={`skeleton-${index}`} />
      ))}
    </>
  );
}