Indicate matched strings with color

Mansive · May 2, 2024 · 3608b9e · 3608b9e
1 parent 6229fe9
commit 3608b9e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/src/app/api/search/route.ts b/src/app/api/search/route.ts
@@ -28,6 +28,7 @@ export async function GET(request: NextRequest) {
     // Reduce network payload size for users
     const records = JSON.parse(JSON.stringify(results))["records"];
     records.forEach((book: Record<string, any>) => {
+      book.title = book.xata.highlight.title[0];
       delete book.embeddings;
       delete book.xata;
     });

diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
@@ -26,7 +26,23 @@
 }
 
 .title {
-  font-size: 1.2em;
+  font-size: 1.2em; 
+}
+
+.title em {
+  font-style: normal;
+  color: rgb(255, 156, 202);
+  animation: 2s ease-in-out alternate infinite colorshift;
+}
+
+@keyframes colorshift {
+  0% {
+    color: rgb(255, 156, 202);
+  }
+  100% {
+    /* color: rgb(136, 223, 255); */
+    color: rgb(149, 213, 255);
+  }
 }
 
 .true_title {
@@ -53,4 +69,5 @@
 
 .extension {
   font-size: 0.9em;
-}
+}
+
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -49,7 +49,11 @@ function Card({
         />
       )}
       <div className={styles.bookInfo}>
-        <span className={styles.title}>{title}</span>
+        {/* <span className={styles.title}>{title}</span> */}
+        <span
+          className={styles.title}
+          dangerouslySetInnerHTML={{ __html: title }}
+        ></span>
         <span className={styles.true_title}>{true_title}</span>
         <span className={styles.source}>{sources.join(" | ")}</span>
       </div>