CoastalCommitsPastes/client/components/post-page/index.tsx
2022-03-25 13:29:49 -07:00

89 lines
No EOL
3.3 KiB
TypeScript

import Header from "@components/header/header"
import PageSeo from "@components/page-seo"
import VisibilityBadge from "@components/visibility-badge"
import DocumentComponent from '@components/view-document'
import styles from './post-page.module.css'
import homeStyles from '@styles/Home.module.css'
import type { File, Post } from "@lib/types"
import { Page, Button, Text, Badge, Tooltip, Spacer, ButtonDropdown, ButtonGroup } from "@geist-ui/core"
import ShiftBy from "@components/shift-by"
import { useMemo, useState } from "react"
import timeAgo from "@lib/time-ago"
import Archive from '@geist-ui/icons/archive'
import FileDropdown from "@components/file-dropdown"
import ScrollToTop from "@components/scroll-to-top"
type Props = {
post: Post
}
const PostPage = ({ post }: Props) => {
const download = async () => {
const downloadZip = (await import("client-zip")).downloadZip
const blob = await downloadZip(post.files.map((file: any) => {
return {
name: file.title,
input: file.content,
lastModified: new Date(file.updatedAt)
}
})).blob()
const link = document.createElement("a")
link.href = URL.createObjectURL(blob)
link.download = `${post.title}.zip`
link.click()
link.remove()
}
const createdDate = useMemo(() => new Date(post.createdAt), [post.createdAt])
const [time, setTimeAgo] = useState(timeAgo(createdDate))
const formattedTime = `${createdDate.toLocaleDateString()} ${createdDate.toLocaleTimeString()}`
return (
<Page width={"100%"}>
<PageSeo
title={`${post.title} - Drift`}
description={post.description}
isPrivate={false}
/>
<Page.Header>
<Header />
</Page.Header>
<Page.Content className={homeStyles.main}>
{/* {!isLoading && <PostFileExplorer files={post.files} />} */}
<div className={styles.header}>
<span className={styles.title}>
<Text h2>{post.title}</Text>
<div className={styles.badges}>
<VisibilityBadge visibility={post.visibility} />
<Badge type="secondary"><Tooltip text={formattedTime}>{time}</Tooltip></Badge>
</div>
</span>
<span className={styles.buttons}>
<ButtonGroup>
<Button auto onClick={download} icon={<Archive />}>
Download as ZIP archive
</Button>
<FileDropdown files={post.files} />
</ButtonGroup>
</span>
</div>
{/* {post.files.length > 1 && <FileTree files={post.files} />} */}
{post.files.map(({ id, content, title }: File) => (
<DocumentComponent
key={id}
title={title}
initialTab={'preview'}
id={id}
content={content}
/>
))}
<ScrollToTop />
</Page.Content>
</Page >
)
}
export default PostPage