feat: add props for colors

S-N-O-R-L-A-X · Oct 10, 2024 · d93ec07 · d93ec07
1 parent 03385ee
commit d93ec07
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/src/SpotlightText/SpotlightText.module.css b/src/SpotlightText/SpotlightText.module.css
@@ -1,5 +1,4 @@
 .spotlight {
-  --backgroundImageURL: "";
   color: #333;
   margin: 0;
   padding: 0;
@@ -17,13 +16,20 @@
   -webkit-clip-path: ellipse(100px 100px at 0% 50%);
   clip-path: ellipse(100px 100px at 0% 50%);
   animation: spotlight 5s infinite;
-  background-image: var(--background-image);
   background-size: 150%;
   background-position: center center;
   -webkit-background-clip: text;
   background-clip: text;
 }
 
+.spotlight-color::after {
+  background-image: linear-gradient(to right, var(--spotlight-colors));
+}
+
+.spotlight-image::after {
+  background-image: var(--spotlight-image);
+}
+
 @keyframes spotlight {
   0% {
     -webkit-clip-path: ellipse(100px 100px at 0% 50%);

diff --git a/src/SpotlightText/SpotlightText.tsx b/src/SpotlightText/SpotlightText.tsx
@@ -4,25 +4,30 @@ import styles from "./SpotlightText.module.css";
 export interface SpotlightTextProps extends HTMLAttributes<HTMLDivElement> {
 	text?: string;
 	backgroundImageURL?: string;
-	colors?: {
-		startColor: string;
-		middleColor?: string;
-		endColor: string;
-	}
+	colors?: string[];
 }
 
 export default function SpotlightText(props: SpotlightTextProps) {
 	const { backgroundImageURL = "https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80", colors, className, text = "Hello World!", ...rest } = props;
-	return colors ?
-		(
-			<div data-spotlight={text} className={styles.spotlight + " " + styles['spotlight-color'] + className} {...rest}>
+	if (colors && colors.length) {
+		return (
+			<div data-spotlight={text}
+				className={styles.spotlight + " " + styles['spotlight-color'] + " " + className}
+				style={{ "--spotlight-colors": colors.join(', ') } as CSSProperties}
+				{...rest}
+			>
 				{text}
 			</div>
 		)
-		:
-		(
-			<div data-spotlight={text} style={{ "--background-image": `url(${backgroundImageURL})` } as CSSProperties} className={styles.spotlight + " " + className} {...rest}>
-				{text}
-			</div >
-		)
+	}
+
+	return (
+		<div data-spotlight={text}
+			className={styles.spotlight + " " + styles['spotlight-image'] + " " + className}
+			style={{ "--spotlight-image": `url(${backgroundImageURL})` } as CSSProperties}
+			{...rest}
+		>
+			{text}
+		</div >
+	)
 }