From c3e1345851a57271f9ca324a90a89cf6c66c5d3a Mon Sep 17 00:00:00 2001
From: Tagaishi <tagaishi@hotmail.ch>
Date: Wed, 2 Aug 2023 12:23:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Made=20InfoCard=20more=20customi?=
 =?UTF-8?q?zable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/InfoCard/InfoCard.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/InfoCard/InfoCard.tsx b/src/components/InfoCard/InfoCard.tsx
index 81fc9363d..90f660da4 100644
--- a/src/components/InfoCard/InfoCard.tsx
+++ b/src/components/InfoCard/InfoCard.tsx
@@ -1,14 +1,18 @@
-import { HoverCard, useMantineTheme} from '@mantine/core';
-import { RichTextEditor, Link } from '@mantine/tiptap';
+import { DefaultMantineColor, HoverCard, HoverCardProps, SystemProp, useMantineTheme} from '@mantine/core';
+import { RichTextEditor, RichTextEditorProps, Link } from '@mantine/tiptap';
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { IconInfoCircle } from '@tabler/icons-react';
 
 interface InfoCardProps {
+  bg?: SystemProp<DefaultMantineColor>;
+  cardProp: Partial<RichTextEditorProps>;
   content: string;
+  hoverProp?: Partial<HoverCardProps>;
+  position?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start"
 }
 
-export const InfoCard = ({ content }: InfoCardProps) => {
+export const InfoCard = ({ bg, cardProp, content, hoverProp, position }: InfoCardProps) => {
   const { colorScheme } = useMantineTheme();
   const editor = useEditor({
     content,
@@ -21,17 +25,27 @@ export const InfoCard = ({ content }: InfoCardProps) => {
   });
 
   return (
-    <HoverCard position="top" withArrow withinPortal>
+    <HoverCard
+      position={position?? 'top'}
+      radius="md"
+      withArrow
+      withinPortal
+      {...hoverProp}
+    >
       <HoverCard.Target>
         <IconInfoCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
       </HoverCard.Target>
       <HoverCard.Dropdown
-        bg={colorScheme === 'light' ? "gray.2" : "dark.8"}
+        bg={bg ?? colorScheme === 'light' ? "gray.2" : "dark.8"}
         maw={400}
         px="10px"
         py="5px"
       >
-        <RichTextEditor editor={editor} style={{ border:"0", }}>
+        <RichTextEditor
+          editor={editor}
+          style={{ border:"0", }}
+          {...cardProp}
+        >
           <RichTextEditor.Content bg="transparent"/>
         </RichTextEditor>
       </HoverCard.Dropdown>