sccoreui
Version:
ui-sccore
12 lines (11 loc) • 4.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const radiobutton_1 = require("primereact/radiobutton");
const RadioButtonComponent = () => {
const [ingredient, setIngredient] = (0, react_1.useState)("");
const [remember, setRemember] = (0, react_1.useState)(false);
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 mb-4" }, { children: "Radio Button" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex justify-content-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center mr-3" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient1", name: "pizza", value: "Cheese", onChange: (e) => setIngredient(e.value), checked: ingredient === "Cheese" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient1", className: "ml-2" }, { children: "Cheese" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient2", name: "pizza", value: "Mushroom", onChange: (e) => setIngredient(e.value), checked: ingredient === "Mushroom" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Mushroom" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient4", name: "pizza", value: "Onion", className: "p-invalid" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Onion" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient3", name: "pizza", value: "Pepperoni", onChange: (e) => setIngredient(e.value), checked: true, disabled: true }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Pepperoni" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: remember, className: "pt-1", onChange: () => setRemember(!remember) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", className: "pt-1 p-invalid" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: true, disabled: true, className: "pt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] }))] }));
};
exports.default = RadioButtonComponent;