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

113 lines
2.6 KiB
TypeScript
Raw Normal View History

import { memo, useRef } from "react"
2022-04-09 20:48:19 -04:00
import styles from "./document.module.css"
import Download from "@geist-ui/icons/download"
import ExternalLink from "@geist-ui/icons/externalLink"
import Skeleton from "@components/skeleton"
2022-11-10 02:11:36 -05:00
import Link from "next/link"
2022-11-16 03:49:12 -05:00
import { Tabs, Textarea, Tag, Spacer } from "@geist-ui/core/dist"
import { StaticPreview } from "app/(posts)/components/preview"
2022-11-12 04:28:06 -05:00
import FadeIn from "@components/fade-in"
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 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"
>
2022-11-16 03:49:12 -05:00
<Button iconRight={<Download />} aria-label="Download" />
</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
2022-11-16 03:49:12 -05:00
iconRight={<ExternalLink />}
2022-04-09 20:48:19 -04:00
aria-label="Open raw file in new tab"
/>
</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 (
<>
<Spacer height={1} />
<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}>
<Tag
height={"100%"}
id={`${title}`}
width={"100%"}
style={{ borderRadius: 0 }}
>
{title || "Untitled"}
</Tag>
</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)