FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 06:56:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(nui): Add markdown support to text ui

Browse Source 
Also changed the font to be a monospaced font, avoids weird alignment issues
This commit is contained in:
Luke
2022-03-26 11:02:38 +01:00
parent a3874965bc
commit ccf00a6a9e
4 changed files with 898 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/package.json
View File

@@ -5,26 +5,27 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@chakra-ui/react": "^1.8.6", "@chakra-ui/react": "^1.8.6",
"@emotion/react": "11", "@emotion/react": "^11.8.2",
"@emotion/styled": "11", "@emotion/styled": "^11.8.1",
"@fortawesome/fontawesome-svg-core": "^6.1.0", "@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.0", "@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.0", "@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.0", "@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18", "@fortawesome/react-fontawesome": "^0.1.18",
"@testing-library/jest-dom": "^5.16.1", "@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.2", "@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"@types/jest": "^26.0.24", "@types/jest": "^26.0.24",
"@types/node": "^16.11.18", "@types/node": "^16.11.26",
"@types/react": "^17.0.38", "@types/react": "^17.0.43",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.14",
"framer-motion": "6", "framer-motion": "^6.2.8",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-markdown": "^8.0.1",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"typescript": "^4.5.5", "typescript": "^4.6.3",
"web-vitals": "^2.1.3" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "cross-env PUBLIC_URL=/ craco start", "start": "cross-env PUBLIC_URL=/ craco start",
@@ -52,8 +53,14 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@babel/core": ">=7.0.0 <8.0.0",
"@babel/plugin-syntax-flow": "^7.14.5",
"@babel/plugin-transform-react-jsx": "^7.14.9",
"@craco/craco": "^6.4.3", "@craco/craco": "^6.4.3",
"@testing-library/dom": "^8.11.4",
"autoprefixer": "^10.0.2",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"postcss": "^8.1.0",
"rimraf": "^3.0.2" "rimraf": "^3.0.2"
} }
} }

1323
web/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

10
web/src/components/TextUI.tsx
View File

@@ -2,6 +2,7 @@ import React from "react";
import { useNuiEvent } from "../hooks/useNuiEvent"; import { useNuiEvent } from "../hooks/useNuiEvent";
import { Box, Flex, ScaleFade, Text } from "@chakra-ui/react"; import { Box, Flex, ScaleFade, Text } from "@chakra-ui/react";
import { debugData } from "../utils/debugData"; import { debugData } from "../utils/debugData";
import ReactMarkdown from "react-markdown";
interface Props { interface Props {
text: string; text: string;
@@ -13,7 +14,7 @@ debugData([
{ {
action: "textUi", action: "textUi",
data: { data: {
text: "[E] - Access locker inventory", text: "[E] - Access locker inventory \n [G] - Do something else \n ",
position: "right-center", position: "right-center",
}, },
}, },
@@ -53,11 +54,14 @@ const TextUI: React.FC = () => {
bg="gray.700" bg="gray.700"
boxShadow="lg" boxShadow="lg"
p={3} p={3}
fontFamily="Poppins" fontFamily="DM Mono"
style={data.style} style={data.style}
borderRadius="md" borderRadius="md"
maxW="xs"
> >
<Text>{data.text}</Text> <Text>
<ReactMarkdown>{data.text}</ReactMarkdown>
</Text>
</Box> </Box>
</ScaleFade> </ScaleFade>
</Flex> </Flex>

1
web/src/index.css
View File

@@ -1,6 +1,7 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
body { body {
background: none !important; background: none !important;