Markdown Alert 컴포넌트 생성 (10.04)

seoko97 · Oct 4, 2023 · 6c0236a · 6c0236a
2 parents 24a11f2 + 61f87fa
commit 6c0236a
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 6 deletions.
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
@@ -134,6 +134,50 @@ const ICONS = {
       <path d="M7 10l5 5 5-5z"></path>
     </svg>
   ),
+
+  ExclamationCircleIcon: (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      viewBox="0 0 512 512"
+      strokeWidth="0"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
+    </svg>
+  ),
+  CheckCircleIcon: (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
+    </svg>
+  ),
+  ExclamationTriangleIcon: (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      viewBox="0 0 576 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
+    </svg>
+  ),
+  TimesCircleIcon: (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path>
+    </svg>
+  ),
 };
 
 export const {
@@ -155,6 +199,10 @@ export const {
   LikeIcon,
   BookmarkIcon,
   TriangleIcon,
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  TimesCircleIcon,
 } = Object.entries(ICONS).reduce(
   (result, [key, IconComponent]) => ({
     ...result,

diff --git a/src/components/ui/Markdown/overrides/alert.tsx b/src/components/ui/Markdown/overrides/alert.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  TimesCircleIcon,
+} from "@components/icons";
+
+interface IProps {
+  children: React.ReactNode;
+  type: "info" | "success" | "warning" | "danger";
+}
+
+const typeMapping = {
+  info: {
+    icon: ExclamationCircleIcon,
+    style: "border-[#4433ff] bg-[#dfebf6] dark:border-[#617bff] dark:bg-[#182635]",
+    iconStyle: "text-[#4433ff] dark:text-[#617bff]",
+  },
+  success: {
+    icon: CheckCircleIcon,
+    style: "border-[#00cc88] bg-[#00cc88]/10",
+    iconStyle: "text-[#00cc88]",
+  },
+  warning: {
+    icon: ExclamationTriangleIcon,
+    style: "border-[#ff9d00] bg-[#ffdd00]/25 dark:border-[#ff8000] dark:bg-[#ffa200]/10",
+    iconStyle: "text-[#ff9d00] dark:text-[#ff8000] !rounded-md",
+  },
+  danger: {
+    icon: TimesCircleIcon,
+    style: "border-[#f90657] bg-[#d6054b]/10 dark:border-[#fa3879] dark:bg-[#d6054b]/10",
+    iconStyle: "text-[#f90657] dark:text-[#fa3879]",
+  },
+};
+
+const Alert = ({ type = "info", children }: IProps) => {
+  const { icon: Icon, style, iconStyle } = typeMapping[type];
+
+  return (
+    <div
+      className={`${style} relative my-12 rounded-md border-l-2 px-5 py-3 transition-colors sm:border-l-4 [&>*:not(svg)]:my-4`}
+    >
+      <Icon
+        className={`${iconStyle} duration-default absolute -left-0.5 top-0 h-8 w-8 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full border border-[theme(backgroundColor.primary)] bg-primary p-0.5 transition-[background-color,border] sm:h-10 sm:w-10`}
+      />
+      {children}
+    </div>
+  );
+};
+
+export default Alert;
diff --git a/src/components/ui/Markdown/overrides/code/index.tsx b/src/components/ui/Markdown/overrides/code/index.tsx
@@ -6,6 +6,7 @@ import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
 
 import SyntaxHighlighter from "react-syntax-highlighter/dist/esm/prism-light";
 
+import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
 import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
 import jsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
 import tsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
@@ -21,6 +22,7 @@ SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("bash", bash);
 SyntaxHighlighter.registerLanguage("css", css);
 SyntaxHighlighter.registerLanguage("json", json);
+SyntaxHighlighter.registerLanguage("yaml", yaml);
 
 import InlineCode from "./inlineCode";
 
@@ -29,7 +31,7 @@ interface IProps extends React.HTMLAttributes<HTMLElement> {
 }
 
 const code = ({ children, className = "", ...props }: IProps) => {
-  const language = className.replace("lang-", "");
+  const language = className?.replace("lang-", "");
 
   const isText = language === "txt" || language === "text";
   const TXT_CLASS = isText
@@ -43,10 +45,8 @@ const code = ({ children, className = "", ...props }: IProps) => {
       showLineNumbers={!isText}
       showInlineLineNumbers={true}
       style={oneDark}
-      codeTagProps={{
-        className: "text-sm",
-      }}
-      className={`relative w-full rounded-md !p-4 shadow-md !transition-[background-color] ${TXT_CLASS}`}
+      codeTagProps={{ className: "text-sm" }}
+      className={`relative w-full rounded-md !p-4 shadow-md !transition-[background-color] !text-shadow-none ${TXT_CLASS}`}
     >
       {String(children).replace(/\n$/, "")}
     </SyntaxHighlighter>

diff --git a/src/components/ui/Markdown/overrides/index.ts b/src/components/ui/Markdown/overrides/index.ts
@@ -6,13 +6,15 @@ import img from "@components/ui/Markdown/overrides/img";
 import { headings } from "@components/ui/Markdown/overrides/headings";
 import code from "@components/ui/Markdown/overrides/code";
 import blockquote from "@components/ui/Markdown/overrides/blockquote";
+import Alert from "@components/ui/Markdown/overrides/alert";
 
 const overrides: MarkdownToJSX.Overrides = {
   code,
   pre,
   blockquote,
   img,
   p,
+  Alert,
   ...headings,
 };
 

diff --git a/src/components/ui/Markdown/overrides/pre.tsx b/src/components/ui/Markdown/overrides/pre.tsx
@@ -5,7 +5,7 @@ interface IProps extends React.HTMLAttributes<HTMLElement> {
 }
 
 const pre = ({ children }: IProps) => {
-  const language = children.props.className.replace("lang-", "");
+  const language = children.props.className?.replace("lang-", "");
 
   if (language) {
     return <>{children}</>;