Reza_ashrafi
3 years ago
parent
1ec92db1dd
commit
ba7343759d
13 changed files with 313 additions and 8 deletions
@ -0,0 +1,10 @@ |
||||
export default function MaterialAudioPlayer(props) { |
||||
return ( |
||||
<audio controls className="w-full h-10 mt-4"> |
||||
<source |
||||
src="http://sv.bahar-music.ir/archive/S/Sadegh/Ho3ein%20Ft%20Sadegh%20-%20Shaba%20Radepa%20Tanhayi/Sadegh%20Ft%20Ho3ein%20-%20Shaba.mp3" |
||||
type="audio/mp3" |
||||
/> |
||||
</audio> |
||||
); |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
import React from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
import linkIcon from "./links.svg"; |
||||
|
||||
export default function Links({ links }) { |
||||
return ( |
||||
<div className="w-full flex-row justify-between items-center rounded-md bg-yellow-100 bg-opacity-20 py-3 px-2 mt-5 relative dark:bg-opacity-10"> |
||||
<div className="flex flex-col"> |
||||
<strong className="text-sm font-normal dark:text-white">لینک ها</strong> |
||||
{links.map((link, i) => ( |
||||
<Link to="#" key={i} className="text-xs mt-1 dark:text-white"> |
||||
{link} |
||||
</Link> |
||||
))} |
||||
</div> |
||||
<img src={linkIcon} className="w-8 absolute left-2 top-1/2 transform -translate-y-1/2" /> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
import React from "react"; |
||||
import pdfIcon from "./pdf.svg"; |
||||
|
||||
export default function PDF({ name, file }) { |
||||
return ( |
||||
<div className="w-full flex-row justify-between items-center rounded-md bg-red-100 bg-opacity-50 py-6 px-2 mt-5 relative dark:bg-opacity-10"> |
||||
<strong className="text-right text-red-900 text-xs font-normal dark:text-white">{name}</strong> |
||||
<img src={pdfIcon} className="w-8 absolute left-2 top-1/2 transform -translate-y-1/2" /> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
import React from "react"; |
||||
|
||||
import pptIcon from "./ppt.png"; |
||||
|
||||
export default function PPT({ name, file }) { |
||||
return ( |
||||
<div className="w-full flex-row-reverse justify-between items-center rounded-md bg-green-100 bg-opacity-50 py-6 px-2 mt-5 relative dark:bg-opacity-10"> |
||||
<strong className="text-right text-green-900 text-xs font-normal dark:text-white"> |
||||
{name} |
||||
</strong> |
||||
<img |
||||
src={pptIcon} |
||||
className="w-8 absolute left-2 top-1/2 transform -translate-y-1/2" |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,139 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import Voice from "./Voice"; |
||||
import Video from "./Video"; |
||||
import PPT from "./PPT"; |
||||
import PDF from "./PDF"; |
||||
import Links from "./Links"; |
||||
|
||||
//assets
|
||||
|
||||
export default function Tab({ data }) { |
||||
const [dataType, setDataType] = useState("all"); |
||||
return ( |
||||
<div className="w-full flex flex-col rounded-md overflow-hidden mt-5 border border-solid border-blueFF1 dark:border-opacity-10"> |
||||
<div className="w-full flex flex-row justify-between"> |
||||
<button |
||||
onClick={() => setDataType("all")} |
||||
className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${ |
||||
dataType === "all" |
||||
? "bg-blueFF1 font-medium" |
||||
: "bg-white font-normal" |
||||
}`}
|
||||
> |
||||
تمامی محتوا |
||||
</button> |
||||
<button |
||||
onClick={() => setDataType("voice")} |
||||
className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${ |
||||
dataType === "voice" |
||||
? "bg-blueFF1 font-medium" |
||||
: "bg-white font-normal" |
||||
}`}
|
||||
> |
||||
صوت |
||||
</button> |
||||
<button |
||||
onClick={() => setDataType("video")} |
||||
className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${ |
||||
dataType === "video" |
||||
? "bg-blueFF1 font-medium" |
||||
: "bg-white font-normal" |
||||
}`}
|
||||
> |
||||
ویدئو |
||||
</button> |
||||
<button |
||||
onClick={() => setDataType("pdf")} |
||||
className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${ |
||||
dataType === "pdf" |
||||
? "bg-blueFF1 font-medium" |
||||
: "bg-white font-normal" |
||||
}`}
|
||||
> |
||||
پی دی اف |
||||
</button> |
||||
<button |
||||
onClick={() => setDataType("ppt")} |
||||
className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${ |
||||
dataType === "ppt" |
||||
? "bg-blueFF1 font-medium" |
||||
: "bg-white font-normal" |
||||
}`}
|
||||
> |
||||
پاور پوینت |
||||
</button> |
||||
<button |
||||
onClick={() => setDataType("links")} |
||||
className={`py-2 w-1/6 border-b border-solid text-blueC0 text-xs dark:bg-opacity-10 dark:text-white border-blueFF1 dark:border-opacity-10 ${ |
||||
dataType === "links" |
||||
? "bg-blueFF1 font-medium" |
||||
: "bg-white font-normal" |
||||
}`}
|
||||
> |
||||
لینک ها |
||||
</button> |
||||
</div> |
||||
<div className="flex flex-col w-full p-4"> |
||||
{dataType === "all" && ( |
||||
<> |
||||
{data.voice && ( |
||||
<Voice name={data.voice.name} file={data.voice.file} /> |
||||
)} |
||||
{data.video && ( |
||||
<Video name={data.video.name} file={data.voice.file} /> |
||||
)} |
||||
{data.ppt && <PPT name={data.ppt.name} file={data.ppt.file} />} |
||||
{data.pdf && <PDF name={data.ppt.name} file={data.ppt.file} />} |
||||
{data.links && <Links links={data.links} />} |
||||
</> |
||||
)} |
||||
{dataType === "voice" && ( |
||||
<> |
||||
{data.voice ? ( |
||||
<Voice name={data.voice.name} file={data.voice.file} /> |
||||
) : ( |
||||
<p className="text-xs text-gray70">فایل صدا یافت نشد.</p> |
||||
)} |
||||
</> |
||||
)} |
||||
{dataType === "video" && ( |
||||
<> |
||||
{data.video ? ( |
||||
<Video name={data.video.name} file={data.voice.file} /> |
||||
) : ( |
||||
<p className="text-xs text-gray70">فایل تصویری یافت نشد.</p> |
||||
)} |
||||
</> |
||||
)} |
||||
{dataType === "ppt" && ( |
||||
<> |
||||
{data.ppt ? ( |
||||
<PPT name={data.ppt.name} file={data.ppt.file} /> |
||||
) : ( |
||||
<p className="text-xs text-gray70">فایل پاورپوینت یافت نشد.</p> |
||||
)} |
||||
</> |
||||
)} |
||||
{dataType === "pdf" && ( |
||||
<> |
||||
{data.pdf ? ( |
||||
<PDF name={data.pdf.name} file={data.pdf.file} /> |
||||
) : ( |
||||
<p className="text-xs text-gray70">فایل پی دی اف یافت نشد.</p> |
||||
)} |
||||
</> |
||||
)} |
||||
{dataType === "links" && ( |
||||
<> |
||||
{data.links ? ( |
||||
<Links name={data.links.name} links={data.links} /> |
||||
) : ( |
||||
<p className="text-xs text-gray70">لینکی پیدا نشد.</p> |
||||
)} |
||||
</> |
||||
)} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
import React from "react"; |
||||
|
||||
export default function Video({ name, file }) { |
||||
return ( |
||||
<div className="w-full flex-col mt-5"> |
||||
<strong className="w-full text-right text-green-900 mb-2 text-xs font-normal"> |
||||
{name} |
||||
</strong> |
||||
<div className="w-full rounded-md overflow-hidden mt-4"> |
||||
<video |
||||
style={{ width: "100%", height: "calc(100vw * 9 / 16 - 32)" }} |
||||
controls |
||||
> |
||||
<source src={`https://dnvn.ir/api/v1/file/20540`} type="video/mp4" /> |
||||
</video> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
import React from "react"; |
||||
|
||||
import MusicPlayer from "../../../../components/Audio"; |
||||
|
||||
export default function Voice({ name, file }) { |
||||
return ( |
||||
<div className="w-full flex-col rounded-md bg-green-200 bg-opacity-30 py-3 px-2 mt-4 dark:bg-opacity-10"> |
||||
<strong className="w-full text-right text-green-900 text-xs font-normal dark:text-white"> |
||||
{name} |
||||
</strong> |
||||
<MusicPlayer /> |
||||
</div> |
||||
); |
||||
} |
||||
|
After Width: | Height: | Size: 923 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in new issue