forked from Archives/Athou_commafeed
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { Input, Textarea } from "@mantine/core"
|
|
import RichCodeEditor from "components/code/RichCodeEditor"
|
|
import { useMobile } from "hooks/useMobile"
|
|
import type { ReactNode } from "react"
|
|
|
|
interface CodeEditorProps {
|
|
description?: ReactNode
|
|
language: "css" | "javascript"
|
|
value?: string
|
|
onChange: (value: string | undefined) => void
|
|
}
|
|
|
|
export function CodeEditor(props: CodeEditorProps) {
|
|
const mobile = useMobile()
|
|
|
|
return mobile ? (
|
|
// monaco mobile support is poor, fallback to textarea
|
|
<Textarea
|
|
autosize
|
|
minRows={4}
|
|
maxRows={15}
|
|
description={props.description}
|
|
styles={{
|
|
input: {
|
|
fontFamily: "monospace",
|
|
},
|
|
}}
|
|
value={props.value}
|
|
onChange={e => props.onChange(e.currentTarget.value)}
|
|
/>
|
|
) : (
|
|
<Input.Wrapper description={props.description}>
|
|
<RichCodeEditor height="30vh" language={props.language} value={props.value} onChange={props.onChange} />
|
|
</Input.Wrapper>
|
|
)
|
|
}
|