sccoreui
Version:
ui-sccore
11 lines (10 loc) • 32.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const button_1 = require("primereact/button");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const ButtonComponent = () => {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Buttons" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon bg-primary-100 border-none", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, className: "bg-primary-100 border-none", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }) })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", outlined: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, outlined: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-secondary p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-primary" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-primary" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-secondary p-button-dual-icon bg-primary-25", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-primary" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-primary" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-button-secondary", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, className: "p-button-secondary", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) })] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-gray-600 hover:text-gray-700 hover:bg-gray-50 focus:bg-transparent justify-content-between shadow-none white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-gray-600 hover:text-gray-700 focus:bg-transparent justify-content-between shadow-none white-space-nowrap gap-2 p-button-dual-icon", text: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-primary-500 hover:text-primary-800 hover:bg-primary-50 focus:bg-transparent justify-content-between shadow-none white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between shadow-none white-space-nowrap gap-2 p-button-dual-icon", text: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-gray-600 hover:text-gray-700 bg-transparent focus:bg-transparent justify-content-between shadow-none white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-gray-600 hover:text-gray-700 focus:bg-transparent justify-content-between shadow-none white-space-nowrap gap-2 p-button-dual-icon", text: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between shadow-none white-space-nowrap gap-2 p-button-dual-icon", link: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between shadow-none white-space-nowrap gap-2 p-button-dual-icon", link: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between p-button-dual-icon white-space-nowrap gap-2 bg-red-200 border-none", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), className: "p-button-danger" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), className: "p-button-danger bg-red-200 border-none" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", outlined: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger" }), (0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger-secondary flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger-secondary flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon bg-red-25", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger-secondary" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger-secondary bg-red-25" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger" }), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger" })] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger text-red-700 hover:text-red-800 bg-transparent flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-dual-icon", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between w-18rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "google-logo" }), label: "Sign in with Google", className: "flex align-items-center gap-2 p-button-google" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "google-logo" }), label: "Sign in with Google", className: "flex align-items-center gap-2 p-button-google" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "google-logo" }), className: "p-button-google" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "google-logo" }), className: "p-button-google" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between w-18rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "facebook-logo" }), label: "Sign in with Facebook", className: "flex align-items-center gap-2 p-button-facebook" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "facebook-logo" }), label: "Sign in with Facebook", className: "flex align-items-center gap-2 p-button-facebook" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "facebook-logo" }), className: "p-button-facebook" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "facebook-logo" }), className: "p-button-facebook" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between w-18rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "apple-logo" }), label: "Sign in with Apple", className: "flex align-items-center gap-2 p-button-apple" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "apple-logo" }), label: "Sign in with Apple", className: "flex align-items-center gap-2 p-button-apple" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "apple-logo" }), className: "p-button-apple" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "apple-logo" }), className: "p-button-apple" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between w-18rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "twitter-logo" }), label: "Sign in with Twitter", className: "flex align-items-center gap-2 p-button-twitter" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "twitter-logo" }), label: "Sign in with Twitter", className: "flex align-items-center gap-2 p-button-twitter" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "twitter-logo" }), className: "p-button-twitter" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "twitter-logo" }), className: "p-button-twitter" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between text-lg white-space-nowrap py-3 px-5 gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-white" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5 bg-primary-100 border-none", disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-white" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", outlined: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between text-lg py-3 px-5 white-space-nowrap gap-2", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-gray-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-secondary text-lg py-3 px-5" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-secondary text-lg py-3 px-5 bg-primary-25", disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-primary-300" }), " ", "Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-gray-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-primary-500 hover:text-primary-800 hover:bg-primary-50 justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center hover:bg-primary-50 text-primary-500 hover:text-primary-800 justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-gray-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", link: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, link: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-gray-300" }), " Button CTA"] }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-white" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between text-lg py-3 px-5 white-space-nowrap gap-2 bg-red-200 border-none", disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-white" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", outlined: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-red-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger-secondary flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger-secondary flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5 bg-red-25", disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-red-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-red-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center bg-transparent text-red-700 hover:text-red-800 justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-red-300" }), " Button CTA"] }))] })) }))] }))] }))] }));
};
exports.default = ButtonComponent;