🎨 reworked structure of infocard + added arrow

This commit is contained in:
Tagaishi
2023-08-02 04:32:20 +02:00
parent f0a343dfc9
commit 58de4aaa6c

View File

@@ -13,7 +13,7 @@ export const InfoCard = ({ content }: InfoCardProps) => {
const editor = useEditor({ const editor = useEditor({
content, content,
editable: false, editable: false,
editorProps:{ attributes:{ style: 'padding: 0;' }, }, editorProps: { attributes: { style: 'padding: 0;' }, },
extensions: [ extensions: [
StarterKit, StarterKit,
Link, Link,
@@ -21,22 +21,18 @@ export const InfoCard = ({ content }: InfoCardProps) => {
}); });
return ( return (
<HoverCard withinPortal position="top"> <HoverCard position="top" withArrow withinPortal>
<HoverCard.Target> <HoverCard.Target>
<IconInfoCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconInfoCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</HoverCard.Target> </HoverCard.Target>
<HoverCard.Dropdown <HoverCard.Dropdown
c='transparent' bg={colorScheme === 'light' ? "gray.2" : "dark.8"}
maw={400} maw={400}
p={0} px="10px"
style={{ border:"0", }} py="5px"
> >
<RichTextEditor editor={editor}> <RichTextEditor editor={editor} style={{ border:"0", }}>
<RichTextEditor.Content <RichTextEditor.Content bg="transparent"/>
bg={colorScheme === 'light' ? "gray.2" : "dark.8"}
px="10px"
py="5px"
/>
</RichTextEditor> </RichTextEditor>
</HoverCard.Dropdown> </HoverCard.Dropdown>
</HoverCard> </HoverCard>