mirror of
https://github.com/CommunityOx/ox_lib.git
synced 2026-08-19 07:56:02 +01:00
feat(nui): TextUI icon support
This commit is contained in:
@@ -3,10 +3,14 @@ import { useNuiEvent } from "../../hooks/useNuiEvent";
|
|||||||
import { Box, Flex, ScaleFade } from "@chakra-ui/react";
|
import { Box, Flex, ScaleFade } from "@chakra-ui/react";
|
||||||
import { debugData } from "../../utils/debugData";
|
import { debugData } from "../../utils/debugData";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
text: string;
|
text: string;
|
||||||
position?: "right-center" | "left-center" | "top-center";
|
position?: "right-center" | "left-center" | "top-center";
|
||||||
|
icon?: IconProp;
|
||||||
|
iconColor?: string;
|
||||||
style?: React.CSSProperties;
|
style?: React.CSSProperties;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -14,8 +18,9 @@ debugData([
|
|||||||
{
|
{
|
||||||
action: "textUi",
|
action: "textUi",
|
||||||
data: {
|
data: {
|
||||||
text: "[E] - Access locker inventory \n [G] - Do something else \n ",
|
text: "[E] - Access locker inventory \n [G] - Do something else",
|
||||||
position: "right-center",
|
position: "right-center",
|
||||||
|
icon: "door-open",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
@@ -54,12 +59,22 @@ const TextUI: React.FC = () => {
|
|||||||
bg="gray.700"
|
bg="gray.700"
|
||||||
boxShadow="lg"
|
boxShadow="lg"
|
||||||
p={3}
|
p={3}
|
||||||
fontFamily="DM Mono"
|
fontFamily="Poppins"
|
||||||
style={data.style}
|
style={data.style}
|
||||||
borderRadius="md"
|
borderRadius="md"
|
||||||
maxW="xs"
|
maxW="xs"
|
||||||
>
|
>
|
||||||
|
<Flex justifyContent="center" alignItems="center">
|
||||||
|
{data.icon && (
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={data.icon}
|
||||||
|
color={data.iconColor}
|
||||||
|
fontSize="1.4rem"
|
||||||
|
style={{ paddingRight: 15 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<ReactMarkdown>{data.text}</ReactMarkdown>
|
<ReactMarkdown>{data.text}</ReactMarkdown>
|
||||||
|
</Flex>
|
||||||
</Box>
|
</Box>
|
||||||
</ScaleFade>
|
</ScaleFade>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|||||||
Reference in New Issue
Block a user