Mint Panel
Supply, price and quantity, with the total shown before the button. A price of "0.08 ETH" beside a quantity of 5 is not a number anyone should be multiplying in their head at a mint.
src/components/ui/mint-panel.tsxAbout
From the component's own source, where it was written.
Default label formatters, hoisted out of the parameter list.
An arrow function written inline as a default parameter is a value the React Compiler cannot safely reorder, so it bails on the whole component and none of it gets auto-memoised. At module scope it is a stable reference and the component compiles.
Install
npx astralyx-ui add mint-panel
Usage
import { MintPanel } from '@/components/ui/mint-panel'
<MintPanel minted={3820} supply={5000} price={0.08} priceLabel="ETH" />Composer
Change the props and the source below follows.
- Price
- 0.08 ETH
- Total
- 0.08 ETH
<MintPanel
minted={3820}
supply={5000}
price={0.08}
priceLabel="ETH"
maxPerWallet={5}
alreadyMinted={2}
/>Examples
Mint
<MintPanel minted={3820} supply={5000} price={0.08} priceLabel="ETH" />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
MintPanel
Extends Omit<ComponentProps<'div'>, 'title'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | — |
| minted | number | required | Drives the progress bar and the sold-out state. |
| supply | number | required | Drives the progress bar and the sold-out state. |
| price | number | — | A number so the total can be computed and shown before the button. |
| priceLabel | string | — | A number so the total can be computed and shown before the button. |
| maxPerWallet | number | — | The cap is enforced against what is already held, not just the quantity in the box. |
| alreadyMinted | number | 0 | The cap is enforced against what is already held, not just the quantity in the box. |
| quantity | number | — | — |
| onQuantityChange | (quantity: number) => void | — | — |
| onMint | () => void | — | — |
| disabled | boolean | false | — |
| status | ReactNode | — | — |
| soldOutLabel | ReactNode | 'Sold out' | — |
| mintedLabel | ReactNode | 'Minted' | Precedes the minted-of-supply count. |
| priceRowLabel | ReactNode | 'Price' | — |
| totalLabel | ReactNode | 'Total' | — |
| quantityLabel | string | 'Quantity' | Accessible name for the quantity field. |
| limitReachedLabel | ReactNode | 'Limit reached' | Action label once the per-wallet cap is hit. |
| mintLabel | (quantity: number) => ReactNode | DEFAULT_MINT_LABEL | Action label, given the chosen quantity. |