diff --git a/apps/astraplusplus/widget/Common/Components/Button.jsx b/apps/astraplusplus/widget/Common/Components/Button.jsx new file mode 100644 index 0000000..cf55f30 --- /dev/null +++ b/apps/astraplusplus/widget/Common/Components/Button.jsx @@ -0,0 +1,61 @@ +const children = props.children ?? "Button"; +const onClick = props.onClick ?? (() => {}); +const href = props.href; +const variant = props.variant ?? "primary"; // primary, success, danger + +const tag = href ? "a" : "button"; + +const Wrapper = styled[tag]` + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + border-radius: 100px; + font-weight: 600; + font-size: 14px; + line-height: 15px; + text-align: center; + cursor: pointer; + white-space: nowrap; + padding: 12px 32px; + border: 1px solid #d7dbdf; + + color: ${(p) => { + switch (p.variant) { + case "primary": + return "#11181c"; + case "success": + return "#000"; + case "danger": + return "#fff"; + } + }} !important; + background: ${(p) => { + switch (p.variant) { + case "primary": + return "#FBFCFD"; + case "success": + return "#59e692"; + case "danger": + return "#e5484d"; + } + }}; + + &:hover, + &:focus { + text-decoration: none; + outline: none; + opacity: 0.9; + } + + &:disabled { + opacity: 0.7; + cursor: not-allowed; + } +`; + +return ( + onClick} href={href} variant={variant} {...props}> + {children} + +); \ No newline at end of file diff --git a/apps/astraplusplus/widget/Common/Components/Markdown.jsx b/apps/astraplusplus/widget/Common/Components/Markdown.jsx new file mode 100644 index 0000000..7c5edff --- /dev/null +++ b/apps/astraplusplus/widget/Common/Components/Markdown.jsx @@ -0,0 +1,51 @@ +const initialText = props.initialText ?? "# Hello World\n\n"; +const height = props.height ?? "500px"; + +const code = ` + + + + + + +
+ + +`; + +return ( +