feat: add Messages component

Author: yeonjuan

src/components/Message.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Alert } from "react-bootstrap";
+import type { FC } from "react";
+import type { Linter } from "eslint";
+
+interface Props {
+  message: Linter.LintMessage;
+}
+
+export const Message: FC<Props> = ({ message }) => {
+  const { line, column, message: lintMsg, ruleId, fatal } = message;
+
+  return (
+    <Alert variant={fatal ? "danger" : "primary"}>
+      {`${line}:${column} - ${lintMsg} (${ruleId})`}
+    </Alert>
+  );
+};

src/components/Messages.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Message } from "@/components/Message";
+import { Alert } from "react-bootstrap";
+import type { FC } from "react";
+import type {Linter} from "eslint";
+
+interface Props {
+  messages?: Linter.LintMessage[];
+}
+
+export const Messages: FC<Props> = ({ messages }) => {
+  if (messages?.length === 0) {
+    return <Alert variant="success"> Lint Free :) </Alert>;
+  }
+
+  return (
+    <>
+      {messages?.map((message, index) => (
+        <Message key={index} message={message} />
+      ))}
+    </>
+  );
+};