CoastalCommitsPastes/client/app/(posts)/post/[id]/components/header/post-buttons/index.tsx
2022-12-04 01:31:51 -08:00

78 lines
1.7 KiB
TypeScript

"use client"
import Button from "@components/button"
import ButtonGroup from "@components/button-group"
import FileDropdown from "app/(posts)/components/file-dropdown"
import { Edit, ArrowUpCircle, Archive } from "react-feather"
import styles from "./post-buttons.module.css"
import { File } from "@prisma/client"
import { useRouter } from "next/navigation"
export const PostButtons = ({
title,
files,
loading,
postId,
parentId
}: {
title: string
files?: File[]
loading?: boolean
postId?: string
parentId?: string
}) => {
const router = useRouter()
const downloadClick = async () => {
if (!files?.length) return
const downloadZip = (await import("client-zip")).downloadZip
const blob = await downloadZip(
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 = `${title}.zip`
link.click()
link.remove()
}
const editACopy = () => {
router.push(`/new/from/${postId}`)
}
const viewParentClick = () => {
router.push(`/post/${parentId}`)
}
return (
<span className={styles.buttons}>
<ButtonGroup verticalIfMobile>
<Button
iconLeft={<Edit />}
onClick={editACopy}
style={{ textTransform: "none" }}
>
Edit a Copy
</Button>
{viewParentClick && (
<Button iconLeft={<ArrowUpCircle />} onClick={viewParentClick}>
View Parent
</Button>
)}
<Button
onClick={downloadClick}
iconLeft={<Archive />}
style={{ textTransform: "none" }}
>
Download as ZIP Archive
</Button>
<FileDropdown loading={loading} files={files || []} />
</ButtonGroup>
</span>
)
}