fix: display of channels in search

This commit is contained in:
Artemy 2023-08-10 18:55:09 +03:00
parent 9a04f4f2ec
commit b6bd7c01af
5 changed files with 50 additions and 31 deletions

View file

@ -28,7 +28,14 @@ function App() {
<Route path="/trending" element={<TrendingPage />} />
<Route path="/channel/:id" element={<ChannelPage />} />
<Route path="/search" element={<SearchPage />} />
<Route path="*" element={<Navigate to="/trending" />} />
<Route
path="*"
element={
<div className=" font-bold text-center text-3xl">
Not realized page
</div>
}
/>
</Routes>
</HashRouter>
);

View file

@ -16,24 +16,29 @@ 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"
>
<CardHeader>
<Avatar
className="flex-none"
src={uploaderAvatar ? uploaderAvatar : channel.thumbnail}
/>
<div className="flex flex-row flex-wrap">
<Avatar src={uploaderAvatar ? uploaderAvatar : channel.thumbnail} />
<Link color="foreground" className="pl-4" href={`#${channel.url}`}>
<div className="flex flex-row items-center">
<p className="text-md">{channel.name}</p>
{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">
<p className="flex-none text-md">
<p className="text-md">
{`${shortenNumber(channel.videos || -1)} videos`}
</p>
</CardBody>
)}
</Card>
);
}

View file

@ -14,7 +14,10 @@ export function ItemComponent({ item, channel }: ItemComponentProps) {
);
} else if (item.type === "channel") {
item = item as Channel;
return <ChannelComponent channel={item} />;
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" />,
];
} else {
<div className="" key={Math.random()}>
Idk how to render this

View file

@ -63,7 +63,7 @@ export function SkeletonVideoComponent() {
}
export function VideoContainer({ children }: VideoContainerProps) {
return (
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-1 md:p-4">
{children}
</div>
);

View file

@ -2,7 +2,7 @@ import { Channel, Tab } from "piped-api/dist/types";
import { SkeletonVideoComponent, VideoContainer } from "../components/video";
import { useParams, useSearchParams } from "react-router-dom";
import { Button, Card, CardFooter } from "@nextui-org/react";
import { capitalize } from "../components/utils";
import { capitalize, shortenNumber } from "../components/utils";
import React from "react";
import { CheckCircleIcon } from "@heroicons/react/24/solid";
import { ItemComponent } from "../components/item";
@ -86,30 +86,34 @@ class ChannelPageСomponent extends React.Component<
);
} else {
return (
<div className="grid grid-rows p-4">
<div className="grid grid-rows p-1 md:p-4">
<Card radius="lg" shadow="none">
<div className="p-4">
<div className="md:p-4">
<img className="w-full rounded-xl" src={channel.bannerUrl} />
</div>
<CardFooter className="p-4 justify-between ">
<div className="flex flex-row">
<div className="flex flex-row gap-2 text-xl font-bold pl-2">
{channel.name}
</div>
<CardFooter className="md:p-4 justify-between ">
<div className="flex flex-row gap-2 flex-wrap">
<div className="flex flex-row text-xl font-bold md:pl-2">
<div>{channel.name}</div>
{channel.verified && (
<CheckCircleIcon className="w-6 h-6 p-1" />
<CheckCircleIcon className="w-6 h-6 md:p-1" />
)}
</div>
<div className="text-xl font-bold md:pl-2">
{shortenNumber(channel.subscriberCount)} subscribers
</div>
</div>
</CardFooter>
</Card>
<div className="flex flex-row flex-wrap gap-2 mt-4">
<div className="flex flex-row flex-wrap gap-2 m-4">
<Button
onClick={() => {
setSearchParams({ tabId: "videos" });
}}
key="videos"
className="text-xl font-bold mt-4"
className="text-xl font-bold"
>
Videos
</Button>
@ -122,7 +126,7 @@ class ChannelPageСomponent extends React.Component<
await this.updateTab();
}}
key={tab.name}
className="text-xl font-bold mt-4"
className="text-xl font-bold"
>
{capitalize(tab.name)}
</Button>