chore: change component name

Author: yeonjuan

src/App.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Container, Row, Col, Tabs, Tab, Spinner } from "react-bootstrap";
 import { CodeEditor } from "@/components/CodeEditor";
 import { RuleConfig } from "@/components/RuleConfig";
-import { Messages } from "@/components/Messages";
+import { LintMessages } from "@/components/LintMessages";
 import { Header } from "@/components/Header";
 import { Fixed } from "@/components/Fixed";
 import { loadDemoLinter, DemoLinter } from "@/lib/linter";
@@ -88,7 +88,7 @@ export const App: FC = () => {
             ) : (
               <Tabs>
                 <Tab eventKey="messages" title="Messages">
-                  <Messages messages={messages} />
+                  <LintMessages messages={messages} />
                 </Tab>
                 <Tab eventKey="fixed" title="Fixed">
                   <Fixed code={fixed} />

src/components/Message.tsx renamed to src/components/LintMessage.tsx

@@ -11,20 +11,20 @@ interface Props {
   message: Linter.LintMessage;
 }
 
-export const Message: FC<Props> = ({ message }) => {
-  const { line, column, message: lintMsg, ruleId, fatal } = message;
+export const LintMessage: FC<Props> = (props) => {
+  const { line, column, message: lintMsg, ruleId, fatal } = props.message;
 
   return (
     <Alert variant={fatal ? "danger" : "primary"}>
-      {`${line}:${column} - ${lintMsg} (`}
+      {`${line}:${column} - ${lintMsg}`}(
       <Alert.Link
         target="_blank"
         rel="noopener noreferrer"
         href={`${DOCS_PATH}${ruleId?.replace(`${TS_ESLINT_SCOPE}/`, "")}.md`}
       >
         {ruleId}
       </Alert.Link>
-      {")"}
+      )
     </Alert>
   );
 };

src/components/Messages.tsx renamed to src/components/LintMessages.tsx

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