create segmentation and measurement mdx
This commit is contained in:
Rodrigo Antinarelli
James A. Petts
parent
bfdcf6ecb6
commit
af7f2f525b
@ -28,6 +28,7 @@ export {
|
||||
MeasurementTable,
|
||||
NavBar,
|
||||
Select,
|
||||
SegmentationTable,
|
||||
SidePanel,
|
||||
StudyListExpandedRow,
|
||||
StudyListPagination,
|
||||
|
||||
@ -1,255 +1,116 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Icon, ButtonGroup, Button, IconButton } from '@ohif/ui';
|
||||
import { Icon } from '@ohif/ui';
|
||||
|
||||
const MeasurementTable = () => {
|
||||
const tableData = new Array(12).fill('');
|
||||
const MeasurementTable = ({ title, amount, data }) => {
|
||||
const [activeItem, setActiveItem] = useState(null);
|
||||
|
||||
const colorLUT = [
|
||||
'#932a13',
|
||||
'#821393',
|
||||
'#2b7fc4',
|
||||
'#12c457',
|
||||
'#7f7d2e',
|
||||
'#7f2e4a',
|
||||
'#866943',
|
||||
'#65ae7f',
|
||||
'#334b5f',
|
||||
'#3cb0dc',
|
||||
'#292ac9',
|
||||
'#629753',
|
||||
];
|
||||
|
||||
const renderTable = (title, amount, data) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
||||
<span className="text-base font-bold text-white tracking-widest uppercase">
|
||||
{title}
|
||||
</span>
|
||||
<span className="text-base font-bold text-white">{amount}</span>
|
||||
</div>
|
||||
{/* MEASUREMENT ITEMS */}
|
||||
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
|
||||
{!!data.length &&
|
||||
data.map((e, i) => {
|
||||
const itemKey = i;
|
||||
const currentItem = i + 1;
|
||||
const isActive = !!activeItem && activeItem[title] === i;
|
||||
return (
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
||||
<span className="text-base font-bold text-white tracking-widest uppercase">
|
||||
{title}
|
||||
</span>
|
||||
<span className="text-base font-bold text-white">{amount}</span>
|
||||
</div>
|
||||
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-80">
|
||||
{!!data.length &&
|
||||
data.map((e, i) => {
|
||||
const itemKey = i;
|
||||
const currentItem = i + 1;
|
||||
const isActive = !!activeItem && activeItem[title] === i;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={classnames(
|
||||
'group flex cursor-default bg-black border border-transparent transition duration-300 ',
|
||||
{
|
||||
'rounded overflow-hidden border-primary-light': isActive,
|
||||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
setActiveItem((s) => {
|
||||
return {
|
||||
...s,
|
||||
[title]: s && s[title] === itemKey ? null : itemKey,
|
||||
};
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div
|
||||
key={i}
|
||||
className={classnames(
|
||||
'group flex cursor-default bg-black border border-transparent transition duration-300 ',
|
||||
'text-center w-6 py-1 text-base transition duration-300',
|
||||
{
|
||||
'rounded overflow-hidden border-primary-light': isActive,
|
||||
'bg-primary-light text-black': isActive,
|
||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
setActiveItem((s) => {
|
||||
return {
|
||||
...s,
|
||||
[title]: s && s[title] === itemKey ? null : itemKey,
|
||||
};
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div
|
||||
{currentItem}
|
||||
</div>
|
||||
<div className="px-2 py-1 flex flex-1 flex-col relative">
|
||||
<span className="text-base text-primary-light mb-1">
|
||||
Label short description
|
||||
</span>
|
||||
<span className="pl-2 border-l border-primary-light text-base text-white">
|
||||
24.0 x 24.0 mm (S:4, I:22)
|
||||
</span>
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-center w-6 py-1 text-base transition duration-300',
|
||||
'text-white w-4 absolute cursor-pointer transition duration-300',
|
||||
{
|
||||
'bg-primary-light text-black': isActive,
|
||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||
'invisible opacity-0 mr-2': !isActive,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{currentItem}
|
||||
</div>
|
||||
<div className="px-2 py-1 flex flex-1 flex-col relative">
|
||||
<span className="text-base text-primary-light mb-1">
|
||||
Label short description
|
||||
</span>
|
||||
<span className="pl-2 border-l border-primary-light text-base text-white">
|
||||
24.0 x 24.0 mm (S:4, I:22)
|
||||
</span>
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-4 absolute cursor-pointer transition duration-300',
|
||||
{
|
||||
'invisible opacity-0 mr-2': !isActive,
|
||||
}
|
||||
)}
|
||||
name="pencil"
|
||||
style={{
|
||||
top: 4,
|
||||
right: 4,
|
||||
transform: isActive ? '' : 'translateX(100%)',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
// stopPropagation needed to avoid disable the current active item
|
||||
e.stopPropagation();
|
||||
alert('Edit');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
name="pencil"
|
||||
style={{
|
||||
top: 4,
|
||||
right: 4,
|
||||
transform: isActive ? '' : 'translateX(100%)',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
// stopPropagation needed to avoid disable the current active item
|
||||
e.stopPropagation();
|
||||
alert('Edit');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{!data.length && (
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{!data.length && (
|
||||
<div
|
||||
className={classnames(
|
||||
'group flex cursor-default bg-black border border-transparent transition duration-300 '
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classnames(
|
||||
'group flex cursor-default bg-black border border-transparent transition duration-300 '
|
||||
'text-center w-6 py-1 text-base transition duration-300 bg-primary-dark text-primary-light group-hover:bg-secondary-main'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classnames(
|
||||
'text-center w-6 py-1 text-base transition duration-300 bg-primary-dark text-primary-light group-hover:bg-secondary-main'
|
||||
)}
|
||||
></div>
|
||||
<div className="px-2 py-4 flex flex-1 items-center justify-between">
|
||||
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
|
||||
No tracked measurements
|
||||
</span>
|
||||
</div>
|
||||
></div>
|
||||
<div className="px-2 py-4 flex flex-1 items-center justify-between">
|
||||
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
|
||||
No tracked measurements
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderSegments = (title, amount, data) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
||||
<span className="text-base font-bold text-white tracking-widest uppercase">
|
||||
{title}
|
||||
</span>
|
||||
<div className="flex">
|
||||
<span className="text-base font-bold text-white">{amount}</span>
|
||||
<Icon
|
||||
name="eye-hidden"
|
||||
className="w-6 text-white ml-2 cursor-pointer transition duration-300 hover:opacity-80"
|
||||
onClick={() => alert('TBD')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
|
||||
{!!data.length &&
|
||||
data.map((e, i) => {
|
||||
const itemKey = i;
|
||||
const currentItem = i + 1;
|
||||
const isActive = !!activeItem && activeItem[title] === i;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={classnames(
|
||||
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
|
||||
{
|
||||
'border-primary-light': isActive,
|
||||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
setActiveItem((s) => {
|
||||
return {
|
||||
...s,
|
||||
[title]: s && s[title] === itemKey ? null : itemKey,
|
||||
};
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={classnames(
|
||||
'text-center w-6 py-1 text-base transition duration-300',
|
||||
{
|
||||
'bg-primary-light text-black': isActive,
|
||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{currentItem}
|
||||
</div>
|
||||
<div className="px-2 py-1 flex flex-1 items-center justify-between">
|
||||
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full mr-2"
|
||||
style={{ backgroundColor: colorLUT[i] }}
|
||||
></div>
|
||||
Label short description
|
||||
</span>
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-6 cursor-pointer transition duration-300 hover:opacity-80'
|
||||
)}
|
||||
name="eye-visible"
|
||||
onClick={(e) => {
|
||||
// stopPropagation needed to avoid disable the current active item
|
||||
e.stopPropagation();
|
||||
alert('Toggle');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-y-auto overflow-x-hidden invisible-scrollbar pb-4">
|
||||
{/* HEADER */}
|
||||
<div className="p-2">
|
||||
<div className="leading-none">
|
||||
<span className="text-white text-base mr-2">07-Sep-2010</span>
|
||||
<span className="px-1 text-black bg-common-bright text-base rounded-sm font-bold">
|
||||
CT
|
||||
</span>
|
||||
</div>
|
||||
<div className="leading-none">
|
||||
<span className="text-base text-primary-light">
|
||||
CHEST/ABD/PELVIS W CONTRAST
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* TABLE */}
|
||||
{renderTable('Measurements', null, [])}
|
||||
{renderTable('Measurements', 5, tableData)}
|
||||
{renderTable('ADDITIONAL FINDINGS', 5, tableData)}
|
||||
{renderSegments('SEGMENTS', 12, tableData)}
|
||||
|
||||
{/* BUTTONS */}
|
||||
<div className="mt-4 flex justify-center">
|
||||
<ButtonGroup onClick={() => alert('Export')}>
|
||||
<Button
|
||||
className="text-white border-primary-main bg-black text-base py-2 px-2"
|
||||
size="initial"
|
||||
color="inherit"
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
<IconButton
|
||||
className="bg-black border-primary-main px-2 text-white px-2"
|
||||
color="inherit"
|
||||
size="initial"
|
||||
>
|
||||
<Icon name="arrow-down" />
|
||||
</IconButton>
|
||||
</ButtonGroup>
|
||||
<Button
|
||||
className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
|
||||
variant="outlined"
|
||||
size="initial"
|
||||
color="inherit"
|
||||
onClick={() => alert('Create Report')}
|
||||
>
|
||||
Create Report
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
MeasurementTable.defaultProps = {
|
||||
amount: null,
|
||||
data: [],
|
||||
};
|
||||
|
||||
MeasurementTable.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
data: PropTypes.array, // TODO: define better the array structure
|
||||
};
|
||||
|
||||
export default MeasurementTable;
|
||||
|
||||
@ -19,9 +19,26 @@ import { MeasurementTable } from '@ohif/ui';
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const tableData = {
|
||||
title: 'Measurements',
|
||||
amount: 10,
|
||||
data: new Array(10).fill(''),
|
||||
};
|
||||
return (
|
||||
<div className="p-4">
|
||||
<MeasurementTable />
|
||||
<div className="p-4 w-80">
|
||||
<MeasurementTable {...tableData} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Empty Data
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
<MeasurementTable title="Measurements" />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -0,0 +1,114 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Icon } from '@ohif/ui';
|
||||
|
||||
const SegmentationTable = ({ title, amount, data }) => {
|
||||
const [activeItem, setActiveItem] = useState(null);
|
||||
|
||||
// TODO: colorLUT should be defined in the application
|
||||
const colorLUT = [
|
||||
'#932a13',
|
||||
'#821393',
|
||||
'#2b7fc4',
|
||||
'#12c457',
|
||||
'#7f7d2e',
|
||||
'#7f2e4a',
|
||||
'#866943',
|
||||
'#65ae7f',
|
||||
'#334b5f',
|
||||
'#3cb0dc',
|
||||
'#292ac9',
|
||||
'#629753',
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
||||
<span className="text-base font-bold text-white tracking-widest uppercase">
|
||||
{title}
|
||||
</span>
|
||||
<div className="flex">
|
||||
<span className="text-base font-bold text-white">{amount}</span>
|
||||
<Icon
|
||||
name="eye-hidden"
|
||||
className="w-6 text-white ml-2 cursor-pointer transition duration-300 hover:opacity-80"
|
||||
onClick={() => alert('TBD')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
|
||||
{!!data.length &&
|
||||
data.map((e, i) => {
|
||||
const itemKey = i;
|
||||
const currentItem = i + 1;
|
||||
const isActive = !!activeItem && activeItem[title] === i;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={classnames(
|
||||
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
|
||||
{
|
||||
'border-primary-light': isActive,
|
||||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
setActiveItem((s) => {
|
||||
return {
|
||||
...s,
|
||||
[title]: s && s[title] === itemKey ? null : itemKey,
|
||||
};
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={classnames(
|
||||
'text-center w-6 py-1 text-base transition duration-300',
|
||||
{
|
||||
'bg-primary-light text-black': isActive,
|
||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{currentItem}
|
||||
</div>
|
||||
<div className="px-2 py-1 flex flex-1 items-center justify-between">
|
||||
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full mr-2"
|
||||
style={{ backgroundColor: colorLUT[i] }}
|
||||
></div>
|
||||
Label short description
|
||||
</span>
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-6 cursor-pointer transition duration-300 hover:opacity-80'
|
||||
)}
|
||||
name="eye-visible"
|
||||
onClick={(e) => {
|
||||
// stopPropagation needed to avoid disable the current active item
|
||||
e.stopPropagation();
|
||||
alert('Toggle');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SegmentationTable.defaultProps = {
|
||||
amount: null,
|
||||
data: [],
|
||||
};
|
||||
|
||||
SegmentationTable.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
data: PropTypes.array, // TODO: define better the array structure
|
||||
};
|
||||
|
||||
export default SegmentationTable;
|
||||
@ -0,0 +1,37 @@
|
||||
---
|
||||
name: Segmentation Table
|
||||
menu: Data Display
|
||||
route: components/segmentationTable
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { SegmentationTable } from '@ohif/ui';
|
||||
|
||||
# Segmentation Table
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { SegmentationTable } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const tableData = {
|
||||
title: 'Segments',
|
||||
amount: 12,
|
||||
data: new Array(12).fill(''),
|
||||
};
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
<SegmentationTable {...tableData} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={SegmentationTable} />
|
||||
3
platform/ui/src/components/SegmentationTable/index.js
Normal file
3
platform/ui/src/components/SegmentationTable/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import SegmentationTable from './SegmentationTable';
|
||||
|
||||
export default SegmentationTable;
|
||||
@ -14,6 +14,7 @@ import Label from './Label';
|
||||
import MeasurementTable from './MeasurementTable';
|
||||
import NavBar from './NavBar';
|
||||
import Select from './Select';
|
||||
import SegmentationTable from './SegmentationTable';
|
||||
import SidePanel from './SidePanel';
|
||||
import Svg from './Svg';
|
||||
import StudyListExpandedRow from './StudyListExpandedRow';
|
||||
@ -44,6 +45,7 @@ export {
|
||||
MeasurementTable,
|
||||
NavBar,
|
||||
Select,
|
||||
SegmentationTable,
|
||||
SidePanel,
|
||||
Svg,
|
||||
StudyListExpandedRow,
|
||||
|
||||
@ -5,44 +5,112 @@ route: examples/viewer
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { NavBar, SidePanel, Svg, MeasurementTable } from '@ohif/ui';
|
||||
import {
|
||||
NavBar,
|
||||
SidePanel,
|
||||
Svg,
|
||||
MeasurementTable,
|
||||
SegmentationTable,
|
||||
ButtonGroup,
|
||||
Button,
|
||||
Icon,
|
||||
IconButton,
|
||||
} from '@ohif/ui';
|
||||
|
||||
# Viewer
|
||||
|
||||
<Playground>
|
||||
<div>
|
||||
<NavBar className="justify-start">
|
||||
<div className="m-3">
|
||||
<Svg name="logo-ohif" />
|
||||
</div>
|
||||
</NavBar>
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: 'calc(100vh - 57px' }}
|
||||
>
|
||||
<SidePanel
|
||||
side="left"
|
||||
iconName="group-layers"
|
||||
iconLabel="Studies"
|
||||
componentLabel="Studies"
|
||||
defaultIsOpen={false}
|
||||
>
|
||||
<div className="flex justify-center text-white p-2">
|
||||
panel placeholder
|
||||
{() => {
|
||||
const measurementTableData = {
|
||||
title: 'Measurements',
|
||||
amount: 10,
|
||||
data: new Array(10).fill(''),
|
||||
};
|
||||
const segmentationTableData = {
|
||||
title: 'Segments',
|
||||
amount: 12,
|
||||
data: new Array(12).fill(''),
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<NavBar className="justify-start">
|
||||
<div className="m-3">
|
||||
<Svg name="logo-ohif" />
|
||||
</div>
|
||||
</NavBar>
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: 'calc(100vh - 57px' }}
|
||||
>
|
||||
<SidePanel
|
||||
side="left"
|
||||
iconName="group-layers"
|
||||
iconLabel="Studies"
|
||||
componentLabel="Studies"
|
||||
defaultIsOpen={false}
|
||||
>
|
||||
<div className="flex justify-center text-white p-2">
|
||||
panel placeholder
|
||||
</div>
|
||||
</SidePanel>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
|
||||
CONTENT
|
||||
</div>
|
||||
<SidePanel
|
||||
side="right"
|
||||
iconName="list-bullets"
|
||||
iconLabel="Measure"
|
||||
componentLabel="Measurements"
|
||||
defaultIsOpen={true}
|
||||
>
|
||||
<div className="overflow-y-auto overflow-x-hidden invisible-scrollbar">
|
||||
{/* HEADER */}
|
||||
<div className="p-2">
|
||||
<div className="leading-none">
|
||||
<span className="text-white text-base mr-2">07-Sep-2010</span>
|
||||
<span className="px-1 text-black bg-common-bright text-base rounded-sm font-bold">
|
||||
CT
|
||||
</span>
|
||||
</div>
|
||||
<div className="leading-none">
|
||||
<span className="text-base text-primary-light">
|
||||
CHEST/ABD/PELVIS W CONTRAST
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<MeasurementTable tableData={measurementTableData} />
|
||||
<SegmentationTable tableData={segmentationTableData} />
|
||||
</div>
|
||||
<div className="p-4 flex justify-center">
|
||||
<ButtonGroup onClick={() => alert('Export')}>
|
||||
<Button
|
||||
className="text-white border-primary-main bg-black text-base py-2 px-2"
|
||||
size="initial"
|
||||
color="inherit"
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
<IconButton
|
||||
className="bg-black border-primary-main px-2 text-white px-2"
|
||||
color="inherit"
|
||||
size="initial"
|
||||
>
|
||||
<Icon name="arrow-down" />
|
||||
</IconButton>
|
||||
</ButtonGroup>
|
||||
<Button
|
||||
className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
|
||||
variant="outlined"
|
||||
size="initial"
|
||||
color="inherit"
|
||||
onClick={() => alert('Create Report')}
|
||||
>
|
||||
Create Report
|
||||
</Button>
|
||||
</div>
|
||||
</SidePanel>
|
||||
</div>
|
||||
</SidePanel>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
|
||||
CONTENT
|
||||
</div>
|
||||
<SidePanel
|
||||
side="right"
|
||||
iconName="list-bullets"
|
||||
iconLabel="Measure"
|
||||
componentLabel="Measurements"
|
||||
defaultIsOpen={true}
|
||||
>
|
||||
<MeasurementTable />
|
||||
</SidePanel>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user