Card

import { Body1, Body2, Card, Flex } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function CardDefaultPreview() {
  return (
    <PreviewLayout>
      <Card>
        <Flex vertical gap={6}>
          <Body1 weight="semibold">Boxo Pass</Body1>
          <Body2 color="text-3">Loyalty points balance</Body2>
        </Flex>
      </Card>
    </PreviewLayout>
  )
}

import {
  Card,
  Flex,
  Footnote1,
  LargeTitle,
  PrimaryButton,
} from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function CardStatPreview() {
  return (
    <PreviewLayout>
      <Card>
        <Flex vertical gap={12}>
          <Footnote1 color="text-3" style={{ textTransform: "uppercase" }}>
            Available points
          </Footnote1>
          <LargeTitle>12,480 pts</LargeTitle>
          <Footnote1 color="text-3">~ $124.80 USD</Footnote1>
          <PrimaryButton text="Redeem" />
        </Flex>
      </Card>
    </PreviewLayout>
  )
}

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

import { PreviewLayout } from "./_section"

export function CardSelectablePreview() {
  return (
    <PreviewLayout>
      <Flex vertical gap={10}>
        <Card>
          <Body1>Standard tier</Body1>
        </Card>
        <Card active>
          <Flex vertical={false} justify="space-between" align="center">
            <Body1 weight="semibold">Premium tier</Body1>
            <Footnote1 color="text-3">Selected</Footnote1>
          </Flex>
        </Card>
      </Flex>
    </PreviewLayout>
  )
}

import {
  Body2,
  Card,
  Flex,
  PrimaryButton,
  SecondaryButton,
  Title3,
} from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function CardFormPreview() {
  return (
    <PreviewLayout>
      <Card>
        <Flex vertical gap={16}>
          <Title3>Contact details</Title3>
          <Body2 color="text-3">
            We&apos;ll only use this to confirm bookings.
          </Body2>
          <Flex vertical={false} gap={8}>
            <PrimaryButton text="Confirm" />
            <SecondaryButton text="Cancel" />
          </Flex>
        </Flex>
      </Card>
    </PreviewLayout>
  )
}