ai-react-ui
Version:
An AI-friendly React UI component library
47 lines (46 loc) • 4.21 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Showcase = void 0;
var react_1 = __importDefault(require("react"));
var index_1 = require("../index");
var Showcase = function () {
var _a = (0, index_1.useTheme)(), mode = _a.mode, toggleTheme = _a.toggleTheme;
return (react_1.default.createElement("div", { style: { padding: "24px", maxWidth: "800px", margin: "0 auto" } },
react_1.default.createElement(index_1.Card, { elevation: "large", padding: "large" },
react_1.default.createElement(index_1.Text, { size: "large", weight: "bold", style: { marginBottom: "16px" } }, "AI React UI Showcase"),
react_1.default.createElement(index_1.Card, { padding: "medium", style: { marginBottom: "16px" } },
react_1.default.createElement(index_1.Text, { weight: "bold", style: { marginBottom: "8px" } },
"Theme: ",
mode),
react_1.default.createElement(index_1.Button, { onClick: toggleTheme, variant: "primary" }, "Toggle Theme")),
react_1.default.createElement(index_1.Card, { padding: "medium", style: { marginBottom: "16px" } },
react_1.default.createElement(index_1.Text, { weight: "bold", style: { marginBottom: "8px" } }, "Button Variants"),
react_1.default.createElement("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" } },
react_1.default.createElement(index_1.Button, { variant: "primary" }, "Primary"),
react_1.default.createElement(index_1.Button, { variant: "secondary" }, "Secondary"),
react_1.default.createElement(index_1.Button, { variant: "outline" }, "Outline"))),
react_1.default.createElement(index_1.Card, { padding: "medium", style: { marginBottom: "16px" } },
react_1.default.createElement(index_1.Text, { weight: "bold", style: { marginBottom: "8px" } }, "Button Sizes"),
react_1.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } },
react_1.default.createElement(index_1.Button, { size: "small" }, "Small"),
react_1.default.createElement(index_1.Button, { size: "medium" }, "Medium"),
react_1.default.createElement(index_1.Button, { size: "large" }, "Large"))),
react_1.default.createElement(index_1.Card, { padding: "medium", style: { marginBottom: "16px" } },
react_1.default.createElement(index_1.Text, { weight: "bold", style: { marginBottom: "8px" } }, "Text Styles"),
react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } },
react_1.default.createElement(index_1.Text, { size: "small" }, "Small Text"),
react_1.default.createElement(index_1.Text, { size: "medium" }, "Medium Text"),
react_1.default.createElement(index_1.Text, { size: "large" }, "Large Text"),
react_1.default.createElement(index_1.Text, { weight: "bold" }, "Bold Text"))),
react_1.default.createElement(index_1.Card, { padding: "medium" },
react_1.default.createElement(index_1.Text, { weight: "bold", style: { marginBottom: "8px" } }, "Card Elevations"),
react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "16px" } },
react_1.default.createElement(index_1.Card, { elevation: "none", padding: "medium" }, "No Elevation"),
react_1.default.createElement(index_1.Card, { elevation: "small", padding: "medium" }, "Small Elevation"),
react_1.default.createElement(index_1.Card, { elevation: "medium", padding: "medium" }, "Medium Elevation"),
react_1.default.createElement(index_1.Card, { elevation: "large", padding: "medium" }, "Large Elevation"))))));
};
exports.Showcase = Showcase;