Reza_ashrafi
3 years ago
parent
3c2422578f
commit
1ec92db1dd
25 changed files with 751 additions and 17 deletions
@ -0,0 +1,19 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
|
||||||
|
function OR({}) { |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-row justify-between items-center my-3"> |
||||||
|
<div |
||||||
|
style={{ width: "43%", height: 1, backgroundColor: "#EFEFEF" }} |
||||||
|
></div> |
||||||
|
<span className="text-sm" style={{ color: "#C2C2C2" }}> |
||||||
|
یا |
||||||
|
</span> |
||||||
|
<div |
||||||
|
style={{ width: "43%", height: 1, backgroundColor: "#EFEFEF" }} |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default OR; |
||||||
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,16 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
//assets
|
||||||
|
import alertIcon from '../../../assets/icons/alert.svg'; |
||||||
|
function Alert({text}) { |
||||||
|
return ( |
||||||
|
<div className="flex flex-row items-center bg-blueFD rounded-md border border-solid border-blueC0 py-3 px-2 w-full my-3 dark:bg-opacity-5"> |
||||||
|
<img src={alertIcon} alt="" /> |
||||||
|
<p className="text-blueC0 text-xs mr-3 dark:text-white"> |
||||||
|
{text} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Alert; |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
function Header({ bg, title }) { |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-col items-center justify-end bg-blueFD1 transform -translate-y-16 dark:bg-opacity-5" style={{ height : '29%', minHeight : 180}}> |
||||||
|
<img src={bg} alt="" className="w-4/5 h-3/4 absolute left-1/5" /> |
||||||
|
<h1 className="text-lg text-blueC0 absolute left-1/2 transform -translate-x-1/2 bottom-4 font-semibold"> |
||||||
|
{title} |
||||||
|
</h1> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Header; |
||||||
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,48 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
function Info({ info, isDark }) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="flex flex-row py-4 px-3 rounded-md mt-4" |
||||||
|
style={{ |
||||||
|
backgroundColor: info.bg, |
||||||
|
border: `1px solid ${info.borderColor}`, |
||||||
|
}} |
||||||
|
> |
||||||
|
<img src={info.icon} alt="" /> |
||||||
|
<div className="flex flex-col flex-1 mr-3"> |
||||||
|
<strong className="text-base" style={{ color: info.title.color }}> |
||||||
|
{info.title.text} |
||||||
|
</strong> |
||||||
|
<p |
||||||
|
className="text-xs mt-1" |
||||||
|
style={{ |
||||||
|
color: isDark ? info.title.color : info.description.color, |
||||||
|
}} |
||||||
|
> |
||||||
|
{info.description.text} |
||||||
|
</p> |
||||||
|
{info.link && ( |
||||||
|
<Link |
||||||
|
className="self-end font-bold mt-2" |
||||||
|
to={info.link.link} |
||||||
|
style={{ |
||||||
|
fontSize: "calc(100vw / 38)", |
||||||
|
color: isDark ? info.title.color : info?.link?.color, |
||||||
|
}} |
||||||
|
> |
||||||
|
{info?.link?.title} |
||||||
|
</Link> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
isDark: state.publicApi.isDark, |
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(Info); |
||||||
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,27 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
//assets
|
||||||
|
import arrowLeftWhite from "../../../assets/icons/arrow-left-white.svg"; |
||||||
|
|
||||||
|
function NotFound({ title, subTitle, link }) { |
||||||
|
return ( |
||||||
|
<Link |
||||||
|
to={link} |
||||||
|
className="flex flex-row items-center justify-between py-3.5 px-2 rounded-md bg-blueC0 mt-4" |
||||||
|
> |
||||||
|
<div className="flex flex-col w-3/4"> |
||||||
|
{title && <strong className="text-xs text-white">{title}</strong>} |
||||||
|
<span |
||||||
|
className={`text-xs text-white font-light ${title ? "mt-2" : ""}`} |
||||||
|
style={{ fontSize: "calc(100vw / 36)" }} |
||||||
|
> |
||||||
|
{subTitle} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<img src={arrowLeftWhite} alt="" className="w-7" /> |
||||||
|
</Link> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default NotFound; |
||||||
|
After Width: | Height: | Size: 9.1 KiB |
@ -0,0 +1,52 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
const Season = ({ season }) => { |
||||||
|
const [activeSeason, setActiveSeason] = useState(null); |
||||||
|
const Unit = ({ unit }) => { |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE dark:border-opacity-60"> |
||||||
|
<div className="w-full flex flex-row justify-between items-center py-2 px-2 border-b border-solid border-blueFE dark:border-opacity-60"> |
||||||
|
<strong className="text-blueC0 text-xs dark:text-white font-normal"> |
||||||
|
{unit.name} |
||||||
|
</strong> |
||||||
|
<span className="text-xs text-blueC0 dark:text-white"> |
||||||
|
{unit.duration} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className="w-full flex flex-row"> |
||||||
|
{unit.play && ( |
||||||
|
<Link |
||||||
|
to={"/videos/:id/display"} |
||||||
|
className="flex flex-1 flex-row items-center py-1.5 px-2 border-l border-solid border-blueFE dark:border-opacity-60 justify-center text-xs text-blueC0 dark:text-white" |
||||||
|
> |
||||||
|
نمایش |
||||||
|
</Link> |
||||||
|
)} |
||||||
|
{unit.download && ( |
||||||
|
<Link |
||||||
|
to="/videos/:id/download" |
||||||
|
className="flex flex-1 flex-row items-center py-1.5 px-2 justify-center text-xs text-blueC0 dark:text-white" |
||||||
|
> |
||||||
|
دانلود |
||||||
|
</Link> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-col"> |
||||||
|
<button className="flex flex-row justify-between items-center rounded-md py-2 px-3 mb-3 bg-blueC0"> |
||||||
|
<strong className="text-xs text-white">{season.name}</strong> |
||||||
|
<span className="text-xs text-white">{season.duration}</span> |
||||||
|
</button> |
||||||
|
|
||||||
|
{season.units.map((unit, index) => ( |
||||||
|
<Unit unit={unit} key={index} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Season; |
||||||
Loading…
Reference in new issue