Merge pull request #25 from rickknowlton/main

feat: conditional rendering on slider component

Author: rickknowlton

.bin/gatsby-transformer-video/darwin-x64/ffmpeg

@@ -60,6 +60,7 @@ const Hero: React.FC<{ heroTree: ExpandedHeroTree }> = ({ heroTree }) => {
                     {fill(hero.remaining, data)}
                   </div>
                 </div>
+                {tenkData.mintRateLimit > 1 && (
                 <Slider
                   max={Math.min(
                     tenkData.remainingAllowance ?? tenkData.mintRateLimit,
@@ -70,6 +71,7 @@ const Hero: React.FC<{ heroTree: ExpandedHeroTree }> = ({ heroTree }) => {
                   onValueChange={([v]) => setNumberToMint(v)}
                   value={[numberToMint]}
                 />
+                )}
               </>
             )}
             <button className={css.cta}>

.bin/gatsby-transformer-video/darwin-x64/ffprobe

@@ -71,15 +71,16 @@ const MyNFTs: React.FC<{
               <button
                 key={nft.token_id}
                 className={css.nft}
+                style={{ backgroundImage: `url("${nft?.media}")`, backgroundRepeat: "no-repeat", backgroundSize: "contain" }}
                 onClick={() => {
                   setPhotoIndex(index)
                   setLightboxOpen(true)
                 }}
               >
-                <div style={{ backgroundImage: `url("${nft.media}")` }} />
+                <div/>
                 <span className="visually-hidden">{nft.metadata?.description}</span>
                 <footer>
-                  <span>#{nft.token_id}</span>
+                  <span className={css.chip}>{nft.token_id}</span>
                   {highlight?.includes(nft.token_id) && (
                     <span className={css.highlight}>{locale.new}</span>
                   )}

src/components/hero/index.tsx

@@ -79,6 +79,17 @@
   font-weight: var(--fw-bold);
 }
 
+.chip {
+  color: var(--white);
+  background: rgba(0, 0, 0, 0.5);
+  padding: 0.5em 0.5em 0.5em;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(19.5px);
+  -webkit-backdrop-filter: blur(19.5px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.10);
+}
+
 .nft>div:first-child {
   --aspect-ratio: 1 / 1;
   background-color: var(--gray-1);