Empty Sections

import React from "react";

import { Grid, 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`
    },
    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`
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
      </div>
    </div>
  );
}

import React from "react";

import { Grid, 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`
    },
    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`
    },
    sectionTitleWrapper: {
      margin: "0 auto",
      marginBottom: token.marginXL,
      maxWidth: screens.lg ? "60%" : "100%",
      textAlign: "center"
    },
    subtitle: {
      color: token.colorTextSecondary
    },
    title: {
      fontSize: screens.sm ? token.fontSizeHeading2 : token.fontSizeHeading3,
      marginTop: "0px"
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <div style={styles.sectionTitleWrapper}>
          <Title style={styles.title} level={2}>
            This is section title
          </Title>
          <Text style={styles.subtitle}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum
            hendrerit ex vitae sodales.
          </Text>
        </div>
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
      </div>
    </div>
  );
}

import React from "react";

import { Grid, 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`
    },
    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`
    },
    sectionTitleWrapper: {
      marginBottom: token.marginXL,
      maxWidth: screens.lg ? "60%" : "100%"
    },
    subtitle: {
      color: token.colorTextSecondary
    },
    title: {
      fontSize: screens.sm ? token.fontSizeHeading2 : token.fontSizeHeading3,
      marginTop: "0px"
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <div style={styles.sectionTitleWrapper}>
          <Title style={styles.title} level={2}>
            This is section title
          </Title>
          <Text style={styles.subtitle}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum
            hendrerit ex vitae sodales.
          </Text>
        </div>
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
      </div>
    </div>
  );
}

import React from "react";

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

import { FileOutlined, PlusOutlined } 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 styles = {
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`,
      textAlign: "center"
    },
    subtitle: {
      color: token.colorTextSecondary,
      marginBottom: token.marginLG
    },
    title: {
      fontSize: screens.sm ? token.fontSizeHeading2 : token.fontSizeHeading3,
      marginTop: "0px"
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeXXL}px 0px`
    },
    icon: {
      fontSize: token.sizeXL,
      color: token.colorIcon,
      marginBottom: token.marginLG
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <Flex vertical align="center">
          <FileOutlined style={styles.icon} />
          <Title style={styles.title} level={1}>
            No projects
          </Title>
          <Text style={styles.subtitle}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum
            hendrerit ex vitae sodales.
          </Text>
          <Button type="primary" icon={<PlusOutlined/>}>New project</Button>
        </Flex>
      </div>
    </div>
  );
}