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 activeClass="cell-active" onClick={() => {}} label="Notifications" />
        <TouchCell activeClass="cell-active" onClick={() => {}} label="Language" />
        <TouchCell activeClass="cell-active" onClick={() => {}} label="Linked accounts" />
      </Flex>
      <style>{`.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
          activeClass="cell-active"
          onClick={() => {}}
          label="Account"
          desc="Profile, name, email"
        />
        <TouchCell
          activeClass="cell-active"
          onClick={() => {}}
          label="Payments"
          desc="Cards, wallets, billing history"
        />
        <TouchCell
          activeClass="cell-active"
          onClick={() => {}}
          label="Privacy"
          desc="Visibility, analytics, marketing"
        />
      </Flex>
      <style>{`.cell-active { background: var(--fill-2); }`}</style>
    </PreviewLayout>
  )
}

import { Body1, 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}
            activeClass="cell-active"
            onClick={() => {}}
            label={
              <Flex vertical={false} justify="space-between" align="center">
                <Body1>{key}</Body1>
                <Footnote1 color="text-3">{val}</Footnote1>
              </Flex>
            }
          />
        ))}
      </Flex>
      <style>{`.cell-active { background: var(--fill-2); }`}</style>
    </PreviewLayout>
  )
}