Компонент создания медиа
Компонент выведен в отдельный модуль
This commit is contained in:
parent
f5997a6c93
commit
18afe9c214
191
src/components/admin/MediaForm.jsx
Normal file
191
src/components/admin/MediaForm.jsx
Normal file
@ -0,0 +1,191 @@
|
||||
import React, { useState } from 'react';
|
||||
import { supabase } from '../../services/supabase';
|
||||
|
||||
const MediaForm = ({ onSuccess, onCancel }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
type: 'movie',
|
||||
overview: '',
|
||||
release_date: '',
|
||||
poster_url: '',
|
||||
backdrop_url: '',
|
||||
is_published: true
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('media')
|
||||
.insert([{
|
||||
...formData,
|
||||
created_by: (await supabase.auth.getUser()).data.user.id
|
||||
}])
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
onSuccess(data);
|
||||
} catch (error) {
|
||||
console.error('Error creating media:', error);
|
||||
setError(error.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: type === 'checkbox' ? checked : value
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-campfire-charcoal/80 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-campfire-dark rounded-lg shadow-xl max-w-2xl w-full p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-campfire-light">
|
||||
Добавить новый контент
|
||||
</h2>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="text-campfire-ash hover:text-campfire-light"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-lg mb-6">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-campfire-light mb-1">
|
||||
Название
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
value={formData.title}
|
||||
onChange={handleChange}
|
||||
className="input w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-campfire-light mb-1">
|
||||
Тип
|
||||
</label>
|
||||
<select
|
||||
name="type"
|
||||
value={formData.type}
|
||||
onChange={handleChange}
|
||||
className="input w-full"
|
||||
required
|
||||
>
|
||||
<option value="movie">Фильм</option>
|
||||
<option value="tv">Сериал</option>
|
||||
<option value="game">Игра</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-campfire-light mb-1">
|
||||
Описание
|
||||
</label>
|
||||
<textarea
|
||||
name="overview"
|
||||
value={formData.overview}
|
||||
onChange={handleChange}
|
||||
className="input w-full h-32"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-campfire-light mb-1">
|
||||
Дата выхода
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
name="release_date"
|
||||
value={formData.release_date}
|
||||
onChange={handleChange}
|
||||
className="input w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-campfire-light mb-1">
|
||||
URL постера
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
name="poster_url"
|
||||
value={formData.poster_url}
|
||||
onChange={handleChange}
|
||||
className="input w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-campfire-light mb-1">
|
||||
URL фона
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
name="backdrop_url"
|
||||
value={formData.backdrop_url}
|
||||
onChange={handleChange}
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="is_published"
|
||||
checked={formData.is_published}
|
||||
onChange={handleChange}
|
||||
className="mr-2"
|
||||
/>
|
||||
<label className="text-sm font-medium">Опубликовать сразу</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="btn-secondary"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-primary"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Создание...' : 'Создать'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MediaForm;
|
Loading…
Reference in New Issue
Block a user