chore: clickable links

Author: VulpoTheDev

apps/web/src/components/Search/SearchBar.tsx

@@ -106,9 +106,9 @@ export default function SearchBar({ recentSearches = [], characters = [] }: { re
           </div>
           <div className="mt-4">
             {loading && <div className="text-center text-gray-500 py-4">Loading results...</div>}
-            {!loading && results.user?.length > 0 && <SearchSection title="USER RESULTS" items={results} />}
-            {!loading && results.artwork?.length > 0 && <SearchSection title="ARTWORK RESULTS" items={results} />}
-            {!loading && results.character?.length > 0 && <SearchSection title="CHARACTER RESULTS" items={results} isCharacter />}
+            {!loading && (results.user ?? []).length > 0 && <SearchSection title="USER RESULTS" items={results} />}
+            {!loading && (results.artwork ?? []).length > 0 && <SearchSection title="ARTWORK RESULTS" items={results} />}
+            {!loading && (results.character ?? []).length > 0 && <SearchSection title="CHARACTER RESULTS" items={results} isCharacter />}
             {!loading && query.trim() && results.user?.length === 0 && results.artwork?.length === 0 && results.character?.length === 0 && (
               <>
                 <div className="text-center text-gray-500 py-4">No results found for "<strong>{query}</strong>"</div>

apps/web/src/components/Search/Section.tsx

@@ -1,13 +1,16 @@
-import { SearchResult, Character, Artwork, UserType } from "@/types/utils"
+import { Character, Artwork } from "@/types/characters";
+import { UserType } from "@/types/users";
+import { SearchResult } from "@/types/utils";
+import Link from "next/link";
 
 interface SearchSectionProps {
   title: string
   items?: string[] | { name: string; image?: string }[] | SearchResult
   isCharacter?: boolean
 }
 
-export function SearchSection({ title, items, isCharacter = false }: SearchSectionProps) {
-  let formattedItems: { name: string; image?: string }[] = []
+export function SearchSection({ title, items }: SearchSectionProps) {
+  let formattedItems: { name: string; image?: string, href: string }[] = []
 
   if (!items) {
     return null
@@ -17,21 +20,24 @@ export function SearchSection({ title, items, isCharacter = false }: SearchSecti
     formattedItems = items.map((item) =>
       typeof item === "string"
         ? { name: item }
-        : { name: item.name, image: (item as { image?: string }).image }
+        : { name: item.name, image: (item as { image?: string }).image, href: `/search?q=${item.name}` }
     )
   } else if (typeof items === "object") {
     formattedItems = [
       ...(items.user?.map((user: UserType) => ({
         name: user.displayName || user.handle,
         image: user.avatarUrl,
+        href: `/@${user.handle}`,
       })) ?? []),
       ...(items.character?.map((char: Character) => ({
         name: char.name,
         image: char.avatarUrl,
+        href: `/@${char.owner.handle}/${char.name}`,
       })) ?? []),
       ...(items.artwork?.map((art: Artwork) => ({
         name: art.title || "Untitled Artwork",
         image: art.artworkUrl || art.watermarkUrl,
+        href: `/artworks/${art.id}`,
       })) ?? []),
     ]
   }
@@ -45,10 +51,12 @@ export function SearchSection({ title, items, isCharacter = false }: SearchSecti
             key={index}
             className="flex items-center gap-2 py-1 cursor-pointer hover:bg-300 px-2 rounded"
           >
-            {item.image && (
-              <img src={item.image} alt={item.name} className="w-6 h-6 rounded-full" />
-            )}
-            {item.name}
+            <Link href={item.href || "#"} className="flex items-center gap-2">
+              {item.image && (
+          <img src={item.image} alt={item.name} className="w-6 h-6 rounded-full" />
+              )}
+              {item.name}
+            </Link>
           </li>
         ))}
       </ul>