add some initial set of karaoke examples

3 files changed, 62 insertions, 25 deletions

diff --git a/public/karaoke.json b/public/karaoke.json
index 37ad9c7..f2448d0 100644
--- a/public/karaoke.json
+++ b/public/karaoke.json
@@ -3,10 +3,28 @@
     {
       "title": "Mr.Raindrop",
       "artist": "Amplified",
-      "thumbnail": "",
+      "thumbnail": "https://i3.ytimg.com/vi/7E17eEfl77I/maxresdefault.jpg",
       "has_srv": false,
       "has_instrumental": false,
       "code": "eyJscmMiOiJodHRwczovL3V0ZnMuaW8vZi9lMmUxOGVhNy05ODQxLTQzN2ItOWNhMy01NzIzMzU1YmQ0MWEtcmxjazQ2LmxyYyIsImZpbGUxIjoiaHR0cHM6Ly91dGZzLmlvL2YvODRmNWRmYTYtODIxZC00MDdmLWExNmQtYTY4NWIwOWMxMWQ5LTd4eDJoNC53ZWJtIiwib2Zmc2V0IjotMTU1MH0="
     }
+  ],
+  "K-POP": [
+    {
+      "title": "Blue Valentine",
+      "artist": "NMIXX",
+      "thumbnail": "https://file.garden/aeFyzu6P_R_1-oSm/Karaoke/TLftyCObb_E-HD.jpg",
+      "has_srv": false,
+      "has_instrumental": true,
+      "code": "eyJscmMiOiJodHRwczovL2ZpbGUuZ2FyZGVuL2FlRnl6dTZQX1JfMS1vU20vS2FyYW9rZS9ibHVlX3ZhbGVudGluZS5scmMiLCJmaWxlMSI6Imh0dHBzOi8vZmlsZS5nYXJkZW4vYWVGeXp1NlBfUl8xLW9TbS9LYXJhb2tlL0JsdWUlMjBWYWxlbnRpbmUlMjAoSW5zdC4pJTIwJTVCWGdoNUQxU1RWSk0lNUQud2VibSIsImZpbGUyIjoiaHR0cHM6Ly9maWxlLmdhcmRlbi9hZUZ5enU2UF9SXzEtb1NtL0thcmFva2UvQmx1ZSUyMFZhbGVudGluZSUyMChBJTIwQ2FwcGVsbGElMjBWZXIuKSUyMCU1QnZBYU83MFFhUG0wJTVELndlYm0ifQ=="
+    },
+    {
+      "title": "PERFECT NIGHT (MV)",
+      "artist": "LE SSERAFIM",
+      "thumbnail": "https://file.garden/aeFyzu6P_R_1-oSm/Karaoke/perfectnight.jpg",
+      "has_srv": false,
+      "has_instrumental": false,
+      "code": "eyJscmMiOiJodHRwczovL2ZpbGUuZ2FyZGVuL2FlRnl6dTZQX1JfMS1vU20vS2FyYW9rZS9wZXJmZWN0X25pZ2h0LmxyYyIsImZpbGUxIjoiaHR0cHM6Ly9maWxlLmdhcmRlbi9hZUZ5enU2UF9SXzEtb1NtL0thcmFva2UvTEUlMjBTU0VSQUZJTSUyMCglRUIlQTUlQjQlRUMlODQlQjglRUIlOUQlQkMlRUQlOTUlOEMpJTIwJ1BlcmZlY3QlMjBOaWdodCclMjBPRkZJQ0lBTCUyME0lRTIlQTclQjhWJTIwd2l0aCUyME9WRVJXQVRDSCUyMDIlMjAlNUJoTHZXeTJiODU3SSU1RC53ZWJtIiwib2Zmc2V0IjotMTI1MDB9"
+    }
   ]
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c1a8dc7..0670509 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import { FaPlay, FaMusic, FaSearch, FaUserCircle, FaKeyboard } from "react-icons/fa";
 import { MdLibraryMusic } from "react-icons/md";
-import { Root, Navbar, Logo, LogoIcon, NavLink } from "./styles/shared";
+import { Root, Navbar, Logo, LogoIcon, NavLink, NavCtaLink } from "./styles/shared";
 import {
   NavLeft,
   NavCenter,
@@ -50,7 +50,7 @@ function capitalize(s: string) {
 
 export default function HomePage() {
   const [data, setData] = useState<KaraokeData>({});
-  const [activeChip, setActiveChip] = useState("All");
+  const [activeChip, setActiveChip] = useState("all");
   const [search, setSearch] = useState("");
 
   useEffect(() => {
@@ -61,19 +61,28 @@ export default function HomePage() {
   }, []);
 
   const categories = Object.keys(data);
-  const chips = ["All", ...categories.map(capitalize)];
+  const chips = [
+    { key: "all", label: "All" },
+    ...categories.map((category) => ({
+      key: category,
+      label: capitalize(category),
+    })),
+  ];
 
-  const visibleItems: KaraokeEntry[] = activeChip === "All"
+  const visibleItems: KaraokeEntry[] = activeChip === "all"
     ? Object.values(data).flat()
-    : data[activeChip.toLowerCase()] ?? [];
+    : data[activeChip] ?? [];
 
-  const filtered = search.trim()
-    ? visibleItems.filter(
+  const normalizedSearch = search.trim().toLowerCase();
+  const searchableItems = normalizedSearch ? Object.values(data).flat() : visibleItems;
+
+  const filtered = normalizedSearch
+    ? searchableItems.filter(
         (item) =>
-          item.title.toLowerCase().includes(search.toLowerCase()) ||
-          item.artist.toLowerCase().includes(search.toLowerCase()),
+          item.title.toLowerCase().includes(normalizedSearch) ||
+          item.artist.toLowerCase().includes(normalizedSearch),
       )
-    : visibleItems;
+    : searchableItems;
 
   return (
     <Root>
@@ -101,8 +110,8 @@ export default function HomePage() {
         </NavCenter>
 
         <NavRight>
-          <NavLink href="/game">LRC-Type</NavLink>
-          <NavLink href="/create">Create</NavLink>
+          <NavCtaLink href="/game">LRC-Type</NavCtaLink>
+          <NavCtaLink href="/create">Create</NavCtaLink>
           <Avatar>
             <FaUserCircle />
           </Avatar>
@@ -112,11 +121,11 @@ export default function HomePage() {
       <ChipsBar>
         {chips.map((chip) => (
           <Chip
-            key={chip}
-            $active={chip === activeChip}
-            onClick={() => setActiveChip(chip)}
+            key={chip.key}
+            $active={chip.key === activeChip}
+            onClick={() => setActiveChip(chip.key)}
           >
-            {chip}
+            {chip.label}
           </Chip>
         ))}
       </ChipsBar>
@@ -142,7 +151,7 @@ export default function HomePage() {
                   {(item.has_srv || item.has_instrumental) && (
                     <BadgeRow>
                       {item.has_srv && <Badge $color="#7c3aed">SRV</Badge>}
-                      {item.has_instrumental && <Badge $color="#0369a1">Inst.</Badge>}
+                      {item.has_instrumental && <Badge $color="#0369a1">Inst. Track</Badge>}
                     </BadgeRow>
                   )}
                 </ThumbnailWrapper>
@@ -166,13 +175,6 @@ export default function HomePage() {
         <PlayerDescription>
           Load your own video, audio, LRC lyrics
         </PlayerDescription>
-        <SectionHeading style={{ marginTop: 24 }}>Typing Game</SectionHeading>
-        <OpenPlayerLink href="/game">
-          <FaKeyboard /> Play Typing Game
-        </OpenPlayerLink>
-        <PlayerDescription>
-          Type lyrics in sync with the music to score points
-        </PlayerDescription>
       </CtaSection>
     </Root>
   );
diff --git a/src/app/styles/shared.ts b/src/app/styles/shared.ts
index ad815ea..d1b0232 100644
--- a/src/app/styles/shared.ts
+++ b/src/app/styles/shared.ts
@@ -59,3 +59,20 @@ export const NavLink = styled(Link)`
     color: #1a1a1a;
   }
 `;
+
+export const NavCtaLink = styled(Link)`
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+  text-decoration: none;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background-color: #f5f5f5;
+  border: 1px solid #e5e5e5;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+  &:hover {
+    background-color: #ededed;
+    border-color: #d4d4d4;
+    color: #1a1a1a;
+  }
+`;