// @ts-nocheck
import React from "react";
import ReactDOM from "react-dom";
import { View, Panel, PanelHeader, AppRoot, AdaptivityProvider, ConfigProvider, SplitLayout, SplitCol, Group, Search, Div, FixedLayout, Separator } from "@vkontakte/vkui";
import "@vkontakte/vkui/dist/vkui.css";

function App() {
  return (
      <View activePanel="fixedLayout">
        <Panel id="fixedLayout">
          <PanelHeader>Fixed layout</PanelHeader>
          <Group>
            <FixedLayout vertical="top">
              <Search />
            </FixedLayout>
            <Div style={{ paddingTop: 60, paddingBottom: 60, color: "gray" }}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a
              sollicitudin lectus, a commodo sapien. Vivamus a urna leo. Integer
              iaculis dignissim urna, sit amet vestibulum diam bibendum a. Donec
              eu arcu ut augue porttitor faucibus. Vestibulum nec pretium
              tortor, sit amet congue nunc. Aenean ullamcorper ex sem, sed
              interdum quam consequat et. Vestibulum a ex non diam fringilla
              feugiat. Nunc eu tellus sed leo elementum cursus. Mauris blandit
              porta egestas. Curabitur eget justo elementum, malesuada lacus ut,
              congue mauris. Integer orci nisi, convallis vitae dapibus sit
              amet, molestie a risus. Aenean ultricies lacus eros, sit amet
              condimentum urna malesuada et. Sed quis dolor tempus orci
              fringilla volutpat in sed velit. Aenean aliquet bibendum pretium.
            </Div>
            <FixedLayout filled vertical="bottom">
              <Separator wide />
              <Div>Fixed layout (bottom)</Div>
            </FixedLayout>
          </Group>
        </Panel>
      </View>
  );
}

ReactDOM.render(
  <ConfigProvider>
    <AdaptivityProvider>
      <AppRoot>
        <App />
      </AppRoot>
    </AdaptivityProvider>
  </ConfigProvider>,
  document.getElementById("root")
);