feat: suggestions

src/components/channel.tsx

@@ -16,7 +16,7 @@ export function ChannelComponent({
         navigate(channel.url || "");
       }}
       shadow="none"
-      className="md:col-span-2 xl:col-span-3 2xl:col-span-4 gap-2 p-1 md:p-4"
+      className="md:col-span-2 xl:col-span-4 2xl:col-span-5 gap-2 p-1 md:p-4"
     >
       <CardHeader>
         <div className="flex flex-row flex-wrap">
@@ -27,18 +27,17 @@ export function ChannelComponent({
               {channel.verified && <CheckCircleIcon className="w-6 h-6 p-1" />}
             </div>
           </Link>
-          <p className="pt-4 text-start">
-            {channel.description || "No description"}
-          </p>
         </div>
       </CardHeader>
+
+      <CardBody className="flex flex-col p-1">
+        <p className="text-start">{channel.description || "No description"}</p>
         {(channel.videos || -1) >= 0 && (
-        <CardBody className="flex gap-3 flex-row">
           <p className="text-md">
             {`${shortenNumber(channel.videos || -1)} videos`}
           </p>
-        </CardBody>
         )}
+      </CardBody>
     </Card>
   );
 }

src/components/item.tsx

@@ -14,10 +14,7 @@ export function ItemComponent({ item, channel }: ItemComponentProps) {
     );
   } else if (item.type === "channel") {
     item = item as Channel;
-    return [
-      <ChannelComponent channel={item} />,
-      <div className="2xl:col-span-1 xl:col-span-1 md:col-span-2 gap-2 p-1 md:p-4" />,
-    ];
+    return <ChannelComponent channel={item} />;
   } else {
     <div className="" key={Math.random()}>
       Idk how to render this

src/components/navbar.tsx

@@ -8,14 +8,20 @@ import {
   NavbarMenu,
   NavbarMenuItem,
   Input,
+  Button,
 } from "@nextui-org/react";
 import { useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 
 export function NavbarComponent() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState(undefined as string | undefined);
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const [suggestions, setSuggestions] = useState([] as string[]);
+  async function updateSuggestions(query) {
+    const res = await window.piped_api.suggestions(query);
+    setSuggestions(res);
+  }
 
   return (
     <Navbar>
@@ -30,19 +36,49 @@ export function NavbarComponent() {
 
       <NavbarContent className="sm:flex gap-4" justify="start">
         <NavbarItem>
+          <div className="relative block">
             <Input
               isClearable
               radius="lg"
               placeholder="Type to search..."
               startContent={<MagnifyingGlassIcon className="h-6 w-6" />}
-            onChange={(e) => setSearch(e.target.value)}
-            onKeyDown={(e) => {
+              onChange={(e) => {
+                updateSuggestions(e.target.value);
+                setSearch(e.target.value);
+              }}
+              onKeyDown={async (e) => {
                 if (e.key === "Enter") {
-                navigate(`/search?q=${search}`);
+                  await setSuggestions([]);
+                  await navigate(`/search?q=${search}`);
                 }
               }}
-            defaultValue={searchParams.get("q") || ""}
+              onClear={() => {
+                setSuggestions([]);
+                setSearch("");
+              }}
+              value={
+                (search !== undefined ? search : searchParams.get("q")) || ""
+              }
             />
+            <div
+              className="absolute right-1/2 md:right-1 mt-1 flex flex-col justify-center backdrop-blur-3xl rounded-xl p-2 bg-gray-50 dark:bg-transparent"
+              style={{
+                backfaceVisibility: "hidden",
+                transform: "translateZ(0)",
+              }}
+            >
+              {suggestions.length > 0 &&
+                suggestions.map((suggestion) => (
+                  <Button
+                    key={suggestion}
+                    onClick={() => navigate(`/search?q=${suggestion}`)}
+                    className="m-1"
+                  >
+                    {suggestion}
+                  </Button>
+                ))}
+            </div>
+          </div>
         </NavbarItem>
       </NavbarContent>