Extract NC/PB/NP badge in SquareItemCard

This is just a small refactor to make `ItemThumbnail` more workable, because I'm gonna start working in it!

src/app/components/SquareItemCard.js

@@ -93,28 +93,14 @@ function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) {
 }
 
 function ItemThumbnail({ item }) {
-  const mdRadiusValue = useToken("radii", "md");
+  const kindColorScheme = item.isNc ? "purple" : item.isPb ? "orange" : "gray";
 
-  const colorScheme = item.isNc ? "purple" : item.isPb ? "orange" : "gray";
-
-  const badgeBackground = useColorModeValue(
-    `${colorScheme}.100`,
-    `${colorScheme}.500`
-  );
-  const badgeColor = useColorModeValue(
-    `${colorScheme}.500`,
-    `${colorScheme}.100`
-  );
   const thumbnailShadowColor = useColorModeValue(
-    `${colorScheme}.200`,
+    `${kindColorScheme}.200`,
-    `${colorScheme}.600`
+    `${kindColorScheme}.600`
   );
-
+  const thumbnailShadowColorValue = useToken("colors", thumbnailShadowColor);
-  const [
+  const mdRadiusValue = useToken("radii", "md");
-    badgeBackgroundValue,
-    badgeColorValue,
-    thumbnailShadowColorValue,
-  ] = useToken("colors", [badgeBackground, badgeColor, thumbnailShadowColor]);
 
   return (
     <ClassNames>
@@ -146,8 +132,40 @@ function ItemThumbnail({ item }) {
                 position: absolute;
                 bottom: -6px;
                 right: -3px;
+              `}
+            >
+              <ItemThumbnailKindBadge colorScheme={kindColorScheme}>
+                {item.isNc ? "NC" : item.isPb ? "PB" : "NP"}
+              </ItemThumbnailKindBadge>
+            </div>
+          )}
+        </div>
+      )}
+    </ClassNames>
+  );
+}
+
+function ItemThumbnailKindBadge({ colorScheme, children }) {
+  const badgeBackground = useColorModeValue(
+    `${colorScheme}.100`,
+    `${colorScheme}.500`
+  );
+  const badgeColor = useColorModeValue(
+    `${colorScheme}.500`,
+    `${colorScheme}.100`
+  );
+
+  const [badgeBackgroundValue, badgeColorValue] = useToken("colors", [
+    badgeBackground,
+    badgeColor,
+  ]);
+
+  return (
+    <ClassNames>
+      {({ css }) => (
+        <div
+          className={css`
             /* Copied from Chakra <Badge> */
-                display: inline-block;
             white-space: nowrap;
             vertical-align: middle;
             padding-left: 0.25rem;
@@ -160,9 +178,7 @@ function ItemThumbnail({ item }) {
             color: ${badgeColorValue};
           `}
         >
-              {item.isNc ? "NC" : item.isPb ? "PB" : "NP"}
+          {children}
-            </div>
-          )}
         </div>
       )}
     </ClassNames>