mirror of
https://github.com/CommunityOx/ox_lib.git
synced 2026-08-18 23:46:03 +01:00
refactor(nui): Better organize components
This commit is contained in:
21
web/src/App.tsx
Normal file
21
web/src/App.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import Notifications from "./features/notifications/NotificationWrapper";
|
||||||
|
import CircleProgressbar from "./features/progress/CircleProgressbar";
|
||||||
|
import Progressbar from "./features/progress/Progressbar";
|
||||||
|
import TextUI from "./features/textui/TextUI";
|
||||||
|
import InputDialog from "./features/dialog/InputDialog";
|
||||||
|
import ContextMenu from "./features/menu/ContextMenu";
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Progressbar />
|
||||||
|
<CircleProgressbar />
|
||||||
|
<Notifications />
|
||||||
|
<TextUI />
|
||||||
|
<InputDialog />
|
||||||
|
<ContextMenu />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import Notifications from "./Notifications";
|
|
||||||
import CircleProgressbar from "./CircleProgressbar";
|
|
||||||
import Progressbar from "./Progressbar";
|
|
||||||
import TextUI from "./TextUI";
|
|
||||||
import InputDialog from "./InputDialog";
|
|
||||||
import ContextMenu from "./features/menu/ContextMenu";
|
|
||||||
|
|
||||||
const App: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Progressbar />
|
|
||||||
<CircleProgressbar />
|
|
||||||
<Notifications />
|
|
||||||
<TextUI />
|
|
||||||
<InputDialog />
|
|
||||||
<ContextMenu />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -11,9 +11,9 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useNuiEvent } from "../hooks/useNuiEvent";
|
import { useNuiEvent } from "../../hooks/useNuiEvent";
|
||||||
// import { debugData } from "../utils/debugData";
|
// import { debugData } from "../utils/debugData";
|
||||||
import { fetchNui } from "../utils/fetchNui";
|
import { fetchNui } from "../../utils/fetchNui";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
heading: string;
|
heading: string;
|
||||||
@@ -1,11 +1,11 @@
|
|||||||
import { useNuiEvent } from "../../../hooks/useNuiEvent";
|
import { useNuiEvent } from "../../hooks/useNuiEvent";
|
||||||
import { Box, Text, Flex, ScaleFade } from "@chakra-ui/react";
|
import { Box, Text, Flex, ScaleFade } from "@chakra-ui/react";
|
||||||
import { debugData } from "../../../utils/debugData";
|
import { debugData } from "../../utils/debugData";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { ContextMenuProps } from "../../../interfaces";
|
import { ContextMenuProps } from "../../interfaces";
|
||||||
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";
|
||||||
|
|
||||||
debugData<ContextMenuProps>([
|
debugData<ContextMenuProps>([
|
||||||
{
|
{
|
||||||
@@ -10,8 +10,8 @@ import {
|
|||||||
Spacer,
|
Spacer,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { Option, ContextMenuProps } from "../../../interfaces";
|
import { Option, ContextMenuProps } from "../../interfaces";
|
||||||
import { fetchNui } from "../../../utils/fetchNui";
|
import { fetchNui } from "../../utils/fetchNui";
|
||||||
|
|
||||||
interface DataProps {
|
interface DataProps {
|
||||||
event?: string;
|
event?: string;
|
||||||
@@ -5,8 +5,8 @@ import {
|
|||||||
HStack,
|
HStack,
|
||||||
Text,
|
Text,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import { useNuiEvent } from "../hooks/useNuiEvent";
|
import { useNuiEvent } from "../../hooks/useNuiEvent";
|
||||||
import { debugData } from "../utils/debugData";
|
import { debugData } from "../../utils/debugData";
|
||||||
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";
|
||||||
|
|
||||||
@@ -5,9 +5,9 @@ import {
|
|||||||
Flex,
|
Flex,
|
||||||
ScaleFade,
|
ScaleFade,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import { useNuiEvent } from "../hooks/useNuiEvent";
|
import { useNuiEvent } from "../../hooks/useNuiEvent";
|
||||||
import { debugData } from "../utils/debugData";
|
import { debugData } from "../../utils/debugData";
|
||||||
import { fetchNui } from "../utils/fetchNui";
|
import { fetchNui } from "../../utils/fetchNui";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
duration: number;
|
duration: number;
|
||||||
@@ -6,9 +6,9 @@ import {
|
|||||||
Box,
|
Box,
|
||||||
ScaleFade,
|
ScaleFade,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import { useNuiEvent } from "../hooks/useNuiEvent";
|
import { useNuiEvent } from "../../hooks/useNuiEvent";
|
||||||
import { debugData } from "../utils/debugData";
|
import { debugData } from "../../utils/debugData";
|
||||||
import { fetchNui } from "../utils/fetchNui";
|
import { fetchNui } from "../../utils/fetchNui";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
label: string;
|
label: string;
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { useNuiEvent } from "../hooks/useNuiEvent";
|
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";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import App from "./components/App";
|
import App from "./App";
|
||||||
import { VisibilityProvider } from "./providers/VisibilityProvider";
|
import { VisibilityProvider } from "./providers/VisibilityProvider";
|
||||||
import { ChakraProvider } from "@chakra-ui/react";
|
import { ChakraProvider } from "@chakra-ui/react";
|
||||||
import { theme } from "./theme";
|
import { theme } from "./theme";
|
||||||
|
|||||||
Reference in New Issue
Block a user