diff --git a/striker-ui/components/BriefNetworkInterface.tsx b/striker-ui/components/BriefNetworkInterface.tsx new file mode 100644 index 00000000..40845849 --- /dev/null +++ b/striker-ui/components/BriefNetworkInterface.tsx @@ -0,0 +1,66 @@ +import { FC } from 'react'; +import { + Box as MUIBox, + BoxProps as MUIBoxProps, + IconButton as MUIIconButton, + IconButtonProps as MUIIconButtonProps, +} from '@mui/material'; +import { Close as MUICloseIcon } from '@mui/icons-material'; + +import { GREY } from '../lib/consts/DEFAULT_THEME'; + +import Decorator from './Decorator'; +import { BodyText } from './Text'; + +type BriefNetworkInterfaceOptionalProps = { + onClose?: MUIIconButtonProps['onClick']; +}; + +const BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS: Required< + Omit +> & + Pick = { + onClose: undefined, +}; + +const BriefNetworkInterface: FC< + MUIBoxProps & + BriefNetworkInterfaceOptionalProps & { + networkInterface: NetworkInterfaceOverviewMetadata; + } +> = ({ + networkInterface: { networkInterfaceName, networkInterfaceState }, + onClose, + sx: rootSx, + ...restRootProps +}) => ( + :not(:first-child)': { marginLeft: '.5em' }, + + ...rootSx, + }, + + ...restRootProps, + }} + > + + + {onClose && ( + + + + )} + +); + +BriefNetworkInterface.defaultProps = BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS; + +export default BriefNetworkInterface; diff --git a/striker-ui/pages/init/index.tsx b/striker-ui/pages/init/index.tsx index 0fc2f02f..f3cb1558 100644 --- a/striker-ui/pages/init/index.tsx +++ b/striker-ui/pages/init/index.tsx @@ -2,14 +2,11 @@ import { FC, useEffect, useState } from 'react'; import { Box as MUIBox, BoxProps as MUIBoxProps, - IconButton as MUIIconButton, - IconButtonProps as MUIIconButtonProps, iconButtonClasses as muiIconButtonClasses, } from '@mui/material'; import { Add as MUIAddIcon, Check as MUICheckIcon, - Close as MUICloseIcon, DragHandle as MUIDragHandleIcon, } from '@mui/icons-material'; import { @@ -22,6 +19,7 @@ import { v4 as uuidv4 } from 'uuid'; import API_BASE_URL from '../../lib/consts/API_BASE_URL'; import { BLUE, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME'; +import BriefNetworkInterface from '../../components/BriefNetworkInterface'; import Decorator from '../../components/Decorator'; import OutlinedInputWithLabel from '../../components/OutlinedInputWithLabel'; import { @@ -124,57 +122,6 @@ const DataGridCellText: FC = ({ /> ); -type BriefNetworkInterfaceOptionalProps = { - onClose?: MUIIconButtonProps['onClick']; -}; - -const BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS: Required< - Omit -> & - Pick = { - onClose: undefined, -}; - -const BriefNetworkInterface: FC< - MUIBoxProps & - BriefNetworkInterfaceOptionalProps & { - networkInterface: NetworkInterfaceOverviewMetadata; - } -> = ({ - networkInterface: { networkInterfaceName, networkInterfaceState }, - onClose, - sx: rootSx, - ...restRootProps -}) => ( - :not(:first-child)': { marginLeft: '.5em' }, - - ...rootSx, - }, - - ...restRootProps, - }} - > - - - {onClose && ( - - - - )} - -); - -BriefNetworkInterface.defaultProps = BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS; - const createNetworkInterfaceTableColumns = ( handleDragMouseDown: ( row: NetworkInterfaceOverviewMetadata,