CoastalCommitsPastes/client/app/(posts)/post/[id]/components/post-page/view-document/index.tsx

115 lines
2.6 KiB
TypeScript
Raw Normal View History

import { memo } from "react"
2022-04-09 20:48:19 -04:00
import styles from "./document.module.css"
import Skeleton from "@components/skeleton"
2022-11-10 02:11:36 -05:00
import Link from "next/link"
2022-11-12 21:39:03 -05:00
import Tooltip from "@components/tooltip"
2022-11-16 03:49:12 -05:00
import Button from "@components/button"
import ButtonGroup from "@components/button-group"
import DocumentTabs from "app/(posts)/components/tabs"
import Input from "@components/input"
import { Download, ExternalLink } from "react-feather"
// import Link from "next/link"
2022-03-06 19:46:59 -05:00
type Props = {
2022-04-09 20:48:19 -04:00
title: string
initialTab?: "edit" | "preview"
skeleton?: boolean
id: string
content: string
preview: string
2022-03-06 19:46:59 -05:00
}
const DownloadButton = ({ rawLink }: { rawLink?: string }) => {
2022-04-09 20:48:19 -04:00
return (
<div className={styles.actionWrapper}>
<ButtonGroup className={styles.actions}>
2022-11-12 21:39:03 -05:00
<Tooltip content="Download">
<Link
2022-04-09 20:48:19 -04:00
href={`${rawLink}?download=true`}
target="_blank"
rel="noopener noreferrer"
>
<Button
iconRight={<Download />}
aria-label="Download"
style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
/>
</Link>
2022-04-09 20:48:19 -04:00
</Tooltip>
2022-11-12 21:39:03 -05:00
<Tooltip content="Open raw in new tab">
<Link href={rawLink || ""} target="_blank" rel="noopener noreferrer">
2022-04-09 20:48:19 -04:00
<Button
iconLeft={<ExternalLink />}
2022-04-09 20:48:19 -04:00
aria-label="Open raw file in new tab"
style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
2022-04-09 20:48:19 -04:00
/>
</Link>
2022-04-09 20:48:19 -04:00
</Tooltip>
</ButtonGroup>
</div>
)
}
2022-04-09 20:48:19 -04:00
const Document = ({
content,
preview,
2022-04-09 20:48:19 -04:00
title,
initialTab = "edit",
skeleton,
id
}: Props) => {
const rawLink = () => {
if (id) {
return `/file/raw/${id}`
}
}
2022-04-09 20:48:19 -04:00
if (skeleton) {
return (
<>
<div className={styles.card}>
<div className={styles.fileNameContainer}>
<Skeleton width={275} height={36} />
</div>
<div className={styles.descriptionContainer}>
<div style={{ flexDirection: "row", display: "flex" }}>
<Skeleton width={125} height={36} />
</div>
<Skeleton width={"100%"} height={350} />
</div>
</div>
</>
)
}
2022-04-09 20:48:19 -04:00
return (
2022-11-16 03:49:12 -05:00
<>
2022-04-09 20:48:19 -04:00
<div className={styles.card}>
<Link href={`#${title}`} className={styles.fileNameContainer}>
<Input
2022-04-09 20:48:19 -04:00
id={`${title}`}
width={"100%"}
2022-11-18 01:36:53 -05:00
height={"2rem"}
2022-04-09 20:48:19 -04:00
style={{ borderRadius: 0 }}
value={title || "Untitled"}
disabled
aria-label="Document title"
/>
2022-04-09 20:48:19 -04:00
</Link>
<div className={styles.descriptionContainer}>
<DownloadButton rawLink={rawLink()} />
2022-11-16 03:49:12 -05:00
<DocumentTabs
defaultTab={initialTab}
preview={preview}
content={content}
isEditing={false}
/>
2022-04-09 20:48:19 -04:00
</div>
</div>
2022-11-16 03:49:12 -05:00
</>
2022-04-09 20:48:19 -04:00
)
2022-03-06 19:46:59 -05:00
}
2022-04-09 20:48:19 -04:00
export default memo(Document)