53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
|
|
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
|
|
import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
|
|
import { AppPath } from '@/types/AppPath';
|
|
import { IconSettings } from '@/ui/display/icon';
|
|
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
|
|
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
|
|
|
const StyledContainer = styled.div`
|
|
height: fit-content;
|
|
padding: ${({ theme }) => theme.spacing(8)};
|
|
width: ${objectSettingsWidth};
|
|
`;
|
|
|
|
export const SettingsObjectEdit = () => {
|
|
const navigate = useNavigate();
|
|
const { pluralObjectName = '' } = useParams();
|
|
const activeObject = activeObjectItems.find(
|
|
(activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!activeObject) navigate(AppPath.NotFound);
|
|
}, [activeObject, navigate]);
|
|
|
|
return (
|
|
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
|
<StyledContainer>
|
|
<Breadcrumb
|
|
links={[
|
|
{ children: 'Objects', href: '/settings/objects' },
|
|
{
|
|
children: activeObject?.name ?? '',
|
|
href: `/settings/objects/${pluralObjectName}`,
|
|
},
|
|
{ children: 'Edit' },
|
|
]}
|
|
/>
|
|
{activeObject && (
|
|
<SettingsObjectIconSection
|
|
Icon={activeObject.Icon}
|
|
iconKey={activeObject.Icon.name}
|
|
/>
|
|
)}
|
|
</StyledContainer>
|
|
</SubMenuTopBarContainer>
|
|
);
|
|
};
|