You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
2.0 KiB
56 lines
2.0 KiB
import React, { useState } from "react"; |
|
import { Link } from "react-router-dom"; |
|
|
|
const Season = ({ season, id }) => { |
|
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" |
|
onClick={() => |
|
setActiveSeason(season.name === activeSeason ? null : season.name) |
|
} |
|
> |
|
<strong className="text-xs text-white">{season.name}</strong> |
|
<span className="text-xs text-white">{season.duration}</span> |
|
</button> |
|
|
|
{season.name === activeSeason && |
|
season.units.map((unit, index) => <Unit unit={unit} key={index} />)} |
|
</div> |
|
); |
|
}; |
|
|
|
export default Season;
|
|
|