Plan Display

O componente PlanDisplay é um layout de interface reutilizável e flexível, projetado para exibir múltiplos planos ou opções lado a lado. Organiza os planos de maneira visualmente atraente, com cada plano contendo um cabeçalho (por exemplo, título ou nome) e conteúdo (por exemplo, características, benefícios ou detalhes). O componente suporta um sistema de layout para controlar o arranjo dos planos (por exemplo, em linha ou em grade) e é ideal para exibir faixas de preços, opções de assinatura ou quaisquer dados comparativos. Sua estrutura modular permite fácil personalização e escalabilidade

Dois planos

Três planos

import React from "react";
import { PlanDisplay } from "@nimbus-ds/patterns";
import { CheckIcon, CloseIcon } from "@nimbus-ds/icons";
import { Box, Title, Text, Button } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <PlanDisplay minWidth={{ xs: "150px", md: "500px" }} mx="4">
    <PlanDisplay.Card>
      <PlanDisplay.Header
        subtitle="Punto de venta"
        title={
          <Box display="flex" gap="1">
            <Title as="h3" color="neutral-textLow">
              Plan
            </Title>
            <Title as="h3" color="neutral-textHigh">
              Básico
            </Title>
          </Box>
        }
      >
        <Title as="h5">Suscripción gratuita</Title>
        <Text fontWeight="bold" fontSize="highlight">
          1.5% costo por transacción
        </Text>
      </PlanDisplay.Header>
      <PlanDisplay.Content>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Descuentos personalizados
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Registro de clientes
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Búsqueda de clientes
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Venta con envío
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Venta sin stock
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Registro de medio de pago
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Escaneo de producto
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Gestión de caja
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Asignación de vendedor
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Creación de productos durante la venta
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Guardar carritos
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Atajos de teclado
        </PlanDisplay.Bullet>
      </PlanDisplay.Content>
    </PlanDisplay.Card>
    <PlanDisplay.Card highlighted>
      <PlanDisplay.Header
        subtitle="Punto de venta"
        title={
          <Box display="flex" gap="1">
            <Title as="h3" color="neutral-textLow">
              Plan
            </Title>
            <Title as="h3" color="neutral-textHigh">
              Avanzado
            </Title>
          </Box>
        }
      >
        <Title as="h5">$14.999 / mes</Title>
        <Text fontWeight="bold" fontSize="highlight">
          0.15% costo por transacción
        </Text>
      </PlanDisplay.Header>
      <PlanDisplay.Content>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Descuentos personalizados
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Registro de clientes
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Búsqueda de clientes
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Venta con envío
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Venta sin stock
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Registro de medio de pago
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Escaneo de producto
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Gestión de caja
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Asignación de vendedor
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Creación de productos durante la venta
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Guardar carritos
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Atajos de teclado
        </PlanDisplay.Bullet>
      </PlanDisplay.Content>
      <PlanDisplay.Footer>
        <Box
          display="flex"
          flexDirection="column"
          justifyContent="center"
          alignItems="center"
          width="100%"
          gap="2"
        >
          <Button appearance="primary">
            <Text fontSize="base" color="currentColor">
              Comenzar gratis*
            </Text>
          </Button>
          <Text fontSize="caption">
            *Al finalizar la prueba podrás elegir cancelar, continuar o cambiar
            de plan
          </Text>
        </Box>
      </PlanDisplay.Footer>
    </PlanDisplay.Card>
  </PlanDisplay>
);

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/empty-message

Props

Propriedades adicionais podem ser passadas para o componente <PlanDisplay>. Consulte a documentação div para obter a lista de propriedades aceitas pelo componente <PlanDisplay>.