fix: display of channels in search

src/App.tsx

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

src/components/channel.tsx

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

src/components/item.tsx

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

src/components/video.tsx

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

src/pages/channel.tsx

@@ -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}
+            <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 md:p-1" />
+                  )}
+                </div>
+
+                <div className="text-xl font-bold md:pl-2">
+                  {shortenNumber(channel.subscriberCount)} subscribers
                 </div>
-                {channel.verified && (
-                  <CheckCircleIcon className="w-6 h-6 p-1" />
-                )}
               </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>