feat: display hex codes for extracted colors

Author: KrupaPanchal2527

website/src/page-components/index/VibrantColors.module.css

@@ -17,4 +17,21 @@
 	flex-grow: 1;
 	border-radius: 12px;
 	padding: 14px 20px;
+	cursor: pointer;
+	transition: transform 200ms ease-out;
+}
+
+.swatch:hover {
+	transform: scale(1.05);
+}
+
+.swatch > div {
+	all: unset;
+}
+
+.swatch-hex {
+	all: unset;
+	font-size: 0.8rem;
+	text-transform: uppercase;
+	opacity: 0.8;
 }

website/src/page-components/index/VibrantColors.tsx

@@ -48,7 +48,10 @@ const VibrantColors = ({ img }: VibrantColorsProps) => {
 					} as React.CSSProperties
 				}
 			>
-				Vibrant
+				<div>
+					<p>Vibrant</p>
+					<p className={styles["swatch-hex"]}>{colors.Vibrant?.hex}</p>
+				</div>
 			</li>
 			<li
 				className={styles.swatch}
@@ -59,7 +62,10 @@ const VibrantColors = ({ img }: VibrantColorsProps) => {
 					} as React.CSSProperties
 				}
 			>
-				Dark Vibrant
+				<div>
+					<p>Dark Vibrant</p>
+					<p className={styles["swatch-hex"]}>{colors.DarkVibrant?.hex}</p>
+				</div>
 			</li>
 			<li
 				className={styles.swatch}
@@ -70,7 +76,10 @@ const VibrantColors = ({ img }: VibrantColorsProps) => {
 					} as React.CSSProperties
 				}
 			>
-				Light Vibrant
+				<div>
+					<p>Light Vibrant</p>
+					<p className={styles["swatch-hex"]}>{colors.LightVibrant?.hex}</p>
+				</div>
 			</li>
 			<li
 				className={styles.swatch}
@@ -81,7 +90,10 @@ const VibrantColors = ({ img }: VibrantColorsProps) => {
 					} as React.CSSProperties
 				}
 			>
-				Muted
+				<div>
+					<p>Muted</p>
+					<p className={styles["swatch-hex"]}>{colors.Muted?.hex}</p>
+				</div>
 			</li>
 			<li
 				className={styles.swatch}
@@ -92,7 +104,10 @@ const VibrantColors = ({ img }: VibrantColorsProps) => {
 					} as React.CSSProperties
 				}
 			>
-				Dark Muted
+				<div>
+					<p>Dark Muted</p>
+					<p className={styles["swatch-hex"]}>{colors.DarkMuted?.hex}</p>
+				</div>
 			</li>
 			<li
 				className={styles.swatch}
@@ -103,7 +118,10 @@ const VibrantColors = ({ img }: VibrantColorsProps) => {
 					} as React.CSSProperties
 				}
 			>
-				Light Muted
+				<div>
+					<p>Light Muted</p>
+					<p className={styles["swatch-hex"]}>{colors.LightMuted?.hex}</p>
+				</div>
 			</li>
 		</ul>
 	);