feat: add different markdown component for tooltips

Signed-off-by: Rudraksh Tyagi <[email protected]>
layer5io · May 19, 2024 · c20b368 · c20b368
1 parent 24d1301
commit c20b368
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
@@ -1,23 +1,25 @@
 import { Tooltip, type TooltipProps } from '@mui/material';
 import React from 'react';
 import { CHARCOAL, WHITE } from '../../theme';
-import RenderMarkdown from '../Markdown';
+import { RenderMarkdownTooltip } from '../Markdown';
 
 type CustomTooltipProps = {
   title: string | React.ReactNode | JSX.Element;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   children: React.ReactNode;
   fontSize?: string;
   fontWeight?: number;
+  variant?: 'standard' | 'small';
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
 function CustomTooltip({
   title,
   onClick,
   placement,
   children,
-  fontSize = '1rem',
+  fontSize,
   fontWeight = 400,
+  variant = 'small',
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
@@ -27,10 +29,10 @@ function CustomTooltip({
           sx: {
             background: CHARCOAL,
             color: WHITE,
-            fontSize: { fontSize },
+            fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
             fontWeight: { fontWeight },
             borderRadius: '0.5rem',
-            padding: '0.9rem'
+            padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem'
           }
         },
         popper: {
@@ -39,7 +41,7 @@ function CustomTooltip({
           }
         }
       }}
-      title={<RenderMarkdown content={typeof title === 'string' ? title : ''} />}
+      title={<RenderMarkdownTooltip content={typeof title === 'string' ? title : ''} />}
       placement={placement}
       arrow
       onClick={onClick}

diff --git a/src/custom/Markdown/index.tsx b/src/custom/Markdown/index.tsx
@@ -10,19 +10,22 @@ import {
   StyledMarkdownH5,
   StyledMarkdownH6,
   StyledMarkdownLi,
+  StyledMarkdownP,
   StyledMarkdownTd,
   StyledMarkdownTh,
+  StyledMarkdownTooltipP,
   StyledMarkdownUl
 } from './style';
 export interface RenderMarkdownProps {
   content: string;
 }
 
-const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
+export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
       components={{
+        p: ({ ...props }) => <StyledMarkdownP>{props.children}</StyledMarkdownP>,
         a: ({ ...props }) => <StyledMarkdown>{props.children}</StyledMarkdown>,
         h1: ({ ...props }) => <StyledMarkdownH1>{props.children}</StyledMarkdownH1>,
         h2: ({ ...props }) => <StyledMarkdownH2>{props.children}</StyledMarkdownH2>,
@@ -44,4 +47,29 @@ const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
   );
 };
 
-export default RenderMarkdown;
+export const RenderMarkdownTooltip: React.FC<RenderMarkdownProps> = ({ content }) => {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        p: ({ ...props }) => <StyledMarkdownTooltipP>{props.children}</StyledMarkdownTooltipP>,
+        a: ({ ...props }) => <StyledMarkdown>{props.children}</StyledMarkdown>,
+        h1: ({ ...props }) => <StyledMarkdownH1>{props.children}</StyledMarkdownH1>,
+        h2: ({ ...props }) => <StyledMarkdownH2>{props.children}</StyledMarkdownH2>,
+        h3: ({ ...props }) => <StyledMarkdownH3>{props.children}</StyledMarkdownH3>,
+        h4: ({ ...props }) => <StyledMarkdownH4>{props.children}</StyledMarkdownH4>,
+        h5: ({ ...props }) => <StyledMarkdownH5>{props.children}</StyledMarkdownH5>,
+        h6: ({ ...props }) => <StyledMarkdownH6>{props.children}</StyledMarkdownH6>,
+        blockquote: ({ ...props }) => (
+          <StyledMarkdownBlockquote>{props.children}</StyledMarkdownBlockquote>
+        ),
+        ul: ({ ...props }) => <StyledMarkdownUl>{props.children}</StyledMarkdownUl>,
+        li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
+        th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
+        td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+};
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
@@ -28,7 +28,7 @@ import { FlipCard, FlipCardProps } from './FlipCard';
 import { useWindowDimensions } from './Helpers/Dimension';
 import { useNotificationHandler } from './Helpers/Notification';
 import { LearningCard } from './LearningCard';
-import RenderMarkdown from './Markdown';
+import { RenderMarkdown } from './Markdown';
 import { ModalCard } from './ModalCard';
 import PopperListener, { IPopperListener } from './PopperListener';
 import ResponsiveDataTable, { ResponsiveDataTableProps } from './ResponsiveDataTable';