67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { useState } from "react";
|
|
import type { Channel } from "@/types/Channel";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { createChannel } from "@/api";
|
|
|
|
interface Props {
|
|
channels: Channel[];
|
|
activeId: string | null;
|
|
onSelect: (id: string) => void;
|
|
onChannelCreated: () => void;
|
|
}
|
|
|
|
export function ChannelSidebar({ channels, activeId, onSelect, onChannelCreated }: Props) {
|
|
const [newName, setNewName] = useState("");
|
|
const [creating, setCreating] = useState(false);
|
|
|
|
async function handleCreate() {
|
|
if (!newName.trim()) return;
|
|
setCreating(true);
|
|
await createChannel({ name: newName.trim(), description: "" });
|
|
setNewName("");
|
|
setCreating(false);
|
|
onChannelCreated();
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full w-60 border-r bg-sidebar text-sidebar-foreground">
|
|
<div className="p-4 font-semibold text-lg">Colony</div>
|
|
<Separator />
|
|
<ScrollArea className="flex-1">
|
|
<div className="p-2 space-y-1">
|
|
{channels.map((ch) => (
|
|
<button
|
|
type="button"
|
|
key={ch.id}
|
|
onClick={() => onSelect(ch.id)}
|
|
className={`w-full text-left px-3 py-1.5 rounded-md text-sm transition-colors ${
|
|
ch.id === activeId
|
|
? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
|
|
: "hover:bg-sidebar-accent/50"
|
|
}`}
|
|
>
|
|
# {ch.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
<Separator />
|
|
<div className="p-2 flex gap-1">
|
|
<Input
|
|
placeholder="new channel"
|
|
value={newName}
|
|
onChange={(e) => setNewName(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleCreate()}
|
|
className="text-sm h-8"
|
|
/>
|
|
<Button size="sm" onClick={handleCreate} disabled={creating} className="h-8">
|
|
+
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|