39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { ArrowLeftIcon } from '@heroicons/react/24/outline';
|
|
|
|
import Button from './Button';
|
|
import NavBar from './NavBar';
|
|
import SideNavChannel from './SideNavChannel';
|
|
import streamData from '../placeholder/GetStreams';
|
|
import { NextPage } from 'next';
|
|
import Link from 'next/link';
|
|
|
|
const BrowseLayout: NextPage = ({children}) => {
|
|
return (
|
|
<div className="font-inter flex flex-col h-screen text-gray-100">
|
|
<NavBar />
|
|
<main className="flex-1 flex flex-row overflow-hidden">
|
|
<div className="bg-neutral-800 w-60 flex flex-col">
|
|
<div className="flex flex-row justify-between p-2 items-center">
|
|
<p className="uppercase font-semibold text-sm">Trending channels</p>
|
|
<Button variant="subtle" className="p-2">
|
|
<ArrowLeftIcon className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<ul className="flex-1 overflow-scrollbar">
|
|
{streamData.data.map((stream) => (
|
|
<li key={stream.id}>
|
|
<Link href={`/${stream.user_login}`} passHref={true}>
|
|
<SideNavChannel stream={stream} />
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BrowseLayout;
|