コードブロックテスト

Reactコンポーネント

import clsx from 'clsx';
import styles from './Message.module.scss';

type MessageProps = {
  type?: 'default' | 'error' | 'success';
  className?: string;
  children?: React.ReactNode;
}

export default function Message(props: MessageProps) {
  return (
    <p className={clsx(
      styles.root,
      {
        [styles.typeError]: props.type === 'error',
        [styles.typeSuccess]: props.type === 'success'
      },
      props.className
    )}>{props.children}</p>
  );
}