mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: add video thumbnails to courses
This commit is contained in:
swve
parent
d72abd15fb
commit
2966ac91b7
9 changed files with 518 additions and 164 deletions
|
|
@ -12,6 +12,13 @@ import ThumbnailUpdate from './ThumbnailUpdate';
|
|||
import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext';
|
||||
import FormTagInput from '@components/Objects/StyledElements/Form/TagInput';
|
||||
import LearningItemsList from './LearningItemsList';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@components/ui/select";
|
||||
|
||||
type EditCourseStructureProps = {
|
||||
orgslug: string
|
||||
|
|
@ -102,15 +109,22 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
|
|||
}
|
||||
};
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
// Create initial values object
|
||||
const getInitialValues = () => {
|
||||
const thumbnailType = courseStructure?.thumbnail_type || 'image';
|
||||
return {
|
||||
name: courseStructure?.name || '',
|
||||
description: courseStructure?.description || '',
|
||||
about: courseStructure?.about || '',
|
||||
learnings: initializeLearnings(courseStructure?.learnings || ''),
|
||||
tags: courseStructure?.tags || '',
|
||||
public: courseStructure?.public || false,
|
||||
},
|
||||
thumbnail_type: thumbnailType,
|
||||
};
|
||||
};
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: getInitialValues(),
|
||||
validate,
|
||||
onSubmit: async values => {
|
||||
try {
|
||||
|
|
@ -123,6 +137,14 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
|
|||
enableReinitialize: true,
|
||||
}) as any;
|
||||
|
||||
// Reset form when courseStructure changes
|
||||
useEffect(() => {
|
||||
if (courseStructure && !isLoading) {
|
||||
const newValues = getInitialValues();
|
||||
formik.resetForm({ values: newValues });
|
||||
}
|
||||
}, [courseStructure, isLoading]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading) {
|
||||
const formikValues = formik.values as any;
|
||||
|
|
@ -142,19 +164,24 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
|
|||
}
|
||||
}, [formik.values, isLoading]);
|
||||
|
||||
if (isLoading || !courseStructure) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-6 py-5">
|
||||
{courseStructure && (
|
||||
<div className="editcourse-form">
|
||||
<div className="h-full">
|
||||
<div className="h-6" />
|
||||
<div className="px-10 pb-10">
|
||||
<div className="bg-white rounded-xl shadow-xs">
|
||||
<FormLayout onSubmit={formik.handleSubmit} className="p-6">
|
||||
{error && (
|
||||
<div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-xs">
|
||||
<div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 mb-6 transition-all shadow-xs">
|
||||
<AlertTriangle size={18} />
|
||||
<div className="font-bold text-sm">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
<FormLayout onSubmit={formik.handleSubmit}>
|
||||
|
||||
<div className="space-y-6">
|
||||
<FormField name="name">
|
||||
<FormLabelAndMessage label="Name" message={formik.errors.name} />
|
||||
<Form.Control asChild>
|
||||
|
|
@ -207,23 +234,49 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
|
|||
<FormField name="tags">
|
||||
<FormLabelAndMessage label="Tags" message={formik.errors.tags} />
|
||||
<Form.Control asChild>
|
||||
<FormTagInput
|
||||
placeholder="Enter to add..."
|
||||
onChange={(value) => formik.setFieldValue('tags', value)}
|
||||
value={formik.values.tags}
|
||||
/>
|
||||
<FormTagInput
|
||||
placeholder="Enter to add..."
|
||||
onChange={(value) => formik.setFieldValue('tags', value)}
|
||||
value={formik.values.tags}
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
|
||||
<FormField name="thumbnail_type">
|
||||
<FormLabelAndMessage label="Thumbnail Type" />
|
||||
<Form.Control asChild>
|
||||
<Select
|
||||
value={formik.values.thumbnail_type}
|
||||
onValueChange={(value) => {
|
||||
if (!value) return;
|
||||
formik.setFieldValue('thumbnail_type', value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full bg-white">
|
||||
<SelectValue>
|
||||
{formik.values.thumbnail_type === 'image' ? 'Image' :
|
||||
formik.values.thumbnail_type === 'video' ? 'Video' :
|
||||
formik.values.thumbnail_type === 'both' ? 'Both' : 'Image'}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="image">Image</SelectItem>
|
||||
<SelectItem value="video">Video</SelectItem>
|
||||
<SelectItem value="both">Both</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
|
||||
<FormField name="thumbnail">
|
||||
<FormLabelAndMessage label="Thumbnail" />
|
||||
<Form.Control asChild>
|
||||
<ThumbnailUpdate />
|
||||
<ThumbnailUpdate thumbnailType={formik.values.thumbnail_type} />
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
</FormLayout>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</FormLayout>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,29 +3,48 @@ import { useOrg } from '@components/Contexts/OrgContext'
|
|||
import { getAPIUrl } from '@services/config/config'
|
||||
import { updateCourseThumbnail } from '@services/courses/courses'
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||
import { ArrowBigUpDash, UploadCloud, Image as ImageIcon } from 'lucide-react'
|
||||
import { ArrowBigUpDash, UploadCloud, Image as ImageIcon, Video } from 'lucide-react'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import { mutate } from 'swr'
|
||||
import UnsplashImagePicker from './UnsplashImagePicker'
|
||||
import toast from 'react-hot-toast'
|
||||
|
||||
const MAX_FILE_SIZE = 8_000_000; // 8MB
|
||||
const VALID_MIME_TYPES = ['image/jpeg', 'image/jpg', 'image/png'] as const;
|
||||
const MAX_FILE_SIZE = 8_000_000; // 8MB for images
|
||||
const MAX_VIDEO_FILE_SIZE = 100_000_000; // 100MB for videos
|
||||
const VALID_IMAGE_MIME_TYPES = ['image/jpeg', 'image/jpg', 'image/png'] as const;
|
||||
const VALID_VIDEO_MIME_TYPES = ['video/mp4', 'video/webm'] as const;
|
||||
|
||||
type ValidMimeType = typeof VALID_MIME_TYPES[number];
|
||||
type ValidImageMimeType = typeof VALID_IMAGE_MIME_TYPES[number];
|
||||
type ValidVideoMimeType = typeof VALID_VIDEO_MIME_TYPES[number];
|
||||
|
||||
function ThumbnailUpdate() {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
type ThumbnailUpdateProps = {
|
||||
thumbnailType: 'image' | 'video' | 'both';
|
||||
}
|
||||
|
||||
type TabType = 'image' | 'video';
|
||||
|
||||
function ThumbnailUpdate({ thumbnailType }: ThumbnailUpdateProps) {
|
||||
const imageInputRef = useRef<HTMLInputElement>(null);
|
||||
const videoInputRef = useRef<HTMLInputElement>(null);
|
||||
const course = useCourse() as any
|
||||
const session = useLHSession() as any;
|
||||
const org = useOrg() as any
|
||||
const [localThumbnail, setLocalThumbnail] = useState<{ file: File; url: string } | null>(null)
|
||||
const [localThumbnail, setLocalThumbnail] = useState<{ file: File; url: string; type: 'image' | 'video' } | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState<string>('')
|
||||
const [showError, setShowError] = useState(false)
|
||||
const [showUnsplashPicker, setShowUnsplashPicker] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<TabType>('image')
|
||||
const withUnpublishedActivities = course ? course.withUnpublishedActivities : false
|
||||
|
||||
// Set initial active tab based on thumbnailType
|
||||
useEffect(() => {
|
||||
if (thumbnailType === 'video') {
|
||||
setActiveTab('video');
|
||||
} else {
|
||||
setActiveTab('image');
|
||||
}
|
||||
}, [thumbnailType]);
|
||||
|
||||
// Cleanup blob URLs when component unmounts or when thumbnail changes
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
|
|
@ -35,42 +54,55 @@ function ThumbnailUpdate() {
|
|||
};
|
||||
}, [localThumbnail]);
|
||||
|
||||
const validateFile = (file: File): boolean => {
|
||||
if (!VALID_MIME_TYPES.includes(file.type as ValidMimeType)) {
|
||||
setError(`Invalid file type: ${file.type}. Please upload only PNG or JPG/JPEG images`);
|
||||
setShowError(true);
|
||||
return false;
|
||||
const showError = (message: string) => {
|
||||
toast.error(message, {
|
||||
duration: 3000,
|
||||
position: 'top-center',
|
||||
});
|
||||
};
|
||||
|
||||
const validateFile = (file: File, type: 'image' | 'video'): boolean => {
|
||||
if (type === 'image') {
|
||||
if (!VALID_IMAGE_MIME_TYPES.includes(file.type as ValidImageMimeType)) {
|
||||
showError(`Invalid file type: ${file.type}. Please upload only PNG or JPG/JPEG images`);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
showError(`File size (${(file.size / 1024 / 1024).toFixed(2)}MB) exceeds the 8MB limit`);
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
if (!VALID_VIDEO_MIME_TYPES.includes(file.type as ValidVideoMimeType)) {
|
||||
showError(`Invalid file type: ${file.type}. Please upload only MP4 or WebM videos`);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (file.size > MAX_VIDEO_FILE_SIZE) {
|
||||
showError(`File size (${(file.size / 1024 / 1024).toFixed(2)}MB) exceeds the 100MB limit`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
setError(`File size (${(file.size / 1024 / 1024).toFixed(2)}MB) exceeds the 8MB limit`);
|
||||
setShowError(true);
|
||||
return false;
|
||||
}
|
||||
|
||||
setShowError(false);
|
||||
return true;
|
||||
}
|
||||
|
||||
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setError('');
|
||||
setShowError(false);
|
||||
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>, type: 'image' | 'video') => {
|
||||
const file = event.target.files?.[0];
|
||||
|
||||
if (!file) {
|
||||
setError('Please select a file');
|
||||
setShowError(true);
|
||||
showError('Please select a file');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateFile(file)) {
|
||||
if (!validateFile(file, type)) {
|
||||
event.target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const blobUrl = URL.createObjectURL(file);
|
||||
setLocalThumbnail({ file, url: blobUrl });
|
||||
await updateThumbnail(file);
|
||||
setLocalThumbnail({ file, url: blobUrl, type });
|
||||
await updateThumbnail(file, type);
|
||||
}
|
||||
|
||||
const handleUnsplashSelect = async (imageUrl: string) => {
|
||||
|
|
@ -79,31 +111,35 @@ function ThumbnailUpdate() {
|
|||
const response = await fetch(imageUrl);
|
||||
const blob = await response.blob();
|
||||
|
||||
if (!VALID_MIME_TYPES.includes(blob.type as ValidMimeType)) {
|
||||
if (!VALID_IMAGE_MIME_TYPES.includes(blob.type as ValidImageMimeType)) {
|
||||
throw new Error('Invalid image format from Unsplash');
|
||||
}
|
||||
|
||||
const file = new File([blob], `unsplash_${Date.now()}.jpg`, { type: blob.type });
|
||||
|
||||
if (!validateFile(file)) {
|
||||
if (!validateFile(file, 'image')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const blobUrl = URL.createObjectURL(file);
|
||||
setLocalThumbnail({ file, url: blobUrl });
|
||||
await updateThumbnail(file);
|
||||
setLocalThumbnail({ file, url: blobUrl, type: 'image' });
|
||||
await updateThumbnail(file, 'image');
|
||||
} catch (err) {
|
||||
setError('Failed to process Unsplash image');
|
||||
showError('Failed to process Unsplash image');
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const updateThumbnail = async (file: File) => {
|
||||
const updateThumbnail = async (file: File, type: 'image' | 'video') => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('thumbnail', file);
|
||||
formData.append('thumbnail_type', type);
|
||||
|
||||
const res = await updateCourseThumbnail(
|
||||
course.courseStructure.course_uuid,
|
||||
file,
|
||||
formData,
|
||||
session.data?.tokens?.access_token
|
||||
);
|
||||
|
||||
|
|
@ -111,87 +147,195 @@ function ThumbnailUpdate() {
|
|||
await new Promise((r) => setTimeout(r, 1500));
|
||||
|
||||
if (res.success === false) {
|
||||
setError(res.HTTPmessage);
|
||||
setShowError(true);
|
||||
showError(res.HTTPmessage);
|
||||
} else {
|
||||
setError('');
|
||||
setShowError(false);
|
||||
setLocalThumbnail(null);
|
||||
toast.success('Thumbnail updated successfully', {
|
||||
duration: 3000,
|
||||
position: 'top-center',
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to update thumbnail');
|
||||
setShowError(true);
|
||||
showError('Failed to update thumbnail');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-auto rounded-xl border border-gray-200 h-[250px] light-shadow bg-gray-50 transition-all duration-200 relative">
|
||||
{showError && error && (
|
||||
<div className="absolute top-4 left-0 right-0 mx-auto w-[90%] z-50 bg-red-50 rounded-lg text-red-800 p-3 transition-all border border-red-200 shadow-lg">
|
||||
<div className="text-sm font-medium text-center">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col justify-center items-center h-full p-6 space-y-4">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{localThumbnail ? (
|
||||
const getThumbnailUrl = (type: 'image' | 'video') => {
|
||||
if (type === 'image') {
|
||||
return course.courseStructure.thumbnail_image
|
||||
? getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course.courseStructure.course_uuid,
|
||||
course.courseStructure.thumbnail_image
|
||||
)
|
||||
: '/empty_thumbnail.png';
|
||||
} else {
|
||||
return course.courseStructure.thumbnail_video
|
||||
? getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course.courseStructure.course_uuid,
|
||||
course.courseStructure.thumbnail_video
|
||||
)
|
||||
: undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const renderThumbnailPreview = () => {
|
||||
if (localThumbnail) {
|
||||
if (localThumbnail.type === 'video') {
|
||||
return (
|
||||
<div className="max-w-[480px] mx-auto">
|
||||
<video
|
||||
src={localThumbnail.url}
|
||||
className={`${isLoading ? 'animate-pulse' : ''} w-full aspect-video object-cover rounded-lg border border-gray-200`}
|
||||
controls
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="max-w-[480px] mx-auto">
|
||||
<img
|
||||
src={localThumbnail.url}
|
||||
className={`${
|
||||
isLoading ? 'animate-pulse' : ''
|
||||
} shadow-sm w-[280px] h-[140px] object-cover rounded-lg border border-gray-200`}
|
||||
alt="Course thumbnail"
|
||||
alt="Course thumbnail preview"
|
||||
className={`${isLoading ? 'animate-pulse' : ''} w-full aspect-video object-cover rounded-lg border border-gray-200`}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={`${course.courseStructure.thumbnail_image ? getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course.courseStructure.course_uuid,
|
||||
course.courseStructure.thumbnail_image
|
||||
) : '/empty_thumbnail.png'}`}
|
||||
className="shadow-sm w-[280px] h-[140px] object-cover rounded-lg border border-gray-200 bg-gray-50"
|
||||
alt="Course thumbnail"
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isLoading && (
|
||||
<div className="flex space-x-2">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept=".jpg,.jpeg,.png"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-gray-50 text-gray-800 px-4 py-2 rounded-md text-sm font-medium flex items-center hover:bg-gray-100 transition-colors duration-200 border border-gray-200"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<UploadCloud size={16} className="mr-2" />
|
||||
Upload
|
||||
</button>
|
||||
<button
|
||||
className="bg-gray-50 text-gray-800 px-4 py-2 rounded-md text-sm font-medium flex items-center hover:bg-gray-100 transition-colors duration-200 border border-gray-200"
|
||||
onClick={() => setShowUnsplashPicker(true)}
|
||||
>
|
||||
<ImageIcon size={16} className="mr-2" />
|
||||
Gallery
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="font-medium text-sm text-green-800 bg-green-50 rounded-full px-4 py-2 flex items-center">
|
||||
<ArrowBigUpDash size={16} className="mr-2 animate-bounce" />
|
||||
Uploading...
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-gray-500">Supported formats: PNG, JPG/JPEG</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const currentThumbnailUrl = getThumbnailUrl(activeTab);
|
||||
if (activeTab === 'video' && currentThumbnailUrl) {
|
||||
return (
|
||||
<div className="max-w-[480px] mx-auto">
|
||||
<video
|
||||
src={currentThumbnailUrl}
|
||||
className="w-full aspect-video object-cover rounded-lg border border-gray-200"
|
||||
controls
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (currentThumbnailUrl) {
|
||||
return (
|
||||
<div className="max-w-[480px] mx-auto">
|
||||
<img
|
||||
src={currentThumbnailUrl}
|
||||
alt="Current course thumbnail"
|
||||
className="w-full aspect-video object-cover rounded-lg border border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const renderTabContent = () => {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center mt-4">
|
||||
<div className="font-medium text-sm text-green-800 bg-green-50 rounded-full px-4 py-2 flex items-center">
|
||||
<ArrowBigUpDash size={16} className="mr-2 animate-bounce" />
|
||||
Uploading...
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (activeTab === 'image') {
|
||||
return (
|
||||
<div className="flex gap-2 mt-4">
|
||||
<input
|
||||
ref={imageInputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept=".jpg,.jpeg,.png"
|
||||
onChange={(e) => handleFileChange(e, 'image')}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
onClick={() => imageInputRef.current?.click()}
|
||||
>
|
||||
<UploadCloud size={16} />
|
||||
Upload Image
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
onClick={() => setShowUnsplashPicker(true)}
|
||||
>
|
||||
<ImageIcon size={16} />
|
||||
Gallery
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 mt-4">
|
||||
<input
|
||||
ref={videoInputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept=".mp4,.webm"
|
||||
onChange={(e) => handleFileChange(e, 'video')}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
onClick={() => videoInputRef.current?.click()}
|
||||
>
|
||||
<Video size={16} />
|
||||
Upload Video
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full bg-white rounded-xl">
|
||||
{/* Tabs Navigation */}
|
||||
{thumbnailType === 'both' && (
|
||||
<div className="flex border-b border-gray-100">
|
||||
<button
|
||||
className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
|
||||
activeTab === 'image'
|
||||
? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50/50'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={() => setActiveTab('image')}
|
||||
>
|
||||
<ImageIcon size={16} />
|
||||
Image
|
||||
</button>
|
||||
<button
|
||||
className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
|
||||
activeTab === 'video'
|
||||
? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50/50'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={() => setActiveTab('video')}
|
||||
>
|
||||
<Video size={16} />
|
||||
Video
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-6">
|
||||
<div className="space-y-6">
|
||||
{renderThumbnailPreview()}
|
||||
{renderTabContent()}
|
||||
|
||||
<p className="text-sm text-gray-500">
|
||||
{activeTab === 'image' && 'Supported formats: PNG, JPG/JPEG (max 8MB)'}
|
||||
{activeTab === 'video' && 'Supported formats: MP4, WebM (max 100MB)'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showUnsplashPicker && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue