Section Footers

import React from "react";

import { Button, Divider, Grid, Space, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    footer: {
      display: "flex",
      justifyContent: "flex-end",
      width: "100%"
    },
    paragraph: {
      color: token.colorTextSecondary
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeLG}px 0px`
    },
    textWrapper: {
      width: "100%"
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
        <Divider direction="horizontal" />
        <div style={styles.footer}>
          <Space>
            <Button>Cancel</Button>
            <Button type="primary">Save</Button>
          </Space>
        </div>
      </div>
    </div>
  );
}

import React from "react";

import { Button, Divider, Dropdown, Grid, Space, theme, Typography } from "antd";

import { MoreOutlined } from "@ant-design/icons";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const items = [
    {
      label: "Action 1",
      key: "1",
      type: "default",
    },
    {
      label: "Action 2",
      key: "2",
      type: "default",
    },
    {
      label: "Action 3",
      key: "3",
      type: "default",
    },
    {
      label: "Action 4",
      key: "4",
      type: "default",
    },
  ];
  const menuProps = {
    items,
  };

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    footer: {
      alignContent: "center",
      alignItems: screens.md ? "flex-end" : "flex-start",
      justifyContent: "space-between",
      width: "100%"
    },
    paragraph: {
      color: token.colorTextSecondary
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeLG}px 0px`
    },
    textWrapper: {
      width: "100%"
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
        <Divider direction="horizontal" />
        <Space size="middle" direction="horizontal" style={styles.footer}>
          {screens.lg ? (
            <Space.Compact>
              {items.map((item) => (
                <Button key={item.key} type={item.type}>
                  {item.label}
                </Button>
              ))}
            </Space.Compact>
          ) : (
            <Dropdown menu={menuProps} placement="topRight" arrow>
              <Button type="text" icon={<MoreOutlined />} />
            </Dropdown>
          )}
          <Space>
            <Button>Cancel</Button>
            <Button type="primary">Save</Button>
          </Space>
        </Space>
      </div>
    </div>
  );
}

import React from "react";

import { Divider, Grid, Pagination, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    footer: {
      display: "flex",
      justifyContent: screens.md ? "end" : "center",
      width: "100%"
    },
    header: {
      backgroundColor: token.colorBgContainer
    },
    paragraph: {
      color: token.colorTextSecondary
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeLG}px 0px`
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
        <Divider direction="horizontal" />

        <div style={styles.footer}>
          <Pagination defaultCurrent={1} total={50} />
        </div>
      </div>
    </div>
  );
}