reza added something

temp
Reza_ashrafi 3 years ago
parent ebd0f71210
commit b69c8c9981
  1. 8
      src/assets/images/poster.svg
  2. 2
      src/components/BottomNavigation/index.js
  3. 15
      src/components/Divider/index.js
  4. 2
      src/components/Header/index.js
  5. 2
      src/components/Search/index.js
  6. 2
      src/redux/reducers/public.js
  7. 67
      src/views/Videos/components/MostViewedVideo.js
  8. 51
      src/views/Videos/components/NewestVideo.js
  9. 30
      src/views/Videos/components/VerticalGradeFilter.js
  10. 51
      src/views/Videos/index.js

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 126 KiB

@ -69,7 +69,7 @@ BottomNavigation.defaultProps = {
{
id: 2,
name: "ویدئو",
link: "/vod",
link: "/videos",
activeIcon: "",
deactiveIcon: deactiveVideoIcon,
},

@ -0,0 +1,15 @@
import React from "react";
const Divider = ({ type }) => {
return (
<span
className="bg-gray-100 my-3"
style={{
height: type === "horizontal" ? "100%" : 1,
width: type === "horizontal" ? 1 : "100%",
}}
></span>
);
};
export default Divider;

@ -10,7 +10,7 @@ function Header({ title, link, isDark }) {
<strong className="text-blueC0 dark:text-white font-semibold text-sm">
{title}
</strong>
<Link to={link} className="ml-1">
<Link to={link} className="ml-2">
<img
src={isDark ? arrowWhiteIcon : arrowBlueIcon}
alt=""

@ -36,7 +36,7 @@ export default function Search({
<input
type="search"
name="q"
className={`w-full py-3 text-sm rounded-md pr-3 outline-none bg-transparent ${textColor}`}
className={`w-full py-2.5 text-sm rounded-md pr-3 outline-none bg-transparent ${textColor}`}
placeholder={_.join(
[langDetector(lang, "جستجو...", "Search...")],
" "

@ -1,7 +1,7 @@
import location from "../../utils/location";
const initialState = {
isDark: localStorage.getItem("isDark") || true,
isDark: localStorage.getItem("isDark") || false,
homeData: [],
newProducts: [],
levels: [],

@ -0,0 +1,67 @@
import React from "react";
import {Link} from 'react-router-dom';
import Header from "../../../components/Header";
import posterImage from "../../../assets/images/poster.svg";
function MostViewedVideo({}) {
const Video = ({ video }) => {
return (
<Link
to={"/products/" + video.id}
className="flex flex-col rounded-md ml-4"
>
<div
className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
style={{
backgroundImage : `url(${video.poster})`,
backgroundSize : '100% 100%',
repeat : 'no-repeat',
minWidth: 'calc(100vw / 1.5)',
minHeight: 'calc(100vw / 1.5 * 9 / 16)'
}}
>
<img
src={video.imageUrl }
className="rounded-md h-full absolute left-2 top-1/2 transform -translate-y-1/2"
style={{ width: 'calc(100vw / 7)', height: 'calc(100vw / 8 * 15 / 9)' }}
/>
</div>
<strong
className="text-sm mt-1 text-blue5F"
>
{video.name}
</strong>
<div className="w-full flex flex-row justify-between items-center">
<strong className="mt-2 text-blue52 text-xs">
{video.price}
</strong>
<span className="text-blueC0 text-xs mt-1">
{"پایه" + " " + video.grade}
</span>
</div>
</Link>
);
};
return (
<div className="w-full flex flex-col">
<Header title="پربازدیدترین" link="/videos/video" />
<div className="w-full flex flex-row overflow-x-scroll pb-1.5">
{[0, 1, 2].map((video, index) => (
<Video
key={index}
video={{
id : 0,
name: "ریاضی",
price: "145.000 تومان",
grade: "4",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: posterImage,
}}
/>
))}
</div>
</div>
);
}
export default MostViewedVideo;

@ -0,0 +1,51 @@
import React from "react";
import {Link} from 'react-router-dom';
import Header from "../../../components/Header";
import posterImage from "../../../assets/images/poster.svg";
const NewestVideo = () => {
const Video = ({ video }) => {
return (
<Link
to={'/products/product'}
className="flex flex-col items-start mb-4"
style={{width: 'calc(100vw / 2.3)'}}
>
<img
src={video.poster}
className="w-full rounded-md"
/>
<strong
className="text-sm mt-1 text-blue5F"
>
{video.name}
</strong>
<span className="text-blueC0 text-xs mt-1">
{"پایه" + " " + video.grade}
</span>
</Link>
);
};
return (
<div className="w-full flex flex-col">
<Header title="جدیدترین دورهها" link="/videos/video" />
<div className="w-full flex flex-row flex-wrap justify-between overflow-x-scroll mt-3">
{[0, 1, 2, 3].map((video, index) => (
<Video
key={index}
video={{
name: "ریاضی",
price: "145.000 تومان",
grade: "4",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: posterImage,
}}
key={index}
/>
))}
</div>
</div>
);
};
export default NewestVideo;

@ -0,0 +1,30 @@
import React from "react";
import { connect } from "react-redux";
import Header from "../../../components/Header";
const VerticalGradeFilter = ({ grades }) => {
const Grade = ({ grade }) => {
return (
<button className="px-4 py-0.5 ml-2.5 rounded-sm border border-gray-300 mt-2 bg-grayF9">
<strong className="text-xs text-gray-600">{grades[grade]}</strong>
</button>
);
};
return (
<div className="w-full flex flex-col mt-3">
<Header title={"پایه تحصیلی"} link="videos/video" />
<div className="flex flex-row w-full overflow-x-scroll pb-3">
{Object.keys(grades).map((grade, index) => (
<Grade grade={grade} key={index} />
))}
</div>
</div>
);
};
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
});
export default connect(mapStateToProps)(VerticalGradeFilter);

@ -1,21 +1,50 @@
import React, { useState, useEffect, useCallback } from "react";
import { Link } from "react-router-dom";
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { book, publicApi } from "../../redux/actions";
import { publicApi } from "../../redux/actions";
import Search from "../../components/Search";
import VerticalGradeFilter from "./components/VerticalGradeFilter";
import Divider from "../../components/Divider";
import MostViewedVideo from "./components/MostViewedVideo";
import NewestVideo from "./components/NewestVideo";
//assets
import searchLight from "../../assets/icons/search-light.svg";
const Videos = ({ }) => {
function Videos({ headerOptions, setHeaderOptions }) {
const [search, setSearch] = useState("");
useEffect(() => {
setHeaderOptions(headerOptions);
}, []);
return (
<></>
<div className="flex flex-col">
<div className="px-4">
<Search
backgroundColor="bg-grayF9 dark:bg-gray2077"
borderColor="border-grayDB dark:border-gray45"
textColor="text-blueC0 dark:text-white"
icon={searchLight}
/>
</div>
<div className="pr-4">
<VerticalGradeFilter />
</div>
<div className="px-4 flex flex-col">
<Divider type={"vertical"} />
</div>
<div className="pr-4">
<MostViewedVideo />
</div>
<div className="px-4 flex flex-col">
<Divider type={"vertical"} />
<NewestVideo />
</div>
</div>
);
};
}
const mapStateToProps = (state) => ({
});
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Videos);

Loading…
Cancel
Save