import { Notification, KIND } from "baseui/notification";

import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import * as BlockExports from "baseui/block";

import Basic from "examples/block/basic.tsx";
import Responsive from "examples/block/responsive.tsx";
import Override from "examples/block/override.tsx";

export default Layout;

<Notification
  overrides={{ Body: { style: { width: "auto" } } }}
  kind={KIND.warning}
>
  We recommend using the <a href="/components/use-styletron">useStyletron</a>{" "}
  hook to apply css styles to your html elements. It allows for simpler patterns
  with less custom api to learn. It aligns much closer to basic html/css without
  React and maintains the efficient inline benefits of using the Block
  component.
</Notification>

# Block

The `Block` component is a helper component that lets you write these common less-reusable elements more succinctly inline.

One of the most common needs when building web apps is creating layout elements that have certain layout and typography styles.

For more traditional apps that use global stylesheets, many of the popular CSS frameworks have helper classes to quickly create
styled elements (see [Bootstrap](https://getbootstrap.com/docs/4.1/utilities/sizing/), [Tachyons](http://tachyons.io/docs/layout/spacing/)).

The move to CSS-in-JS sort of eliminates these classes in favor of encapsulating styles within components. This is a generally a good thing because it promotes reusability, however the reality is that there are dozens or hundreds of different layout/spacing/typography combinations in any app, and there's not always a clear semantic meaning or potential for reuse. In practice you end up just defining and naming a bunch of things at the top of the file:

<Example title="Block basic Usage" path="block/basic.tsx">
  <Basic />
</Example>

## Responsive Layouts

Block component props accept either a single value or array of values. When an array is provided,
it will create media queries for each item based on the theme breakpoint values.

By default, the breakpoint values are

```js
breakpoints: {
  small: 320,
  medium: 600,
  large: 1136,
}
```

Given a `marginTop` value of `['10px', '20px', '30px', '40px']` `Block` will create the css rules below:

```css
margin-top: 10px;
@media screen and (min-width: 320px) {
  margin-top: 20px;
}
@media screen and (min-width: 600px) {
  margin-top: 30px;
}
@media screen and (min-width: 1280px) {
  margin-top: 40px;
}
```

## Examples

<Example title="Responsive Properties" path="block/responsive.tsx">
  <Responsive />
</Example>

<Example title="Overrides" path="block/override.tsx">
  <Override />
</Example>

<Exports component={BlockExports} title="Block exports" path="baseui/block" />