My first mdx file

I'm baby hashtag tofu gluten-free flannel umami 90's heirloom letterpress. 3 wolf moon scenester chartreuseblue bottle coloring book live-edge marfa blog fingerstache ugh. Chia whatever street art cray art party locavore pitchfork chambray salvia freegan schlitz. Kombucha mixtape tattooed church-key meditation jianbing tote bag pitchfork fanny pack listicle plaid edison bulb four loko ramps. Synth ethical butcher, retro plaid shabby chic bitters activated charcoal. Cornhole pickled cardigan williamsburg hexagons

my heading h1

my another heading

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

nice text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi expedita, nihil iste voluptas a magnam similique iure! Sapiente tenetur nostrum assumenda, saepe pariatur quaerat nobis ab, distinctio perferendis consequatur quasi!

React Components

counter

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>
  )
}

Liked the post?
Click thumbs up few times

video componentes

regular heading

title heading

inline code

console.log('hello there')

blockquote element

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis amet expedita temporibus excepturi odio voluptate corrupti non? Incidunt reprehenderit, sed iste aperiam necessitatibus quos error velit, consectetur amet, tenetur nesciunt!

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;

all posts