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

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;