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