my first mdx file

Cloud bread banh mi before they sold out fashion axe, activated charcoal neutra YOLO poutine. Tousled PBR&B four loko, poke tumeric leggings chia tote bag tbh copper mug la croix. Everyday carry neutra chicharrones man bun. Hashtag mixtape prism vaporware tumblr, waistcoat actually migas vegan mumblecore church-key tofu neutra sartorial gochujang. Unicorn fixie craft beer tilde, chambray normcore vice hell of iPhone.

js
const firstName = 'john'
const lastName = 'smith'

React Components

jsx
import React from 'react'
import styled from 'styled-components'
import { AiOutlineLike } from 'react-icons/ai'
const LikeButton = () => {
  const [value, setValue] = React.useState(0)
  return (
    <Wrapper>
      <div>
        <button onClick={() => setValue(value + 1)}>
          <AiOutlineLike />
        </button>
        <p>
          Liked the post?
          <br />
          Click thumbs up few times
        </p>
      </div>
      <span>+{value}</span>
    </Wrapper>
  )
}

video components

regular heading

inline code

console.log('hello there')

blockquote element

Bushwick ramps distillery affogato chicharrones organic XOXO kinfolk occupy etsy jean shorts. Scenester art party organic, flannel sustainable thundercats migas distillery single-origin coffee vexillologist echo park tilde hammock food truck austin.

Bushwick ramps distillery affogato chicharrones organic XOXO kinfolk occupy etsy jean shorts. Scenester art party organic, flannel sustainable thundercats migas distillery single-origin coffee vexillologist echo park tilde hammock food truck austin.

Bushwick ramps distillery affogato chicharrones organic XOXO kinfolk occupy etsy jean shorts. Scenester art party organic, flannel sustainable thundercats migas distillery single-origin coffee vexillologist echo park tilde hammock food truck austin.

Bushwick ramps distillery affogato chicharrones organic XOXO kinfolk occupy etsy jean shorts. +1 af pabst gentrify heirloom. Kickstarter quinoa plaid raclette master cleanse. Vegan wayfarers helvetica retro cray. Scenester art party organic, flannel sustainable thundercats migas distillery single-origin coffee vexillologist echo park tilde hammock food truck austin. Iceland gentrify green juice retro umami banjo vape.

Javascript

js
// comments
const name = 'john'
const channel = 'coding addict'

function featuredProducts(data) {
  return data.filter(item => {
    return item.featured === true
  })
}
featuredProducts()

JSX

jsx
import React from 'react'

const Counter = () => {
  const [count, setCount] = React.useState(0)
  return (
    <section className="counter">
      <h4>show some love to MDX</h4>
      <h4>likes {count}</h4>
      <button className="btn btn-danger" onClick={() => setCount(count + 1)}>
        i like mdx
      </button>
    </section>
  )
}
export default Counter

HTML

html
<h1>hello world</h1>
<p class="random">random text</p>
<section class="contact">
  <div class="title">
    <h1>contact us</h1>
  </div>
</section>

CSS

css
max-width: 500px;
border-radius: var(--radius);
padding: 1rem 1.5rem;
background: var(--clr-grey-10);
text-align: center;