import React, { FormEvent, ReactNode, useState } from 'react'; import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'; import { Form, FormField, FormFields } from '@/components/ui/form'; import { useForm } from '@inertiajs/react'; import { Button } from '@/components/ui/button'; import { LoaderCircle } from 'lucide-react'; import { Label } from '@/components/ui/label'; import InputError from '@/components/ui/input-error'; import { Input } from '@/components/ui/input'; import { registerBashLanguage } from '@/lib/editor'; import { Editor, useMonaco } from '@monaco-editor/react'; import { useAppearance } from '@/hooks/use-appearance'; import { Script } from '@/types/script'; export default function ScriptForm({ script, children }: { script?: Script; children: ReactNode }) { const { getActualAppearance } = useAppearance(); const [open, setOpen] = useState(false); const form = useForm<{ name: string; content: string; }>({ name: script?.name ?? '', content: script?.script ?? '', }); const submit = (e: FormEvent) => { e.preventDefault(); const url = script ? route('scripts.update', { script: script.id }) : route('scripts.store'); form.post(url, { onSuccess: () => { setOpen(false); }, }); }; registerBashLanguage(useMonaco()); return ( {children} {script ? 'Edit' : 'Create'} script {script ? 'Edit' : 'Create'} script
form.setData('name', e.target.value)} />
form.setData('content', value ?? '')} options={{ fontSize: 15, minimap: { enabled: false, }, lineNumbers: 'off', padding: { top: 10, bottom: 10, }, }} />

You can use variables like {'${VARIABLE_NAME}'} in the script. The variables will be asked when executing the script

); }