Files
2025-05-28 09:55:51 +08:00

89 lines
2.8 KiB
JavaScript

import Link from 'next/link'
import { useContext } from 'react'
import UserContext from '~/lib/UserContext'
import { addChannel, deleteChannel } from '~/lib/Store'
import TrashIcon from '~/components/TrashIcon'
export default function Layout(props) {
const { signOut, user } = useContext(UserContext)
const slugify = (text) => {
return text
.toString()
.toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w-]+/g, '') // Remove all non-word chars
.replace(/--+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, '') // Trim - from end of text
}
const newChannel = async () => {
const slug = prompt('Please enter your name')
if (slug) {
addChannel(slugify(slug), user.id)
}
}
return (
<main className="main flex h-screen w-screen overflow-hidden">
{/* Sidebar */}
<nav
className="w-64 bg-gray-900 text-gray-100 overflow-scroll "
style={{ maxWidth: '20%', minWidth: 150, maxHeight: '100vh' }}
>
<div className="p-2 ">
<div className="p-2">
<button
className="bg-blue-900 hover:bg-blue-800 text-white py-2 px-4 rounded w-full transition duration-150"
onClick={() => newChannel()}
>
New Channel
</button>
</div>
<hr className="m-2" />
<div className="p-2 flex flex-col space-y-2">
<h6 className="text-xs">{user?.email}</h6>
<button
className="bg-blue-900 hover:bg-blue-800 text-white py-2 px-4 rounded w-full transition duration-150"
onClick={() => signOut()}
>
Log out
</button>
</div>
<hr className="m-2" />
<h4 className="font-bold">Channels</h4>
<ul className="channel-list">
{props.channels.map((x) => (
<SidebarItem
channel={x}
key={x.id}
isActiveChannel={x.id === props.activeChannelId}
user={user}
/>
))}
</ul>
</div>
</nav>
{/* Messages */}
<div className="flex-1 bg-gray-800 h-screen">{props.children}</div>
</main>
)
}
const SidebarItem = ({ channel, isActiveChannel, user }) => (
<>
<li className="flex items-center justify-between">
<Link href="/channels/[id]" as={`/channels/${channel.id}`}>
<a className={isActiveChannel ? 'font-bold' : ''}>{channel.slug}</a>
</Link>
{channel.id !== 1 && (channel.created_by === user?.id || user?.appRole === 'admin') && (
<button onClick={() => deleteChannel(channel.id)}>
<TrashIcon />
</button>
)}
</li>
</>
)