@wener/console
Version:
Base console UI toolkit
59 lines (58 loc) • 1.86 kB
JavaScript
import React from "react";
import classNames from "clsx";
const Colors = {
primary: [
'bg-primary',
'text-primary-content'
],
secondary: [
'bg-secondary',
'text-secondary-content'
],
accent: [
'bg-accent',
'text-accent-content'
],
neutral: [
'bg-neutral',
'text-neutral-content'
],
info: [
'bg-info',
'text-info-content'
],
success: [
'bg-success',
'text-success-content'
],
warning: [
'bg-warning',
'text-warning-content'
],
error: [
'bg-error',
'text-error-content'
]
};
export const ThemePreviewCard = ({ title })=>{
return /*#__PURE__*/ React.createElement("div", {
className: "grid grid-cols-5 grid-rows-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "col-start-1 row-span-2 row-start-1 bg-base-200"
}), /*#__PURE__*/ React.createElement("div", {
className: "col-start-1 row-span-2 row-start-3 bg-base-300"
}), /*#__PURE__*/ React.createElement("div", {
className: "col-span-4 col-start-2 row-span-4 row-start-1 flex flex-col gap-1 bg-base-100 p-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "font-bold"
}, title), /*#__PURE__*/ React.createElement("div", {
className: "grid grid-cols-4 gap-1"
}, Object.entries(Colors).map(([name, [bg, content]])=>/*#__PURE__*/ React.createElement("div", {
key: name,
title: name,
className: classNames('bg-primary flex aspect-square w-5 items-center justify-center rounded lg:w-6', bg)
}, /*#__PURE__*/ React.createElement("div", {
className: classNames('text-sm font-bold', content)
}, name[0].toUpperCase()))))));
};
//# sourceMappingURL=ThemePreviewCard.js.map