fix: prod should now run

Vibrant-Colors · Dec 16, 2024 · 7bc6bc4 · 7bc6bc4
1 parent a2e9841
commit 7bc6bc4
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "node-vibrant": "4.0.0-alpha.1",
+    "node-vibrant": "4.0.0-alpha.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/VibrantColors.tsx b/src/VibrantColors.tsx
@@ -2,7 +2,7 @@ import {useEffect, useState, useCallback} from 'react';
 import styles from './VibrantColors.module.css';
 import Vibrant from 'node-vibrant/browser';
 
-function getLightOrDark(color: string) {
+function getLightOrDark(color: string | null) {
     if (!color) return 'black';
     const _color = color.substring(4, color.length - 1)
         .replace(/ /g, '')
@@ -47,12 +47,12 @@ const VibrantColors = ({img}: VibrantColorsProps) => {
 
     return (
         <div className={styles.colors}>
-                <p className={styles.swatch} style={{"--bg-color": colors.Vibrant ?? "", "--color": getLightOrDark(colors.Vibrant)}}>Vibrant</p>
-                <p className={styles.swatch} style={{"--bg-color": colors.DarkVibrant ?? "", "--color": getLightOrDark(colors.DarkVibrant)}}>Dark Vibrant</p>
-                <p className={styles.swatch} style={{"--bg-color": colors.LightVibrant ?? "", "--color": getLightOrDark(colors.LightVibrant)}}>Light Vibrant</p>
-                <p className={styles.swatch} style={{"--bg-color": colors.Muted ?? "", "--color": getLightOrDark(colors.Muted)}}>Muted</p>
-                <p className={styles.swatch} style={{"--bg-color": colors.DarkMuted ?? "", "--color": getLightOrDark(colors.DarkMuted)}}>Dark Muted</p>
-                <p className={styles.swatch} style={{"--bg-color": colors.LightMuted ?? "", "--color": getLightOrDark(colors.LightMuted)}}>Light Muted</p>
+                <p className={styles.swatch} style={{"--bg-color": colors.Vibrant ?? "", "--color": getLightOrDark(colors.Vibrant)} as React.CSSProperties}>Vibrant</p>
+                <p className={styles.swatch} style={{"--bg-color": colors.DarkVibrant ?? "", "--color": getLightOrDark(colors.DarkVibrant)} as React.CSSProperties}>Dark Vibrant</p>
+                <p className={styles.swatch} style={{"--bg-color": colors.LightVibrant ?? "", "--color": getLightOrDark(colors.LightVibrant)} as React.CSSProperties}>Light Vibrant</p>
+                <p className={styles.swatch} style={{"--bg-color": colors.Muted ?? "", "--color": getLightOrDark(colors.Muted)} as React.CSSProperties}>Muted</p>
+                <p className={styles.swatch} style={{"--bg-color": colors.DarkMuted ?? "", "--color": getLightOrDark(colors.DarkMuted)} as React.CSSProperties}>Dark Muted</p>
+                <p className={styles.swatch} style={{"--bg-color": colors.LightMuted ?? "", "--color": getLightOrDark(colors.LightMuted)} as React.CSSProperties}>Light Muted</p>
             </div>
     )
 }

diff --git a/src/examples-title.tsx b/src/examples-title.tsx
@@ -22,7 +22,7 @@ export const ExamplesTitle = ({ title }: ExamplesTitleProps) => {
           style={{
             position: "absolute",
             top: "calc(50% - calc(0.375rem / 2))",
-            zIndex: -1, 
+            zIndex: -1,
             left: "50%",
             transform: "translate(-50%, -50%)",
             borderTop: "0.375rem dotted #CF9D13",
@@ -31,7 +31,6 @@ export const ExamplesTitle = ({ title }: ExamplesTitleProps) => {
         />
         <h2
           style={{
-            margin: 0,
             width: "fit-content",
             margin: "0 auto",
             background: "#fff",
@@ -43,7 +42,7 @@ export const ExamplesTitle = ({ title }: ExamplesTitleProps) => {
             textAlign: "center",
           }}
         >
-          Examples
+          {title}
         </h2>
       </div>
     </div>