feat: suggestions

This commit is contained in:
Artemy 2023-08-11 11:07:22 +03:00
parent b6bd7c01af
commit 5b2300cd79
3 changed files with 57 additions and 25 deletions

View file

@ -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>
{(channel.videos || -1) >= 0 && (
<CardBody className="flex gap-3 flex-row">
<CardBody className="flex flex-col p-1">
<p className="text-start">{channel.description || "No description"}</p>
{(channel.videos || -1) >= 0 && (
<p className="text-md">
{`${shortenNumber(channel.videos || -1)} videos`}
</p>
</CardBody>
)}
)}
</CardBody>
</Card>
);
}

View file

@ -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

View file

@ -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>
<Input
isClearable
radius="lg"
placeholder="Type to search..."
startContent={<MagnifyingGlassIcon className="h-6 w-6" />}
onChange={(e) => setSearch(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
navigate(`/search?q=${search}`);
<div className="relative block">
<Input
isClearable
radius="lg"
placeholder="Type to search..."
startContent={<MagnifyingGlassIcon className="h-6 w-6" />}
onChange={(e) => {
updateSuggestions(e.target.value);
setSearch(e.target.value);
}}
onKeyDown={async (e) => {
if (e.key === "Enter") {
await setSuggestions([]);
await navigate(`/search?q=${search}`);
}
}}
onClear={() => {
setSuggestions([]);
setSearch("");
}}
value={
(search !== undefined ? search : searchParams.get("q")) || ""
}
}}
defaultValue={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>