Section Headers

import React from "react";

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

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, 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`
    },
    header: {
      alignContent: "center",
      alignItems: "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.sizeXXL}px 0px`
    },
    textWrapper: {
      width: "100%"
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <Space
          size="middle"
          direction={screens.md ? "horizontal" : "vertical"}
          style={styles.header}
        >
          <Space style={styles.textWrapper} direction="vertical" size={4}>
            <Title style={styles.title}>Profile details</Title>
            <Text style={styles.paragraph}>
              Edit your profile details and change your avatar.
            </Text>
          </Space>
          <Space>
            <Button>Cancel</Button>
            <Button type="primary">Save</Button>
          </Space>
        </Space>
        <Divider direction="horizontal" />
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </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 { Title, Text } = Typography;

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

  const items = [
    {
      label: "Action 1",
      key: "1",
      type: "primary",
    },
    {
      label: "Action 2",
      key: "2",
      type: "default",
    },
    {
      label: "Action 3",
      key: "3",
      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`
    },
    header: {
      backgroundColor: token.colorBgContainer
    },
    header: {
      alignContent: "center",
      alignItems: "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.sizeXXL}px 0px`
    },
    textWrapper: {
      width: "100%"
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <Space size="middle" direction="horizontal" style={styles.header}>
          <Space style={styles.textWrapper} direction="vertical" size={4}>
            <Title style={styles.title}>Profile details</Title>
            <Text style={styles.paragraph}>
              Edit your profile details and change your avatar.
            </Text>
          </Space>
          <Space>
            <Dropdown menu={menuProps} placement="bottomRight" arrow>
              <Button type="text" icon={<MoreOutlined />} />
            </Dropdown>
          </Space>
        </Space>
        <Divider direction="horizontal" />
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
      </div>
    </div>
  );
}

import React from "react";

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

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

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

  const { Search } = Input;

  const onSearch = (value) => console.log(value);

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    header: {
      alignContent: "center",
      alignItems: "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.sizeXXL}px 0px`
    },
    textWrapper: {
      width: "100%"
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <Space
          size="middle"
          direction={screens.md ? "horizontal" : "vertical"}
          style={styles.header}
        >
          <Space style={styles.textWrapper} direction="vertical" size={4}>
            <Title style={styles.title}>Profile details</Title>
            <Text style={styles.paragraph}>
              Edit your profile details and change your avatar.
            </Text>
          </Space>
          <Space>
            <Search
              placeholder="Search"
              onSearch={onSearch}
              style={{
                width: screens.md ? 264 : "100%",
              }}
            />
          </Space>
        </Space>
        <Divider direction="horizontal" />
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
      </div>
    </div>
  );
}

import React from "react";

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

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, 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`
    },
    header: {
      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.sizeXXL}px 0px`
    },
    textWrapper: {
      width: "100%"
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <Space
          size="middle"
          direction={screens.md ? "horizontal" : "vertical"}
          style={styles.header}
        >
          <Space style={styles.textWrapper} direction="vertical" size={4}>
            <Title style={styles.title}>Profile details</Title>
            <Text style={styles.paragraph}>
              Edit your profile details and change your avatar.
            </Text>
          </Space>
        </Space>
        <Divider direction="horizontal" />
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
      </div>
    </div>
  );
}