TouchCell

import { Flex, TouchCell } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function TouchCellPlainPreview() {
  return (
    <PreviewLayout>
      <Flex
        vertical
        gap={2}
        style={{ background: "var(--fill-white)", borderRadius: 12 }}
      >
        <TouchCell className="tc-row" activeClass="cell-active" onClick={() => {}} label="Notifications" />
        <TouchCell className="tc-row" activeClass="cell-active" onClick={() => {}} label="Language" />
        <TouchCell className="tc-row" activeClass="cell-active" onClick={() => {}} label="Linked accounts" />
      </Flex>
      <style>{`
        /* Kit zeroes --cell-item-height / --cell-horizontal-padding, so cells
           collapse to ~19px with no inset. Consumers give rows tap padding. */
        .tc-row .arco-cell-inner { min-height: 24px; padding: 12px 16px; }
        .cell-active { background: var(--fill-2); }
      `}</style>
    </PreviewLayout>
  )
}

import { Flex, TouchCell } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function TouchCellDescPreview() {
  return (
    <PreviewLayout>
      <Flex
        vertical
        gap={2}
        style={{ background: "var(--fill-white)", borderRadius: 12 }}
      >
        <TouchCell
          className="tc-row"
          activeClass="cell-active"
          onClick={() => {}}
          label="Account"
          desc="Profile, name, email"
        />
        <TouchCell
          className="tc-row"
          activeClass="cell-active"
          onClick={() => {}}
          label="Payments"
          desc="Cards, wallets, billing history"
        />
        <TouchCell
          className="tc-row"
          activeClass="cell-active"
          onClick={() => {}}
          label="Privacy"
          desc="Visibility, analytics, marketing"
        />
      </Flex>
      <style>{`
        /* Kit zeroes --cell-item-height / --cell-horizontal-padding, so cells
           collapse with no inset. Consumers give rows tap padding. */
        .tc-row .arco-cell-inner { padding: 12px 16px; }
        .cell-active { background: var(--fill-2); }
      `}</style>
    </PreviewLayout>
  )
}

import { Flex, Footnote1, TouchCell } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

const ROWS: Array<[string, string]> = [
  ["Plan", "Premium"],
  ["Billing cycle", "Monthly"],
  ["Next charge", "Aug 14, 2026"],
]

export function TouchCellTrailingPreview() {
  return (
    <PreviewLayout>
      <Flex
        vertical
        gap={2}
        style={{ background: "var(--fill-white)", borderRadius: 12 }}
      >
        {ROWS.map(([key, val]) => (
          <TouchCell
            key={key}
            className="tc-row"
            activeClass="cell-active"
            onClick={() => {}}
            label={key}
          >
            <Footnote1 color="text-3">{val}</Footnote1>
          </TouchCell>
        ))}
      </Flex>
      <style>{`
        /* Kit zeroes --cell-item-height / --cell-horizontal-padding, so cells
           collapse with no inset. Consumers give rows tap padding. */
        .tc-row .arco-cell-inner { min-height: 24px; padding: 12px 16px; }
        /* The value goes in the cell's content area (flex:1) — push it to the
           trailing edge, before the arrow. */
        .tc-row .cell-content.has-label { justify-content: flex-end; }
        .cell-active { background: var(--fill-2); }
      `}</style>
    </PreviewLayout>
  )
}