lms/resources/js/pages/dashboard/courses/partials/seo.tsx
2025-12-15 12:26:23 +01:00

93 lines
3.2 KiB
TypeScript

import InputError from '@/components/input-error';
import LoadingButton from '@/components/loading-button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { onHandleChange } from '@/lib/inertia';
import { useForm, usePage } from '@inertiajs/react';
import { CourseUpdateProps } from '../update';
const SEO = () => {
const { props } = usePage<CourseUpdateProps>();
const { translate } = props;
const { dashboard, input, button } = translate;
const { tab, course } = props;
const { data, setData, post, errors, processing } = useForm({
tab: tab,
meta_title: course.meta_title,
meta_keywords: course.meta_keywords,
meta_description: course.meta_description,
og_title: course.og_title,
og_description: course.og_description,
});
// Handle form submission
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
post(route('courses.update', { id: course.id }));
};
return (
<Card className="p-4 sm:p-6">
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<Label>{dashboard.meta_title}</Label>
<Input name="meta_title" value={data.meta_title} onChange={(e) => onHandleChange(e, setData)} placeholder={input.meta_title} />
<InputError message={errors.meta_title} />
</div>
<div>
<Label>{dashboard.meta_keywords}</Label>
<Textarea
rows={3}
name="meta_keywords"
value={data.meta_keywords}
onChange={(e) => onHandleChange(e, setData)}
placeholder={input.meta_keywords}
/>
<InputError message={errors.meta_keywords} />
</div>
<div>
<Label>{dashboard.meta_description}</Label>
<Textarea
rows={3}
name="meta_description"
value={data.meta_description}
onChange={(e) => onHandleChange(e, setData)}
placeholder={input.meta_description}
/>
<InputError message={errors.meta_description} />
</div>
<div>
<Label>{dashboard.og_title}</Label>
<Input name="og_title" value={data.og_title} onChange={(e) => onHandleChange(e, setData)} placeholder={input.og_title} />
<InputError message={errors.og_title} />
</div>
<div>
<Label>{dashboard.og_description}</Label>
<Textarea
rows={3}
name="og_description"
value={data.og_description}
onChange={(e) => onHandleChange(e, setData)}
placeholder={input.og_description}
/>
<InputError message={errors.og_description} />
</div>
<div className="mt-8">
<LoadingButton loading={processing}>{button.save_changes}</LoadingButton>
</div>
</form>
</Card>
);
};
export default SEO;