これは「.mdx」で書かれています。
このファイルに以下のコードを書き込みます。
import Button from '../../../components/Button.astro';
<div> <Button title="hoge" /> <Button title="huga" /> <Button title="piyo" /></div>
src/components/Button.astro は、
---const { title } = Astro.props---<button>{ title }</button>
<style> button { background-color: #4CAF50; /* Green background */ border: none; /* Remove borders */ color: white; /* White text */ padding: 6px 32px; /* Padding */ text-align: center; /* Center text */ text-decoration: none; /* Remove underline */ display: inline-block; /* Display as inline block */ font-size: 16px; /* Font size */ margin: 4px 2px; /* Margin */ transition-duration: 0.4s; /* Transition duration */ cursor: pointer; /* Cursor pointer */ }
button:hover { background-color: #45a049; /* Darker green */ } </style>
このファイルの拡張子は「.mdx」なので、以下のボタンはきちんと表示されいるはずです。
なるほど、これが mdx ですか。