Most simple components created

lib/component/message/DangerMessageBlock.tsx

@@ -0,0 +1,22 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function DangerMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-red-200 text-red-600"
+			)}
+		/>
+	);
+}

lib/component/message/DarkMessageBlock.tsx

@@ -0,0 +1,22 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function DarkMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-black text-white"
+			)}
+		/>
+	);
+}

lib/component/message/InfoMessageBlock.tsx

@@ -0,0 +1,22 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function InfoMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-cyan-100 text-blue-600"
+			)}
+		/>
+	);
+}

lib/component/message/LightMessageBlock.tsx

@@ -0,0 +1,22 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function LightMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-white text-black"
+			)}
+		/>
+	);
+}

lib/component/message/MessageBlock.tsx

@@ -0,0 +1,36 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+
+
+export default function MessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		outline = "sm",
+		rounded = "lg",
+		...messageProps
+	} = props;
+
+
+	return (
+		<div
+			{...messageProps}
+			className={clsx(
+				className,
+				"px-4 py-2",
+				{
+					"border-0": outline === "none",
+					"border-1": outline === "sm",
+					"border-2": outline === "md",
+					"border-3": outline === "lg"
+				},
+				{
+					"rounded-none": rounded === "none",
+					"rounded-xs": rounded === "xs",
+					"rounded": rounded === "md",
+					"rounded-lg": rounded === "lg",
+					"rounded-xl": rounded === "xl"
+				}
+			)}
+		/>
+	);
+}

lib/component/message/MoltenMessageBlock.tsx

@@ -0,0 +1,22 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function MoltenMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-orange-100 text-orange-600"
+			)}
+		/>
+	);
+}

lib/component/message/PrimaryMessagteBlock.tsx

@@ -0,0 +1,22 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function PrimaryMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-blue-200 text-blue-600"
+			)}
+		/>
+	);
+}

lib/component/message/SecondaryMessageBlock.tsx

@@ -0,0 +1,22 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function SecondaryMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-neutral-200 text-neutral-600"
+			)}
+		/>
+	);
+}

lib/component/message/SuccessMessageBlock.tsx

@@ -0,0 +1,22 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function SuccessMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-green-100 text-green-600"
+			)}
+		/>
+	);
+}

lib/component/message/TertiaryMessageBlock.tsx

@@ -0,0 +1,23 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function TertiaryMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-purple-200 text-purple-600"
+			)}
+		/>
+	);
+}
+

lib/component/message/WarningMessageBlock.tsx

@@ -0,0 +1,22 @@
+import type { MessageBlockProps } from "$/types/Message";
+import clsx from "clsx";
+import MessageBlock from "./MessageBlock";
+
+
+export default function WarningMessageBlock(props: MessageBlockProps){
+	const {
+		className,
+		...messageProps
+	} = props;
+
+
+	return (
+		<MessageBlock
+			{...messageProps}
+			className={clsx(
+				className,
+				"bg-yellow-100 text-yellow-600"
+			)}
+		/>
+	);
+}