Responsive : styles breakpoints

[ntorionbearstudio]

As Chakra UI provides, we need to add styles breakpoints on all our components.

Example from Chakra UI :

// 1. Import the utilities
import { extendTheme } from "@chakra-ui/react";

// 2. Update the breakpoints as key-value pairs
const breakpoints = {
  base: "0px",
  sm: "320px",
  md: "768px",
  lg: "960px",
  xl: "1200px",
  "2xl": "1536px",
};

// 3. Extend the theme
const theme = extendTheme({ breakpoints });

// 4. Now you can use the custom breakpoints
function Example() {
  return <Box width={{ base: "100%", sm: "50%", md: "25%" }} />;
}