Inline Panel

import { OdsButton } from '@ods/components/react.button';
import { OdsInlinePanel } from '@ods/components/react.inline-panel';
import { OdsIcon } from '@ods/components/react.icon';
import { OdsSegmentedGroup } from '@ods/components/react.segmented-group';
import { OdsSegmentedItem } from '@ods/components/react.segmented-item';

const css = `
  .inline-panel-demo ::part(content_wrapper) {
    position: unset;  /* The panel has fixed positioning, this is necessary to render correctly in the docs site. */
    height: 500px;
  }
`;

const Example = () => {
  return (
    <div className='inline-panel-demo'>
      <OdsInlinePanel>
        <div slot='header'>
          Header
        </div>

        <div ods-layout="px:lg" ods-text="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod efficitur quam quis finibus. Aenean et lacus est. Phasellus fringilla non nisi eget posuere. Suspendisse vulputate congue augue sit amet porta. Pellentesque lacus ligula, pulvinar quis molestie eu, vestibulum aliquet enim. Vivamus ultricies tellus urna, nec iaculis ex scelerisque sed. Phasellus eu tempor ipsum, eget gravida nibh. Suspendisse potenti. Praesent maximus, odio id aliquet imperdiet, lorem lacus feugiat turpis, quis luctus neque tellus et urna. Duis urna felis, suscipit tincidunt purus a, ultrices tincidunt urna. Morbi aliquet consequat consequat. Cras sem urna, dictum nec lacinia fringilla, laoreet et nibh. Sed gravida diam ex, in fermentum erat bibendum at. Maecenas lacinia consequat tortor, ac viverra urna dignissim id. Nam eros ante, commodo quis turpis a, interdum ornare erat.
          Sed posuere, ligula eget aliquet porttitor, mi purus viverra urna, luctus iaculis massa libero ut arcu. Vestibulum pulvinar nec mi et mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur facilisis turpis eget ante gravida ultricies. Suspendisse maximus elit in tincidunt porta. Aenean egestas mattis justo at condimentum. Suspendisse iaculis mi nisi, sit amet scelerisque elit tempor sit amet. Aenean eu sem vel metus ullamcorper ullamcorper et quis sem. Etiam luctus bibendum eros eu placerat. Nulla cursus urna id laoreet pulvinar.
        </div>

        <div slot='footer'>
          <OdsButton type="submit" variant="primary">Submit</OdsButton>
          <OdsButton variant="secondary" type="reset">Reset</OdsButton>
        </div>

        <div slot='action-bar'>
          <OdsSegmentedGroup direction="vertical" gap value="1">
            <OdsSegmentedItem value="1">
              <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
            </OdsSegmentedItem>
            <OdsSegmentedItem value="2">
              <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
            </OdsSegmentedItem>
            <OdsSegmentedItem value="3">
              <OdsIcon slot="prefix" name="hemorrhoid" label="hemorrhoid"></OdsIcon>
            </OdsSegmentedItem>
          </OdsSegmentedGroup>
        </div>
      </OdsInlinePanel>

      <style>{css}</style>
    </div>
  )
}

export default Example;