Upload details component styling (#23)

* Add styling to upload details

* Refactor image preview

components/collections/creation/UploadDetails.tsx

@@ -2,7 +2,8 @@ import clsx from 'clsx'
 import { Alert } from 'components/Alert'
 import Anchor from 'components/Anchor'
 import { Conditional } from 'components/Conditional'
-import { StyledInput } from 'components/forms/StyledInput'
+import { TextInput } from 'components/forms/FormInput'
+import { useInputState } from 'components/forms/FormInput.hooks'
 import { MetadataModal } from 'components/MetadataModal'
 import { setBaseTokenUri, setImage, useCollectionStore } from 'contexts/collection'
 import type { ChangeEvent } from 'react'
@@ -35,15 +36,30 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
   const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
   const [uploadService, setUploadService] = useState<UploadServiceType>('nft-storage')
   const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
-
   const [refreshMetadata, setRefreshMetadata] = useState(false)
-  const [nftStorageApiKey, setNftStorageApiKey] = useState(
+
+  const nftStorageApiKeyState = useInputState({
+    id: 'nft-storage-api-key',
+    name: 'nftStorageApiKey',
+    title: 'NFT Storage API Key',
+    placeholder: '...',
+    defaultValue:
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDJBODk5OGI4ZkE2YTM1NzMyYmMxQTRDQzNhOUU2M0Y2NUM3ZjA1RWIiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY1NTE5MTcwNDQ2MiwibmFtZSI6IlRlc3QifQ.IbdV_26bkPHSdd81sxox5AoG-5a4CCEY4aCrdbCXwAE',
-  )
+  })
-  const [pinataApiKey, setPinataApiKey] = useState('c8c2ea440c09ee8fa639')
+  const pinataApiKeyState = useInputState({
-  const [pinataSecretKey, setPinataSecretKey] = useState(
+    id: 'pinata-api-key',
-    '9d6f42dc01eaab15f52eac8f36cc4f0ee4184944cb3cdbcda229d06ecf877ee7',
+    name: 'pinataApiKey',
-  )
+    title: 'Pinata API Key',
+    placeholder: '...',
+    defaultValue: 'c8c2ea440c09ee8fa639',
+  })
+  const pinataSecretKeyState = useInputState({
+    id: 'pinata-secret-key',
+    name: 'pinataSecretKey',
+    title: 'Pinata Secret Key',
+    placeholder: '...',
+    defaultValue: '9d6f42dc01eaab15f52eac8f36cc4f0ee4184944cb3cdbcda229d06ecf877ee7',
+  })
 
   const handleChangeBaseTokenUri = (event: { target: { value: React.SetStateAction<string> } }) => {
     setBaseTokenUri(event.target.value.toString())
@@ -130,9 +146,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
         assetFiles: assetFilesArray,
         metadataFiles: metadataFilesArray,
         uploadService,
-        nftStorageApiKey,
+        nftStorageApiKey: nftStorageApiKeyState.value,
-        pinataApiKey,
+        pinataApiKey: pinataApiKeyState.value,
-        pinataSecretKey,
+        pinataSecretKey: pinataSecretKeyState.value,
       }
       onChange(data)
     } catch (error: any) {
@@ -142,8 +158,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
 
   return (
     <div>
-      <div className="justify-items-start mt-5 mb-3 ml-3 flex-column">
+      <div className="justify-items-start mt-5 mb-3 rounded border border-2 border-white/20 flex-column">
-        <div className="mt-3 ml-4 form-check form-check-inline">
+        <div className="flex justify-center">
+          <div className="mt-3 ml-4 font-bold form-check form-check-inline">
             <input
               checked={uploadMethod === 'existing'}
               className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
@@ -156,7 +173,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
               value="Existing"
             />
             <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio1">
-            Use an existing URI
+              Use an existing base URI
             </label>
           </div>
 
@@ -176,6 +193,8 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
               Upload assets & metadata
             </label>
           </div>
+        </div>
+
         {baseTokenURI && (
           <Alert className="mt-5" type="info">
             <a href={baseTokenURI} rel="noreferrer" target="_blank">
@@ -183,13 +202,11 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
             </a>
           </Alert>
         )}
-      </div>
 
-      <hr className="border-white/20" />
+        <div className="p-3 py-5 pb-8">
-
+          <Conditional test={uploadMethod === 'existing'}>
-      {uploadMethod === 'existing' && (
             <div className="ml-3 flex-column">
-          <p className="my-3 ml-5">
+              <p className="mb-5 ml-5">
                 Though Stargaze&apos;s sg721 contract allows for off-chain metadata storage, it is recommended to use a
                 decentralized storage solution, such as IPFS. <br /> You may head over to{' '}
                 <Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
@@ -215,7 +232,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                 />
               </div>
               <div>
-            <label className="block mt-3 mr-1 mb-1 ml-5 font-bold text-white dark:text-gray-300" htmlFor="baseTokenURI">
+                <label
+                  className="block mt-3 mr-1 mb-1 ml-5 font-bold text-white dark:text-gray-300"
+                  htmlFor="baseTokenURI"
+                >
                   Base Token URI
                 </label>
                 <input
@@ -228,11 +248,12 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                 />
               </div>
             </div>
-      )}
+          </Conditional>
-      {uploadMethod === 'new' && (
+          <Conditional test={uploadMethod === 'new'}>
             <div>
-          <div className="justify-items-start mt-5 mb-3 ml-3 flex-column">
+              <div className="flex flex-col items-center px-8 w-full">
-            <div className="mt-3 ml-4 form-check form-check-inline">
+                <div className="flex justify-items-start mb-5 w-full font-bold">
+                  <div className="form-check form-check-inline">
                     <input
                       checked={uploadService === 'nft-storage'}
                       className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
@@ -249,7 +270,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                     </label>
                   </div>
 
-            <div className="mt-3 ml-4 form-check form-check-inline">
+                  <div className="ml-4 form-check form-check-inline">
                     <input
                       checked={uploadService === 'pinata'}
                       className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
@@ -267,38 +288,33 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                   </div>
                 </div>
 
-          <div className="flex flex-col ml-8 w-1/2">
+                <div className="flex w-full">
                   <Conditional test={uploadService === 'nft-storage'}>
-              <label htmlFor="nft_storage_api_key">NFT.Storage API Key</label>
+                    <TextInput {...nftStorageApiKeyState} className="w-full" />
-              <StyledInput
+                  </Conditional>
-                id="nft_storage_api_key"
+                  <Conditional test={uploadService === 'pinata'}>
-                onChange={(e) => setNftStorageApiKey(e.target.value)}
+                    <TextInput {...pinataApiKeyState} className="w-full" />
-                value={nftStorageApiKey}
+                    <div className="w-[20px]" />
-              />
+                    <TextInput {...pinataSecretKeyState} className="w-full" />
                   </Conditional>
                 </div>
-          <div className="flex flex-col ml-8 w-1/2">
-            <Conditional test={uploadService === 'pinata'}>
-              <label htmlFor="pinata-api_key">Pinata API Key</label>
-              <StyledInput
-                className="flex mb-2 w-1/2"
-                id="pinata_api_key"
-                onChange={(e) => setPinataApiKey(e.target.value)}
-                value={pinataApiKey}
-              />
-              <label htmlFor="pinata_secret_key">Pinata Secret Key</label>
-              <StyledInput
-                className="flex"
-                id="pinata_secret_key"
-                onChange={(e) => setPinataSecretKey(e.target.value)}
-                value={pinataSecretKey}
-              />
-            </Conditional>
               </div>
 
-          <div>
+              <div className="mt-6">
                 <div className="grid grid-cols-2">
                   <div className="w-full">
+                    <Conditional
+                      test={
+                        assetFilesArray.length > 0 &&
+                        metadataFilesArray.length > 0 &&
+                        assetFilesArray.length !== metadataFilesArray.length
+                      }
+                    >
+                      <Alert className="mt-4 ml-8 w-3/4" type="warning">
+                        The number of assets and metadata files should match.
+                      </Alert>
+                    </Conditional>
+
                     <div>
                       <label
                         className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
@@ -354,17 +370,6 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                         </div>
                       </div>
                     )}
-                <Conditional
-                  test={
-                    assetFilesArray.length > 0 &&
-                    metadataFilesArray.length > 0 &&
-                    assetFilesArray.length !== metadataFilesArray.length
-                  }
-                >
-                  <Alert className="mt-4 ml-8 w-3/4" type="warning">
-                    The number of assets and metadata files should match.
-                  </Alert>
-                </Conditional>
 
                     <MetadataModal
                       assetFile={assetFilesArray[metadataFileArrayIndex]}
@@ -374,17 +379,15 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                       updatedMetadataFile={updatedMetadataFilesArray[metadataFileArrayIndex]}
                     />
                   </div>
-              {assetFilesArray.length > 0 && (
+
-                <div className="mt-2 mr-10 ml-20 w-4/5 h-96 border-2 border-dashed carousel carousel-vertical rounded-box">
+                  <Conditional test={assetFilesArray.length > 0}>
+                    <div className="overflow-auto mt-2 mr-10 ml-20 w-4/5 h-96">
                       {assetFilesArray.map((assetSource, index) => (
-                    <div key={`carousel-item-${index}`} className="w-full carousel-item h-1/8">
-                      <div className="grid grid-cols-4 col-auto">
-                        <Conditional test={assetFilesArray.length > 4 * index}>
                         <button
-                            key={4 * index}
+                          key={assetSource.name}
-                            className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
+                          className="relative p-0 w-[100px] h-[100px] bg-transparent hover:bg-transparent border-0 btn modal-button"
                           onClick={() => {
-                              updateMetadataFileIndex(4 * index)
+                            updateMetadataFileIndex(index)
                           }}
                           type="button"
                         >
@@ -392,196 +395,46 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                             className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
                             htmlFor="my-modal-4"
                           >
-                              {getAssetType(assetFilesArray[4 * index]?.name) === 'audio' && (
+                            {getAssetType(assetSource.name) === 'audio' && (
                               <div className="flex relative flex-col items-center mt-2 ml-2">
                                 <img
-                                    key={`audio-${4 * index}`}
+                                  key={`audio-${index}`}
                                   alt="audio_icon"
                                   className="relative mb-2 ml-1 w-6 h-6 thumbnail"
                                   src="/audio.png"
                                 />
-                                  <span className="relative self-center">{assetFilesArray[4 * index]?.name}</span>
+                                <span className="relative self-center">{assetSource.name}</span>
                               </div>
                             )}
-                              {getAssetType(assetFilesArray[4 * index]?.name) === 'video' && (
+                            {getAssetType(assetSource.name) === 'video' && (
                               <video
                                 id="video"
                                 muted
                                 onMouseEnter={(e) => e.currentTarget.play()}
                                 onMouseLeave={(e) => e.currentTarget.pause()}
-                                  src={URL.createObjectURL(assetFilesArray[4 * index])}
+                                src={URL.createObjectURL(assetSource)}
                               />
                             )}
 
-                              {getAssetType(assetFilesArray[4 * index]?.name) === 'image' && (
+                            {getAssetType(assetSource.name) === 'image' && (
                               <img
-                                  key={`image-${4 * index}`}
+                                key={`image-${index}`}
                                 alt="asset"
                                 className="px-1 my-1 thumbnail"
-                                  src={
+                                src={URL.createObjectURL(assetSource)}
-                                    assetFilesArray[4 * index] ? URL.createObjectURL(assetFilesArray[4 * index]) : ''
-                                  }
                               />
                             )}
                           </label>
                         </button>
-                        </Conditional>
-                        <Conditional test={assetFilesArray.length > 4 * index + 1}>
-                          <button
-                            key={4 * index + 1}
-                            className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
-                            onClick={() => {
-                              updateMetadataFileIndex(4 * index + 1)
-                            }}
-                            type="button"
-                          >
-                            <label
-                              className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
-                              htmlFor="my-modal-4"
-                            >
-                              {getAssetType(assetFilesArray[4 * index + 1]?.name) === 'audio' && (
-                                <div className="flex relative flex-col items-center mt-2 ml-2">
-                                  <img
-                                    key={`audio-${4 * index + 1}`}
-                                    alt="audio_icon"
-                                    className="relative mb-2 ml-1 w-6 h-6 thumbnail"
-                                    src="/audio.png"
-                                  />
-                                  <span className="relative self-center">{assetFilesArray[4 * index + 1]?.name}</span>
-                                </div>
-                              )}
-                              {getAssetType(assetFilesArray[4 * index + 1]?.name) === 'video' && (
-                                <video
-                                  id="video"
-                                  muted
-                                  onMouseEnter={(e) => e.currentTarget.play()}
-                                  onMouseLeave={(e) => e.currentTarget.pause()}
-                                  src={URL.createObjectURL(assetFilesArray[4 * index + 1])}
-                                />
-                              )}
-
-                              {getAssetType(assetFilesArray[4 * index + 1]?.name) === 'image' && (
-                                <img
-                                  key={`image-${4 * index + 1}`}
-                                  alt="asset"
-                                  className="px-1 my-1 thumbnail"
-                                  src={
-                                    assetFilesArray[4 * index + 1]
-                                      ? URL.createObjectURL(assetFilesArray[4 * index + 1])
-                                      : ''
-                                  }
-                                />
-                              )}
-                            </label>
-                          </button>
-                        </Conditional>
-                        <Conditional test={assetFilesArray.length > 4 * index + 2}>
-                          <button
-                            key={4 * index + 2}
-                            className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
-                            onClick={() => {
-                              updateMetadataFileIndex(4 * index + 2)
-                            }}
-                            type="button"
-                          >
-                            <label
-                              className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
-                              htmlFor="my-modal-4"
-                            >
-                              {getAssetType(assetFilesArray[4 * index + 2]?.name) === 'audio' && (
-                                <div className="flex relative flex-col items-center mt-2 ml-2">
-                                  <img
-                                    key={`audio-${4 * index + 2}`}
-                                    alt="audio_icon"
-                                    className="relative mb-2 ml-1 w-6 h-6 thumbnail"
-                                    src="/audio.png"
-                                  />
-                                  <span className="relative self-center">{assetFilesArray[4 * index + 2]?.name}</span>
-                                </div>
-                              )}
-                              {getAssetType(assetFilesArray[4 * index + 2]?.name) === 'video' && (
-                                <video
-                                  id="video"
-                                  muted
-                                  onMouseEnter={(e) => e.currentTarget.play()}
-                                  onMouseLeave={(e) => e.currentTarget.pause()}
-                                  src={URL.createObjectURL(assetFilesArray[4 * index + 2])}
-                                />
-                              )}
-
-                              {getAssetType(assetFilesArray[4 * index + 2]?.name) === 'image' && (
-                                <img
-                                  key={`image-${4 * index + 2}`}
-                                  alt="asset"
-                                  className="px-1 my-1 thumbnail"
-                                  src={
-                                    assetFilesArray[4 * index + 2]
-                                      ? URL.createObjectURL(assetFilesArray[4 * index + 2])
-                                      : ''
-                                  }
-                                />
-                              )}
-                            </label>
-                          </button>
-                        </Conditional>
-                        <Conditional test={assetFilesArray.length > 4 * index + 3}>
-                          <button
-                            key={4 * index + 3}
-                            className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
-                            onClick={() => {
-                              updateMetadataFileIndex(4 * index + 3)
-                            }}
-                            type="button"
-                          >
-                            <label
-                              className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
-                              htmlFor="my-modal-4"
-                            >
-                              {getAssetType(assetFilesArray[4 * index + 3]?.name) === 'audio' && (
-                                <div className="flex relative flex-col items-center mt-2 ml-2">
-                                  <img
-                                    key={`audio-${4 * index + 3}`}
-                                    alt="audio_icon"
-                                    className="relative mb-2 ml-1 w-6 h-6 thumbnail"
-                                    src="/audio.png"
-                                  />
-                                  <span className="relative self-center">{assetFilesArray[4 * index + 3]?.name}</span>
-                                </div>
-                              )}
-                              {getAssetType(assetFilesArray[4 * index + 3]?.name) === 'video' && (
-                                <video
-                                  id="video"
-                                  muted
-                                  onMouseEnter={(e) => e.currentTarget.play()}
-                                  onMouseLeave={(e) => e.currentTarget.pause()}
-                                  src={URL.createObjectURL(assetFilesArray[4 * index + 3])}
-                                />
-                              )}
-
-                              {getAssetType(assetFilesArray[4 * index + 3]?.name) === 'image' && (
-                                <img
-                                  key={`image-${4 * index + 3}`}
-                                  alt="asset"
-                                  className="px-1 my-1 thumbnail"
-                                  src={
-                                    assetFilesArray[4 * index + 3]
-                                      ? URL.createObjectURL(assetFilesArray[4 * index + 3])
-                                      : ''
-                                  }
-                                />
-                              )}
-                            </label>
-                          </button>
-                        </Conditional>
-                      </div>
-                    </div>
                       ))}
                     </div>
-              )}
+                  </Conditional>
                 </div>
               </div>
             </div>
-      )}
+          </Conditional>
+        </div>
+      </div>
     </div>
   )
 }

components/forms/FormInput.tsx

@@ -17,9 +17,9 @@ export type FormInputProps = BaseProps & SlicedInputProps
 
 export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
   function FormInput(props, ref) {
-    const { id, name, title, subtitle, isRequired, ...rest } = props
+    const { id, name, title, subtitle, isRequired, className, ...rest } = props
     return (
-      <FormControl htmlId={id} isRequired={isRequired} subtitle={subtitle} title={title}>
+      <FormControl className={className} htmlId={id} isRequired={isRequired} subtitle={subtitle} title={title}>
         <StyledInput id={id} name={name} ref={ref} {...rest} />
       </FormControl>
     )
@@ -78,28 +78,14 @@ export const UrlInput = forwardRef<HTMLInputElement, FormInputProps>(
 
 export const TraitTypeInput = forwardRef<HTMLInputElement, FormInputProps>(
   function TraitTypeInput(props, ref) {
-    return (
+    return <FormInput {...props} placeholder={props.placeholder || 'Trait Type'} ref={ref} type="text" />
-      <FormInput
-        {...props}
-        placeholder={props.placeholder || 'Trait Type'}
-        ref={ref}
-        type="text"
-      />
-    )
   },
   //
 )
 
 export const TraitValueInput = forwardRef<HTMLInputElement, FormInputProps>(
   function TraitValueInput(props, ref) {
-    return (
+    return <FormInput {...props} placeholder={props.placeholder || 'Trait Value'} ref={ref} type="text" />
-      <FormInput
-        {...props}
-        placeholder={props.placeholder || 'Trait Value'}
-        ref={ref}
-        type="text"
-      />
-    )
   },
   //
 )

pages/collections/create.tsx

@@ -247,8 +247,8 @@ const CollectionCreationPage: NextPage = () => {
     <div>
       <NextSeo title="Create Collection" />
 
-      <div className="mt-5 space-y-8 text-center">
+      <div className="mt-5 space-y-5 text-center">
-        <h1 className="font-heading text-4xl font-bold">Upload Assets & Metadata</h1>
+        <h1 className="font-heading text-4xl font-bold">Create Collection</h1>
 
         <p>
           Make sure you check our{' '}
@@ -259,8 +259,6 @@ const CollectionCreationPage: NextPage = () => {
         </p>
       </div>
 
-      <hr className="border-white/20" />
-
       <UploadDetails onChange={setUploadDetails} />
 
       <div className="flex justify-evenly grid-col-2">