46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { ChevronDown, Hash, Volume2 } from "lucide-react"
|
|
import { Button } from "./ui/button"
|
|
|
|
interface Channel {
|
|
id: string
|
|
name: string
|
|
type: "text" | "voice" | "category"
|
|
}
|
|
|
|
interface ChannelListItemProps {
|
|
channel: Channel
|
|
}
|
|
|
|
export default function ChannelListItem({ channel }: ChannelListItemProps) {
|
|
if (channel.type === "category") {
|
|
return (
|
|
<div className="text-xs flex flex-row justify-between mt-4">
|
|
<div className="grow">
|
|
<div className="flex items-center gap-1">
|
|
{channel.name}
|
|
<ChevronDown className="size-4" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button variant="secondary" size="sm" className="justify-start">
|
|
<div className="flex items-center gap-2 max-w-72">
|
|
<div>
|
|
{channel.type === "text" && <Hash />}
|
|
{channel.type === "voice" && <Volume2 />}
|
|
</div>
|
|
<div className="truncate">
|
|
{channel.name}
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
</>
|
|
)
|
|
}
|