my first mdx file

Woke forage vinyl coloring book direct trade readymade glossier. Fixie fashion axe stumptown, actually activated charcoal you probably haven't heard of them venmo pinterest mlkshk cray salvia jean shorts. Cardigan humblebrag master cleanse, godard salvia meh small batch you probably haven't heard of them. Cliche XOXO affogato, blog fixie pitchfork art party humblebrag.

js
const firstName = 'Zenis';
const lastName = 'Losiuks';

nice text

Vaporware godard keffiyeh, subway tile kickstarter ethical waistcoat coloring book sustainable taxidermy raw denim franzen intelligentsia. Locavore brunch shabby chic flexitarian, coloring book tousled retro vexillologist pickled subway tile forage pug. Synth semiotics flexitarian, pork belly lomo offal tacos brunch drinking vinegar ethical prism stumptown. Sartorial vaporware palo santo, twee stumptown hammock lomo. Selfies narwhal occupy master cleanse squid hashtag +1 salvia enamel pin. Flexitarian forage synth four loko everyday carry.

React Components

counter

0
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

title heading

inline code

console.log('hello there')

blockquote element

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, aspernatur quam. Libero eius rerum incidunt!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, aspernatur quam. Libero eius rerum incidunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi similique eveniet laborum magni molestiae optio, voluptates dolorum alias? Explicabo, ad ut. Voluptates, quod fugiat repellendus molestias quibusdam ullam ratione mollitia.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, aspernatur quam. Libero eius rerum incidunt! Voluptates, quod fugiat repellendus molestias quibusdam ullam ratione mollitia.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, aspernatur quam. Libero eius rerum incidunt! Voluptates, quod fugiat repellendus molestias quibusdam ullam ratione mollitia. Voluptates, quod fugiat repellendus molestias quibusdam ullam ratione mollitia.

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