61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import CssEditor from '@/components/css-editor';
|
|
import InputError from '@/components/input-error';
|
|
import LoadingButton from '@/components/loading-button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { SharedData } from '@/types/global';
|
|
import { useForm, usePage } from '@inertiajs/react';
|
|
import { SystemProps } from '..';
|
|
|
|
const Style = () => {
|
|
const { props } = usePage<SharedData & SystemProps>();
|
|
const { translate } = props;
|
|
const { settings, button } = translate;
|
|
const initialFields = props.system.fields as SystemFields;
|
|
|
|
const { data, setData, post, errors, processing } = useForm({
|
|
...(props.system.fields as SystemFields),
|
|
global_style: initialFields.global_style,
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
post(route('settings.system.update', { id: props.system.id }), {
|
|
showProgress: false,
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="p-4 sm:p-6">
|
|
<CardTitle className="flex items-center gap-2">{settings.custom_global_style}</CardTitle>
|
|
<CardDescription className="hidden sm:block">{settings.css_description}</CardDescription>
|
|
</CardHeader>
|
|
|
|
<Separator />
|
|
|
|
<CardContent className="p-4 sm:p-6">
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* CSS Editor */}
|
|
<div>
|
|
{/* Fix focus area: set fixed height so editor fills the box; click-to-focus wrapper */}
|
|
<CssEditor value={data.global_style} setValue={(value) => setData('global_style', value)} />
|
|
|
|
<InputError message={errors.global_style} />
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<LoadingButton loading={processing} type="submit">
|
|
{button.save_changes}
|
|
</LoadingButton>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default Style;
|