@prezly/theme-kit-ui/build/components/SubscriptionCta/SubscriptionCta.mjs

UI components for Prezly themes

import React from "react";
import { twMerge } from 'tailwind-merge';
import { Button } from "../Button/index.mjs";
import { Input } from "../Input/index.mjs";
export function SubscriptionCta(_ref) {
  var _intl$subscriptionFo, _intl$subscriptionLa, _intl$actionsSubscri;
  var {
    className,
    error,
    value,
    onChange: _onChange,
    onSubmit,
    intl = {}
  } = _ref;
  function handleSubmit(event) {
    event === null || event === void 0 || event.preventDefault();
    onSubmit();
  }
  return /*#__PURE__*/React.createElement("div", {
    className: twMerge('flex flex-col md:flex-row items-start py-12 md:py-24 px-6 md:px-20 gap-8 bg-gray-700', className)
  }, /*#__PURE__*/React.createElement("h3", {
    className: "title-large w-full md:w-1/2 text-white"
  }, (_intl$subscriptionFo = intl['subscription.formTitle']) !== null && _intl$subscriptionFo !== void 0 ? _intl$subscriptionFo : 'Get updates in your mailbox'), /*#__PURE__*/React.createElement("form", {
    className: "flex flex-col sm:flex-row items-start w-full md:w-1/2 gap-4",
    onSubmit: handleSubmit
  }, /*#__PURE__*/React.createElement(Input, {
    className: "w-full",
    inputClassName: "py-3 px-4",
    error: error,
    placeholder: (_intl$subscriptionLa = intl['subscription.labelEmail']) !== null && _intl$subscriptionLa !== void 0 ? _intl$subscriptionLa : 'Enter your email',
    value: value,
    onChange: event => _onChange(event.target.value)
  }), /*#__PURE__*/React.createElement(Button, {
    className: "shrink-0 w-full sm:w-max",
    type: "submit"
  }, (_intl$actionsSubscri = intl['actions.subscribe']) !== null && _intl$actionsSubscri !== void 0 ? _intl$actionsSubscri : 'Subscribe')));
}