diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx index 392cffb8..bcbead37 100644 --- a/resources/scripts/components/elements/PageContentBlock.tsx +++ b/resources/scripts/components/elements/PageContentBlock.tsx @@ -4,23 +4,20 @@ import { CSSTransition } from 'react-transition-group'; import tw from 'twin.macro'; import FlashMessageRender from '@/components/FlashMessageRender'; import { Helmet } from 'react-helmet'; -import useServer from '@/plugins/useServer'; -interface Props { +export interface PageContentBlockProps { title?: string; className?: string; showFlashKey?: string; } -const PageContentBlock: React.FC = ({ title, showFlashKey, className, children }) => { - const { name } = useServer(); - +const PageContentBlock: React.FC = ({ title, showFlashKey, className, children }) => { return ( <> - {!!title && + {title && - {name} | {title} + {title} } diff --git a/resources/scripts/components/elements/ServerContentBlock.tsx b/resources/scripts/components/elements/ServerContentBlock.tsx new file mode 100644 index 00000000..d2e9bebc --- /dev/null +++ b/resources/scripts/components/elements/ServerContentBlock.tsx @@ -0,0 +1,19 @@ +import useServer from '@/plugins/useServer'; +import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock'; +import React from 'react'; + +interface Props extends PageContentBlockProps { + title: string; +} + +const ServerContentBlock: React.FC = ({ title, children, ...props }) => { + const { name } = useServer(); + + return ( + + {children} + + ); +}; + +export default ServerContentBlock; diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx index 64d69aec..d0682b8d 100644 --- a/resources/scripts/components/server/network/NetworkContainer.tsx +++ b/resources/scripts/components/server/network/NetworkContainer.tsx @@ -1,10 +1,8 @@ import React, { useEffect, useState } from 'react'; -import { Helmet } from 'react-helmet'; import tw from 'twin.macro'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faNetworkWired } from '@fortawesome/free-solid-svg-icons'; import styled from 'styled-components/macro'; -import PageContentBlock from '@/components/elements/PageContentBlock'; import GreyRowBox from '@/components/elements/GreyRowBox'; import Button from '@/components/elements/Button'; import Can from '@/components/elements/Can'; @@ -19,6 +17,7 @@ import { Textarea } from '@/components/elements/Input'; import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes'; import { debounce } from 'debounce'; import InputSpinner from '@/components/elements/InputSpinner'; +import ServerContentBlock from '@/components/elements/ServerContentBlock'; const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`; const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`; @@ -61,7 +60,7 @@ const NetworkContainer = () => { }, [ error ]); return ( - + {!data ? : @@ -109,7 +108,7 @@ const NetworkContainer = () => { )) } - + ); }; diff --git a/resources/scripts/components/server/startup/StartupContainer.tsx b/resources/scripts/components/server/startup/StartupContainer.tsx index 48129314..2df1e44e 100644 --- a/resources/scripts/components/server/startup/StartupContainer.tsx +++ b/resources/scripts/components/server/startup/StartupContainer.tsx @@ -1,15 +1,15 @@ import React from 'react'; -import PageContentBlock from '@/components/elements/PageContentBlock'; import TitledGreyBox from '@/components/elements/TitledGreyBox'; import useServer from '@/plugins/useServer'; import tw from 'twin.macro'; import VariableBox from '@/components/server/startup/VariableBox'; +import ServerContentBlock from '@/components/elements/ServerContentBlock'; const StartupContainer = () => { const { invocation, variables } = useServer(); return ( - +

@@ -20,7 +20,7 @@ const StartupContainer = () => {

{variables.map(variable => )}
- + ); };