Show traits on viewetr

viewer/src/App.css

@@ -73,6 +73,22 @@ a img {
   text-align: center;
 }
 
+input[type=number] {
+  text-align: center;
+  padding:  .5rem 1rem;
+}
+
+#traits {
+  padding: 0;
+  width: 100%;
+}
+#traits li {
+  display: flex;
+  justify-content: space-between;
+  text-transform: capitalize;
+  padding:  .2rem 0;
+}
+
 h1, p, label {
   padding: .2rem .5rem;
 }

viewer/src/App.js

@@ -15,6 +15,7 @@ function App() {
   const [ rocketeer, setRocketeer ] = useState()
   const [ loading, setLoading ] = useState( false )
   const [ error, setError ] = useState( false )
+  const [ manualSelect, setManualSelect ] = useState(  )
 
   // ///////////////////////////////
   // Lifesycle management
@@ -30,7 +31,7 @@ function App() {
     log( 'Id found: ', id )
 
     // Check if id is a number
-    if( isNaN( id ) ) return setError( 'No rocketeer selected' )
+    if( isNaN( id ) ) return setManualSelect( true )
 
     // If all is good, set the ID to state
     return setRocketeerId( id )
@@ -68,7 +69,10 @@ function App() {
   // ///////////////////////////////
   // Rendering
   // ///////////////////////////////
-
+  if( manualSelect ) return <Container>
+    <input type='number' placeholder='Input Rocketeer ID' onChange={ ( { target } ) => setRocketeerId( target.value ) } />
+    <a href={ `/?rocketeer=${ rocketeerId }` } className="button">View Rocketeer</a>
+  </Container>
   if( error ) return <Container>
     { error }
   </Container>
@@ -81,6 +85,10 @@ function App() {
     <h1>{ rocketeer.name }</h1>
     <p>{ rocketeer.description || "This is a generic Rocketeer without a description. That should only happen during testing. Contact us on Discord if you see this." }</p>
 
+    <ul id="traits">
+      { rocketeer.attributes.map( ( { trait_type, value } ) => <li key={ trait_type }><span>{ trait_type }</span><span>{ value }</span></li> ) }
+    </ul>
+
     <div>
       
       <a href={ rocketeer.image } className="button">Download Jpeg</a>