import { Button, ButtonGroup, Card, Input, Spacer, Tabs, Textarea, Tooltip } from "@geist-ui/core" import { ChangeEvent, memo, useCallback, useMemo, useRef, useState } from "react" import styles from './document.module.css' import MarkdownPreview from '../preview' import { Trash, Download, ExternalLink } from '@geist-ui/icons' import FormattingIcons from "./formatting-icons" import Skeleton from "react-loading-skeleton" // import Link from "next/link" type Props = { editable?: boolean remove?: () => void title?: string content?: string setTitle?: (title: string) => void setContent?: (content: string) => void initialTab?: "edit" | "preview" skeleton?: boolean id?: string } const DownloadButton = ({ rawLink }: { rawLink?: string }) => { return (
) } const Document = ({ remove, editable, title, content, setTitle, setContent, initialTab = 'edit', skeleton, id }: Props) => { const codeEditorRef = useRef(null) const [tab, setTab] = useState(initialTab) const height = editable ? "500px" : '100%' const handleTabChange = (newTab: string) => { if (newTab === 'edit') { codeEditorRef.current?.focus() } setTab(newTab as 'edit' | 'preview') } const getType = useMemo(() => { if (!title) return const pathParts = title.split(".") const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : "" return language }, [title]) const removeFile = (remove?: () => void) => { if (remove) { if (content && content.trim().length > 0) { const confirmed = window.confirm("Are you sure you want to remove this file?") if (confirmed) { remove() } } else { remove() } } } const rawLink = useMemo(() => { if (id) { return `/file/raw/${id}` } }, [id]) if (skeleton) { return <>
{editable && }
} return ( <>
) => setTitle ? setTitle(event.target.value) : null} marginTop="var(--gap-double)" size={1.2} font={1.2} label="Filename" disabled={!editable} width={"100%"} id={title} /> {remove && editable &&
{tab === 'edit' && editable && } {rawLink && } {/* */}