80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import { useCallback } from 'react';
|
|
import { useDropzone } from 'react-dropzone';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Music, X } from 'lucide-react';
|
|
|
|
interface CreateProductViewFilesCardProps {
|
|
previewFile: File | null;
|
|
onPreviewFileChange: (file: File | null) => void;
|
|
}
|
|
|
|
export function CreateProductViewFilesCard({
|
|
previewFile,
|
|
onPreviewFileChange,
|
|
}: CreateProductViewFilesCardProps) {
|
|
const onDrop = useCallback(
|
|
(accepted: File[]) => {
|
|
onPreviewFileChange(accepted[0] ?? null);
|
|
},
|
|
[onPreviewFileChange]
|
|
);
|
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
onDrop,
|
|
accept: { 'audio/*': ['.mp3', '.wav', '.m4a', '.ogg'] },
|
|
maxFiles: 1,
|
|
disabled: false,
|
|
});
|
|
|
|
return (
|
|
<Card variant="default">
|
|
<h3 className="font-bold text-foreground mb-4 flex items-center gap-2 text-sm uppercase tracking-wider">
|
|
<Music className="w-4 h-4 text-primary" /> Product Files
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-xs text-muted-foreground mb-1 block">
|
|
Main File (ZIP/RAR)
|
|
</label>
|
|
<div className="h-20 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--sumi-duration-normal)]">
|
|
<span className="text-xs text-muted-foreground">
|
|
Drop full product here
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-muted-foreground mb-1 block">
|
|
Audio Preview (MP3)
|
|
</label>
|
|
<div
|
|
{...getRootProps()}
|
|
className={`h-12 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer transition-colors duration-[var(--sumi-duration-normal)] ${
|
|
isDragActive ? 'border-primary bg-primary/5' : 'hover:border-primary'
|
|
}`}
|
|
>
|
|
<input {...getInputProps()} />
|
|
{previewFile ? (
|
|
<span className="text-xs text-foreground flex items-center gap-2">
|
|
{previewFile.name}
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onPreviewFileChange(null);
|
|
}}
|
|
className="p-1 rounded hover:bg-muted"
|
|
aria-label="Remove preview"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</span>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground">
|
|
Drop preview audio
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|