Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 17:26:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Migrate position property of info-card to hove card property

Browse Source
This commit is contained in:
Meier Lukas
2023-08-05 22:15:20 +02:00
parent d851f3bb21
commit d7de49d743
1 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/InfoCard/InfoCard.tsx
View File

@@ -1,15 +1,23 @@
import { DefaultMantineColor, HoverCard, HoverCardProps, SystemProp, useMantineTheme} from '@mantine/core'; import {
import { RichTextEditor, RichTextEditorProps, Link } from '@mantine/tiptap'; DefaultMantineColor,
HoverCard,
HoverCardProps,
SystemProp,
useMantineTheme,
} from '@mantine/core';
import { Link, RichTextEditor, RichTextEditorProps } from '@mantine/tiptap';
import { IconInfoCircle } from '@tabler/icons-react';
import { useEditor } from '@tiptap/react'; import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit'; import StarterKit from '@tiptap/starter-kit';
import { IconInfoCircle } from '@tabler/icons-react';
type A = HoverCardProps['position'];
interface InfoCardProps { interface InfoCardProps {
bg?: SystemProp<DefaultMantineColor>; bg?: SystemProp<DefaultMantineColor>;
cardProp?: Partial<RichTextEditorProps>; cardProp?: Partial<RichTextEditorProps>;
content: string; content: string;
hoverProp?: Partial<HoverCardProps>; hoverProp?: Partial<HoverCardProps>;
position?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" position?: HoverCardProps['position'];
} }
export const InfoCard = ({ bg, cardProp, content, hoverProp, position }: InfoCardProps) => { export const InfoCard = ({ bg, cardProp, content, hoverProp, position }: InfoCardProps) => {
@@ -17,38 +25,25 @@ export const InfoCard = ({ bg, cardProp, content, hoverProp, position }: InfoCar
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, Link],
StarterKit,
Link,
],
}); });
return ( return (
<HoverCard <HoverCard position={position ?? 'top'} radius="md" withArrow withinPortal {...hoverProp}>
position={position?? 'top'}
radius="md"
withArrow
withinPortal
{...hoverProp}
>
<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
bg={bg ?? colorScheme === 'light' ? "gray.2" : "dark.8"} bg={bg ?? colorScheme === 'light' ? 'gray.2' : 'dark.8'}
maw={400} maw={400}
px="10px" px="10px"
py="5px" py="5px"
> >
<RichTextEditor <RichTextEditor editor={editor} style={{ border: '0' }} {...cardProp}>
editor={editor} <RichTextEditor.Content bg="transparent" />
style={{ border:"0", }}
{...cardProp}
>
<RichTextEditor.Content bg="transparent"/>
</RichTextEditor> </RichTextEditor>
</HoverCard.Dropdown> </HoverCard.Dropdown>
</HoverCard> </HoverCard>
) );
}; };