123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- import { useRef, useState } from "react";
- import { DropAudioPlayer, DropAudioTitle, DropAudioWrap, DropImgWrap, DropVideoWrap,
- DropFileWrap, DropFileIcon, DropFileTitle, DropFileIconWrap, DropFileHeader, DropFileInfo, DropFileSize
- } from "./DropMediaFiles.style"
- import FileIcon from './icons8-File.svg';
- import MusicIcon from './icons8-music.png';
- export const DropImg = ({url}) => {
- const image = useRef(null);
- return (
- <DropImgWrap src={url} ref={image}/>
- )
- }
- export const DropVideo = ({url}) => {
- return (
- <DropVideoWrap src={url} controls/>
- )
- }
- export const DropAudio = ({url, name, size}) => {
- const [isOpen, setIsOpen] = useState(false);
- const handleOpen = () => setIsOpen(!isOpen);
-
- return (
- <DropAudioWrap>
- <DropFileWrap>
- <DropFileIconWrap isAudio={true} onClick={handleOpen}>
- <DropFileIcon src={MusicIcon}/>
- </DropFileIconWrap>
- <DropFileInfo>
- <DropFileTitle>{name}</DropFileTitle>
- <DropFileSize>{size}</DropFileSize>
- </DropFileInfo>
- </DropFileWrap>
- {isOpen && <DropAudioPlayer controls src={url}/>}
- </DropAudioWrap>
- )
- }
- export const DropFile = ({size, name}) => {
- return(
- <DropFileWrap>
- <DropFileIconWrap>
- <DropFileIcon src={FileIcon}/>
- </DropFileIconWrap>
-
- <DropFileInfo>
- <DropFileTitle>{name}</DropFileTitle>
- <DropFileSize>{size}</DropFileSize>
- </DropFileInfo>
-
- </DropFileWrap>
- )
- }
|