Render 🚧 if input has an invalid value

pages/themer.tsx

@@ -29,13 +29,22 @@ export default function Themer() {
         </div>
         <div className={styles.palette}>
           {Object.entries(palette).map(([key, value]) => {
+            const color =
+              value.length === 4 && value.startsWith("#")
+                ? `#${value[1].repeat(2)}${value[2].repeat(2)}${value[3].repeat(
+                    2
+                  )}`
+                : value;
+
+            const isValidColor = color.startsWith("#") && color.length === 7;
+
             return (
               <div key={key}>
                 <Input
                   id={`color-${key}`}
                   type="color"
                   className={styles.colorSelector}
-                  value={value}
+                  value={color}
                   onChange={(event) =>
                     context?.setTheme({ [key]: event.target.value })
                   }
@@ -50,11 +59,13 @@ export default function Themer() {
                 </Button>
                 <code className={styles.colorName}>
                   <label htmlFor={`color-${key}`}>
+                    {!isValidColor && "🚧 "}
                     {key
                       .slice(2)
                       .split("-")
                       .map((word) => word[0].toUpperCase() + word.slice(1))
                       .join(" ")}
+                    {!isValidColor && " 🚧"}
                   </label>
                 </code>
               </div>