stargaze-studio/components/MetadataFormGroup.tsx
Serkan Reis 6ae1e4d9ca
Preview assets on metadata modal (#11)
* Name and length check for assets & metadata

* Disable update_metadata button on metadata modal if no metadatafile is specified

* Enable asset preview on metadata modal

* fix: preview error due to missing assets
2022-08-01 12:51:54 +03:00

32 lines
967 B
TypeScript

import type { ReactNode } from 'react'
export interface MetadataFormGroupProps {
title: string
subtitle: ReactNode
relatedAsset?: File
children?: ReactNode
}
export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
const { title, subtitle, relatedAsset, children } = props
return (
<div className="flex p-4 pt-0 space-x-4 w-full">
<div className="flex flex-col w-1/3">
<label className="flex flex-col space-y-1">
<span className="font-bold">{title}</span>
{subtitle && <span className="text-sm text-white/50">{subtitle}</span>}
<div>
{relatedAsset && (
<div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
<img alt="preview" src={URL.createObjectURL(relatedAsset)} />
</div>
)}
</div>
</label>
</div>
<div className="space-y-4 w-2/3">{children}</div>
</div>
)
}