import { Button, ButtonGroup, Card, Input, Spacer, Tabs, Textarea } from "@geist-ui/core" import { ChangeEvent, FormEvent, memo, useEffect, useReducer, useRef, useState } from "react" import styles from './document.module.css' import MarkdownPreview from '../preview' import { Trash } from '@geist-ui/icons' import FormattingIcons from "../formatting-icons" type Props = { editable: boolean remove?: () => void title?: string content?: string setTitle?: (title: string) => void setContent?: (content: string) => void initialTab?: "edit" | "preview" } const Document = ({ remove, editable, title, content, setTitle, setContent, initialTab = 'edit' }: 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 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() } } } return ( <>
) => setTitle ? setTitle(event.target.value) : null} marginTop="var(--gap-double)" size={1.2} font={1.2} label="Filename" disabled={!editable} width={"100%"} /> {remove && editable &&
{tab === 'edit' && editable && } {/* */}