Considering that the forms are likely to have a consistent structure throughout the application, certain sections can be moved into a reusable component.
|
<div className='grid grid-cols-1 py-3 gap-6 md:grid-cols-3 border-b border-pearl'> |
|
<div className='col-span-1 pt-3'> |
|
<h3 className='text-lg font-medium'>Asset Information</h3> |
|
</div> |
|
<div className='md:col-span-2 bg-white rounded-md shadow-md'> |
|
<div className='w-full p-4 gap-4 grid grid-cols-1 lg:grid-cols-3'> |
|
<div> |
|
<p className='font-medium'>Code</p> |
|
<p className='mt-1'>{peer.asset.code}</p> |
|
</div> |
|
<div> |
|
<p className='font-medium'>Scale</p> |
|
<p className='mt-1'>{peer.asset.scale}</p> |
|
</div> |
|
<div> |
|
<p className='font-medium'>Withdrawal threshold</p> |
|
<p className='mt-1'> |
|
{peer.asset.withdrawalThreshold ?? 'No withdrawal threshhold'} |
|
</p> |
|
</div> |
|
</div> |
|
<div className='flex justify-end p-4'> |
|
<Button |
|
aria-label='go to asset page' |
|
type='button' |
|
to={`/assets/${peer.asset.id}`} |
|
> |
|
View asset |
|
</Button> |
|
</div> |
|
</div> |
|
</div> |
What I currently have in mind is a component that will accept
title,
subtitle, and
children as props.
