feat(web): notify and context markdown wrapper (#174)

Co-authored-by: davidxd33 <dponce@gmail.com>
This commit is contained in:
david
2022-12-15 17:43:14 -05:00
committed by GitHub
parent ccad59fcf6
commit 49bb2a00a1
3 changed files with 7 additions and 4 deletions

View File

@@ -5,6 +5,7 @@ import { ContextMenuProps } from '../../../interfaces/context';
import Item from './Item'; import Item from './Item';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { fetchNui } from '../../../utils/fetchNui'; import { fetchNui } from '../../../utils/fetchNui';
import ReactMarkdown from 'react-markdown';
const openMenu = (id: string | undefined) => { const openMenu = (id: string | undefined) => {
fetchNui<ContextMenuProps>('openContext', { id: id, back: true }); fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
@@ -72,7 +73,7 @@ const ContextMenu: React.FC = () => {
)} )}
<Box borderRadius="md" bg="gray.800" flex="1 85%"> <Box borderRadius="md" bg="gray.800" flex="1 85%">
<Text fontFamily="Poppins" fontSize="md" p={2} textAlign="center" fontWeight="light"> <Text fontFamily="Poppins" fontSize="md" p={2} textAlign="center" fontWeight="light">
{contextMenu.title} <ReactMarkdown>{contextMenu.title}</ReactMarkdown>
</Text> </Text>
</Box> </Box>
<Flex <Flex

View File

@@ -13,6 +13,7 @@ import {
Progress, Progress,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import ReactMarkdown from 'react-markdown';
import { Option, ContextMenuProps } from '../../../interfaces/context'; import { Option, ContextMenuProps } from '../../../interfaces/context';
import { fetchNui } from '../../../utils/fetchNui'; import { fetchNui } from '../../../utils/fetchNui';
@@ -70,12 +71,12 @@ const Item: React.FC<{
<Box w="100%"> <Box w="100%">
<Box> <Box>
<Text w="100%" fontWeight="medium" color={button.disabled ? '#718096' : undefined}> <Text w="100%" fontWeight="medium" color={button.disabled ? '#718096' : undefined}>
{button.title ? button.title : buttonKey} <ReactMarkdown>{button.title ? button.title : buttonKey}</ReactMarkdown>
</Text> </Text>
</Box> </Box>
{button.description && ( {button.description && (
<Box paddingBottom={1} color={button.disabled ? '#718096' : undefined}> <Box paddingBottom={1} color={button.disabled ? '#718096' : undefined}>
<Text>{button.description}</Text> <Text><ReactMarkdown>{button.description}</ReactMarkdown></Text>
</Box> </Box>
)} )}
{button?.progress && ( {button?.progress && (

View File

@@ -2,6 +2,7 @@ import { useToast, type ToastPosition, Box, HStack, Text } from '@chakra-ui/reac
import { useNuiEvent } from '../../hooks/useNuiEvent'; import { useNuiEvent } from '../../hooks/useNuiEvent';
import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import ReactMarkdown from 'react-markdown';
export interface NotificationProps { export interface NotificationProps {
title?: string; title?: string;
@@ -53,7 +54,7 @@ const Notifications: React.FC = () => {
)} )}
<Box w="100%"> <Box w="100%">
{data.title && <Text as="b">{data.title}</Text>} {data.title && <Text as="b">{data.title}</Text>}
{data.description && <Text>{data.description}</Text>} {data.description && <Text><ReactMarkdown>{data.description}</ReactMarkdown></Text>}
</Box> </Box>
</HStack> </HStack>
</Box> </Box>