45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
// import React from "react"
|
|
import type PostData from "/models/PostData"
|
|
import type ChannelData from "/models/ChannelData"
|
|
import Header from './components/Header.js'
|
|
import FloatingPanel from "./components/FloatingPanel.js"
|
|
import ChannelInfoView from "./components/ChannelInfoView.js"
|
|
import TrendingChannelPreview from "./components/TrendingChannelPreview.js"
|
|
import PostPreview from "./components/PostPreview.js"
|
|
|
|
interface PostViewProps {
|
|
post: PostData
|
|
channel: ChannelData
|
|
mostRatedChannels: ChannelData[]
|
|
}
|
|
|
|
function PostView(props: PostViewProps){
|
|
return (
|
|
<div style={{display: 'flex', width: '100%'}}>
|
|
<Header/>
|
|
|
|
{/* LEFT FLOATING PANEL */}
|
|
<FloatingPanel anchorToRight={false}>
|
|
<h3>Most rated channels</h3>
|
|
<div className="brighter-bg">{props.mostRatedChannels.map(TrendingChannelPreview)}</div>
|
|
</FloatingPanel>
|
|
|
|
{/* POSTS DETAILS */}
|
|
<div style={{width: '100%'}}>
|
|
<div>{PostPreview(props.post)}</div>
|
|
<div className="light-border brighter-bg" style={{margin: '12px', minHeight: '300px'}}>
|
|
<h3><span>{props.post.commentIds.length}</span> comments</h3>
|
|
</div>
|
|
</div>
|
|
|
|
{/* RIGHT FLOATING PANEL */}
|
|
<FloatingPanel anchorToRight={true}>
|
|
<h3>This channel</h3>
|
|
<div className="brighter-bg">{ChannelInfoView(props.channel)}</div>
|
|
</FloatingPanel>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PostView
|