Компонент создания медиа

Компонент выведен в отдельный модуль
This commit is contained in:
degradin 2025-05-07 15:21:06 +03:00
parent f5997a6c93
commit 18afe9c214

View 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;