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

💄 Made InfoCard more customizable

Browse Source
This commit is contained in:
Tagaishi
2023-08-02 12:23:28 +02:00
parent 58de4aaa6c
commit c3e1345851
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,18 @@
import { HoverCard, useMantineTheme} from '@mantine/core'; import { DefaultMantineColor, HoverCard, HoverCardProps, SystemProp, useMantineTheme} from '@mantine/core';
import { RichTextEditor, Link } from '@mantine/tiptap'; import { RichTextEditor, RichTextEditorProps, Link } from '@mantine/tiptap';
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'; import { IconInfoCircle } from '@tabler/icons-react';
interface InfoCardProps { interface InfoCardProps {
bg?: SystemProp<DefaultMantineColor>;
cardProp: Partial<RichTextEditorProps>;
content: string; 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 { colorScheme } = useMantineTheme();
const editor = useEditor({ const editor = useEditor({
content, content,
@@ -21,17 +25,27 @@ export const InfoCard = ({ content }: InfoCardProps) => {
}); });
return ( return (
<HoverCard position="top" withArrow withinPortal> <HoverCard
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={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 editor={editor} style={{ border:"0", }}> <RichTextEditor
editor={editor}
style={{ border:"0", }}
{...cardProp}
>
<RichTextEditor.Content bg="transparent"/> <RichTextEditor.Content bg="transparent"/>
</RichTextEditor> </RichTextEditor>
</HoverCard.Dropdown> </HoverCard.Dropdown>