Created the Channels.jsx

src/states/Manage/pages/Channels/Channels.jsx

@@ -1,9 +1,25 @@
 import "./styles.sass";
+import ChannelItem from "@/states/Manage/pages/Channels/components/ChannelItem";
+import {useContext} from "react";
+import {ChannelContext} from "@/states/Manage/pages/Channels/contexts/ChannelContext";
+import NotFoundImage from "@/common/images/no_data.svg";
+import {DOCS_BASE} from "@/App.jsx";
 
 export const Channels = () => {
+
+    const ADD_COMMAND = DOCS_BASE + "commands/add/";
+
+    const {channels} = useContext(ChannelContext);
+
     return (
-        <div>
+        <div className="channel-page">
-            <h1>Channels</h1>
+            {channels.map((channel) => <ChannelItem key={channel.channelId} id={channel.channelId} cachedName={channel.cachedName}/>)}
+            {channels.length === 0 && <div className="none-found">
+                <img src={NotFoundImage} alt="Not Found"/>
+                <h2>No Channels Found</h2>
+                <p>Create one by using the <code onClick={() => window.open(ADD_COMMAND, "_blank")}>/add</code> command inside of the
+                    channel</p>
+            </div>}
         </div>
     );
-}
+}