feat(web/context): images in metadata

This commit is contained in:
Luke
2022-06-11 11:49:25 +02:00
parent 186014f95e
commit a7e2dc0067
3 changed files with 30 additions and 24 deletions

View File

@@ -17,6 +17,7 @@ debugData<ContextMenuProps>([
{
title: "Example button",
description: "Example button description",
image: "https://i.imgur.com/YAe7k17.jpeg",
metadata: [{ label: "Value 1", value: 300 }],
},
{

View File

@@ -8,6 +8,7 @@ import {
Text,
Flex,
Spacer,
Image,
} from "@chakra-ui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Option, ContextMenuProps } from "../../interfaces/context";
@@ -91,31 +92,34 @@ const Item: React.FC<{
maxW="2xs"
>
<PopoverBody>
{Array.isArray(option[1].metadata) ? (
option[1].metadata.map(
(
metadata: string | { label: string; value: any },
index: number
) => (
<Text key={`context-metadata-${index}`}>
{typeof metadata === "string"
? `${metadata}`
: `${metadata.label}: ${metadata.value}`}
</Text>
<>
{option[1].image && <Image src={option[1].image} />}
{Array.isArray(option[1].metadata) ? (
option[1].metadata.map(
(
metadata: string | { label: string; value: any },
index: number
) => (
<Text key={`context-metadata-${index}`}>
{typeof metadata === "string"
? `${metadata}`
: `${metadata.label}: ${metadata.value}`}
</Text>
)
)
)
) : (
<>
{typeof option[1].metadata === "object" &&
Object.entries(option[1].metadata).map(
(metadata: { [key: string]: any }, index) => (
<Text key={`context-metadata-${index}`}>
{metadata[0]}: {metadata[1]}
</Text>
)
)}
</>
)}
) : (
<>
{typeof option[1].metadata === "object" &&
Object.entries(option[1].metadata).map(
(metadata: { [key: string]: any }, index) => (
<Text key={`context-metadata-${index}`}>
{metadata[0]}: {metadata[1]}
</Text>
)
)}
</>
)}
</>
</PopoverBody>
</PopoverContent>
)}

View File

@@ -3,6 +3,7 @@ export interface Option {
title?: string;
description?: string;
arrow?: boolean;
image?: string;
metadata?:
| string[]
| { [key: string]: any }