#chakra-ui #components #config

button.js

const Button = {
  baseStyle: {
    default: {
      border: "none",
      variant: "solid",
      colorScheme: "blue",
      color: "white",
      textAlign: "left",
      pl: 2, // 0.5rem
      _hover: {
        textDecoration: "none",
        border: "1px solid currentColor",
      },
    },
    moreLink: {
      mt: 4, // 1rem
      ml: "20%",
      p: 2, // 0.5rem
      variant: "solid",
      colorScheme: "teal",
      rightIcon: "arrow-forward",
      size: ["xs", null, "md"],
    },
    contactMobile: {
      color: "inherit",
      bg: "transparent",
      border: "1px",
      borderColor: "currentColor",
      ml: "auto",
      mt: 8,
      size: ["2xs", null, null],
    },
    contactDesktop: {
      color: "inherit",
      bg: "transparent",
      border: "1px",
      borderColor: "currentColor",
      textTransform: "capitalize",
      mt: -1,
    },

    navLink: {
      w: ["full", null, null, "auto"],
      p: 3,
      mt: [10, null, null, 0], //  [2.5rem, null, null, 0]
      mr: [null, null, null, 6], // [null, null, null, 1.5rem]
      mb: 2,
      color: "inherit",
      rounded: "5px",
      textTransform: "capitalize",
      textAlign: ["right", null, null, "initial"],
      borderBottom: ["1px solid rgba(255,255,255,0.1)", null, null, "0px"],
      whiteSpace: "nowrap",
    },
  },
}

export default Button

footer.js

const footer = {
  baseStyle: {
    color: "inherit",
    maxW: "7xl", //WRAPPER_MAX_WIDTH
    h: ["auto", null, null, 10],
    mx: "auto",
    py: [5, null, null, 10],
    px: 5,
    display: "flex",
    flexDirection: ["column", null, null, "initial"],
    justifyContent: ["space-between", null, null, "space-between"],
    alignItems: "center",
    textAlign: ["center", null, null, "left"],
  },
}

export default footer

header.js

const base = {
  py: [6, null, null, 4],
  px: [6, null, null, 1],
  mx: "auto",
  maxW: "7xl", // WRAPPER_MAX_WIDTH
  justify: ["space-between"],
  // align: ["stretch", null, null, "center"],
  wrap: ["wrap", null, null, "nowrap"],
}

const header = {
  baseStyle: {},
  sizes: {},
  variants: {
    base: {
      py: [3, null, null, 3],
      px: [6, null, null, 3],
      maxW: ["3xl", null, null, "7xl"], // WRAPPER_MAX_WIDTH
      mx: "auto",
      justifyContent: ["space-between"],
    },
    mobile: {
      display: ["flex", null, null, "none"],
      flexDirection: "column",
      align: ["stretch"],
      wrap: ["wrap"],
      py: 10,
      flex: 1,
      fontSize: "lg",
      overflow: "hidden",
    },
    desktop: {
      display: ["none", null, null, "flex"],
      flexDirection: "row",
      justifyContent: "flex-end",
      alignItems: [null, null, null, "center"],
      wrap: ["wrap", null, null, "nowrap"],
      px: 6,
      flex: 1,
      fontSize: [null, null, null, "md"],
      overflow: "hidden",
    },
  },
  defaultProps: {},
}

export default header

hero.js

import { linearGradient } from "../../components/chakra-ui"

const hero = {
  parts: ["base", "content", "block"],
  baseStyle: {
    base: {
      h: ["30vh", null, null, "50vh"],
      background: linearGradient(14),
    },
    content: {
      position: "absolute",
      top: 0,
      right: 0,
      left: 0,
      mx: "auto",
      mt: [12 * 4, "20%", null, 12 * 4],
      maxW: ["5xl", null, null, null, "60%"],
    },
    block: {
      position: "relative",
      mx: 0,
    },
  },
  sizes: {},
  variants: {},
  defaultProps: {},
}

export default hero

index.js

import Button from "./buttons"
import header from "./header"
import footer from "./footer"
import hero from "./hero"

export default {
  header,
  footer,
  Button,
  hero,
}