Communities and channels

src/components/ChannelBar/ChannelBar.tsx

@@ -1,9 +1,15 @@
 import type { Component } from "solid-js";
+import { IChannelBarProps } from "./types";
 
-const ChannelBar: Component = () => {
+const ChannelBar: Component<IChannelBarProps> = (props: IChannelBarProps) => {
     return (
         <div class="absolute w-full top-0 z-10">
-            <div class="bg-stone-800/25 backdrop-blur-md h-16 w-full shadow-bar p-2"></div>
+            <div class="flex flex-col justify-center bg-stone-800/25 backdrop-blur-md h-16 w-full shadow-bar px-5">
+                <h2 class="text-sm font-bold">
+                    {props.name ? `# ${props.name}` : undefined}
+                </h2>
+                <p class="text-xs">{props.description}</p>
+            </div>
         </div>
     );
 };

src/components/ChannelBar/index.ts

@@ -1 +1,2 @@
 export * from "./ChannelBar";
+export * from "./types";

src/components/ChannelBar/types.ts

@@ -0,0 +1,7 @@
+interface IChannelBarProps {
+    id?: string;
+    name?: string;
+    description?: string;
+}
+
+export { type IChannelBarProps };