forked from 77media/video-flow
58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
|
|
export const VideoShareForm: React.FC<{ onCancel: () => void; onShare: (videoUrl: string, videoName: string) => void }> = ({ onCancel, onShare }) => {
|
|
const [videoUrl, setVideoUrl] = useState('');
|
|
const [videoName, setVideoName] = useState('');
|
|
|
|
const handleShare = () => {
|
|
onShare(videoUrl, videoName);
|
|
};
|
|
|
|
return (
|
|
<div data-alt="video-share-form-container" className="backdrop-blur-lg bg-white/30 dark:bg-slate-900/30 rounded-lg p-6 shadow-lg">
|
|
<h2 data-alt="form-title" className="text-2xl font-bold mb-4 text-slate-800 dark:text-slate-200">转发视频</h2>
|
|
<div data-alt="form-fields" className="space-y-4">
|
|
<div data-alt="video-url-field" className="flex flex-col gap-2">
|
|
<label htmlFor="videoUrl" className="text-sm font-medium text-slate-700 dark:text-slate-300">视频链接</label>
|
|
<Input
|
|
id="videoUrl"
|
|
value={videoUrl}
|
|
onChange={(e) => setVideoUrl(e.target.value)}
|
|
placeholder="请输入视频链接"
|
|
className="bg-white/50 dark:bg-slate-800/50 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100"
|
|
/>
|
|
</div>
|
|
<div data-alt="video-name-field" className="flex flex-col gap-2">
|
|
<label htmlFor="videoName" className="text-sm font-medium text-slate-700 dark:text-slate-300">视频名称</label>
|
|
<Input
|
|
id="videoName"
|
|
value={videoName}
|
|
onChange={(e) => setVideoName(e.target.value)}
|
|
placeholder="请输入视频名称"
|
|
className="bg-white/50 dark:bg-slate-800/50 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div data-alt="form-actions" className="mt-6 flex justify-end gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onCancel}
|
|
data-alt="cancel-button"
|
|
className="border-slate-400 dark:border-slate-600 text-slate-800 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
onClick={handleShare}
|
|
data-alt="share-button"
|
|
className="bg-blue-500 hover:bg-blue-600 text-white"
|
|
>
|
|
一键转发
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|