my first mdx file

Aliqua et voluptate sit occaecat culpa reprehenderit in Lorem occaecat velit excepteur nostrud dolore ad. Dolor ex labore labore mollit irure ullamco voluptate. Dolore culpa qui excepteur mollit nostrud excepteur in nostrud nostrud. Anim nostrud dolor ea consequat sit nostrud Lorem sit nostrud commodo officia adipisicing minim. Laborum ut sint ex fugiat minim incididunt cillum. Ad duis consequat esse duis veniam nulla laborum quis dolor eu ullamco.

my heading h1

jsx heading one

my heading 6

js
const firstName = 'sumesh'
const lastName = 'majhi'

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

Esse culpa reprehenderit cillum sint. Ut sint commodo nulla minim duis sit deserunt anim proident consectetur non voluptate reprehenderit qui. Esse aute officia non irure mollit. Ut enim non cupidatat in dolor veniam dolore laborum anim proident minim sint incididunt. Esse ullamco laborum labore dolore ad aute sunt fugiat culpa aliqua ex. Ullamco duis veniam Lorem laboris esse et amet Lorem proident Lorem. Veniam tempor quis occaecat dolore enim non dolore.

Ullamco magna fugiat exercitation minim cupidatat aliquip. Consequat ad aliquip nisi cillum ea. Amet ex consectetur dolor ad ad aliquip do sit qui commodo ex excepteur. Tempor adipisicing cillum pariatur reprehenderit incididunt in. Dolor eiusmod voluptate incididunt deserunt aute occaecat do deserunt dolor. Anim non sint adipisicing aliquip occaecat non quis aliquip ipsum enim pariatur enim sit. Sint sit nulla ea laboris duis dolor esse sunt commodo.

Lorem enim laborum duis proident elit qui quis nulla sit pariatur eiusmod culpa. Laborum irure reprehenderit eiusmod sit aute voluptate nisi ea est reprehenderit. Incididunt aliquip ipsum non occaecat. Deserunt ipsum dolor sint incididunt cupidatat tempor laborum occaecat duis Lorem laboris adipisicing. In anim laboris dolor velit Lorem irure cillum enim duis sint proident sit sint irure. Do do incididunt id id id ea labore deserunt aute ut ex sint. Adipisicing esse sunt enim incididunt et amet pariatur duis excepteur enim aliquip voluptate.

Id sunt labore occaecat non. Eiusmod amet sit voluptate dolor ipsum veniam do magna laboris cupidatat. In sit deserunt aliqua in culpa ad. Nisi deserunt voluptate ipsum mollit dolor. Ex ex esse cillum amet fugiat.

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;