MDX test

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div className='flex w-full flex-col items-center gap-2'>
      <div className='bg-primary text-primary-foreground flex size-20 select-none items-center justify-center rounded-lg text-4xl font-bold'>
        {count}
      </div>
      <button
        onClick={() => setCount(prev => prev + 1)}
        className='shadow-xs ring-offset-background bg-mix-background mix-with-muted-foreground focus-visible:outline-none focus-visible:ring-primary active:mix-amount-20% dark:bg-mix-neutral-800 hover:not-active:not-disabled:mix-amount-10% inline-flex h-10 items-center justify-center whitespace-nowrap rounded-md border px-4 text-sm font-medium transition-[background-color,opacity] *:z-10 focus-visible:ring-2 focus-visible:ring-offset-2 active:duration-0 disabled:pointer-events-none disabled:opacity-50 [&>svg]:shrink-0 [&>svg]:text-base'
      >
        Increment
      </button>
    </div>
  );
};