30aeea9eec
* wip * wip * wip * wip * wip * remove hardcoded values and use theme values * add styles to StyledContainer * fix iconPicker bug * wip * refactor IconPicker to include IconButton * close IconPicker on click outside * close IconPicker on escape and enter * refactor to use DropDownMenu * refactor to use DropDownMenu * modify default icon * Refactor to use useIconPicker hook * fix WithSearch story * reinitialized searchString state on close * create and update stories for the iconPicker * remove comments * use theme for gap * remove align-self * fix typo in icon * fix type any * fix merge conflicts * remove experimental css properties
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { SettingsIconSection } from '@/settings/components/SettingsIconSection';
|
|
import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
|
|
import { Breadcrumb } from '@/ui/breadcrumb/components/Breadcrumb';
|
|
import { IconSettings } from '@/ui/icon';
|
|
import { useIconPicker } from '@/ui/input/hooks/useIconPicker';
|
|
import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
|
|
|
|
const StyledContainer = styled.div`
|
|
align-items: flex-start;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(8)};
|
|
height: fit-content;
|
|
padding: ${({ theme }) => theme.spacing(8)};
|
|
width: ${objectSettingsWidth};
|
|
`;
|
|
|
|
export const SettingsNewObject = () => {
|
|
const { Icon, iconKey, setIconPicker } = useIconPicker();
|
|
|
|
return (
|
|
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
|
<StyledContainer>
|
|
<Breadcrumb
|
|
links={[
|
|
{ children: 'Objects', href: '/settings/objects' },
|
|
{ children: 'New' },
|
|
]}
|
|
/>
|
|
|
|
<SettingsIconSection
|
|
Icon={Icon}
|
|
iconKey={iconKey}
|
|
setIconPicker={setIconPicker}
|
|
/>
|
|
</StyledContainer>
|
|
</SubMenuTopBarContainer>
|
|
);
|
|
};
|