parent
42d5896f63
commit
89e4c31d24
39 changed files with 1861 additions and 264 deletions
|
After Width: | Height: | Size: 379 B |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
@ -0,0 +1,11 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Checkbox from "@mui/material/Checkbox"; |
||||||
|
|
||||||
|
export default function CustomCheckbox({ icon, checkedIcon }: any) { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Checkbox icon={icon} checkedIcon={checkedIcon} /> |
||||||
|
</> |
||||||
|
|
||||||
|
); |
||||||
|
} |
||||||
@ -1,4 +1,5 @@ |
|||||||
declare module '*.jpg'; |
declare module '*.jpg'; |
||||||
declare module '*.jpeg'; |
declare module '*.jpeg'; |
||||||
declare module '*.png'; |
declare module '*.png'; |
||||||
declare module '*.svg'; |
declare module '*.svg'; |
||||||
|
declare module '*.mp4'; |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
.contact{ |
||||||
|
header{ |
||||||
|
color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.contact{ |
||||||
|
main{ |
||||||
|
max-width: 1350px; |
||||||
|
padding-top: 40px; |
||||||
|
} |
||||||
|
.MuiFormControl-root { |
||||||
|
width: 100%; |
||||||
|
margin: 10px auto !important; |
||||||
|
.MuiSelect-iconOutlined { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.MuiSelect-outlined.MuiSelect-outlined { |
||||||
|
padding-right: 15px; |
||||||
|
} |
||||||
|
color: #797979 !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
top: 0px !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
border-color: #666666 !important; |
||||||
|
border-width: 1px !important; |
||||||
|
color: green !important; |
||||||
|
border-radius: 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiOutlinedInput-input { |
||||||
|
padding: 15px 14px !important; |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: 20px; |
||||||
|
&:focus{ |
||||||
|
border: 0.2px solid #84de56 !important; |
||||||
|
border-radius: 10px; |
||||||
|
transform : translateY(0.5px); |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiInputLabel-outlined { |
||||||
|
font-family: numeralLight !important; |
||||||
|
display: inline !important; |
||||||
|
position: absolute; |
||||||
|
text-align: right !important; |
||||||
|
right: 15px; |
||||||
|
top: 22px; |
||||||
|
padding: 0px !important; |
||||||
|
transform: translate(0px, 0px) scale(1) !important; |
||||||
|
} |
||||||
|
.MuiInputLabel-shrink { |
||||||
|
text-align: center !important; |
||||||
|
display: inline; |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
top: -8px; |
||||||
|
transform: translate(0px, 0px) scale(0.85) !important; |
||||||
|
padding: 0px 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
background-color: #2F2F2F; |
||||||
|
width: fit-content; |
||||||
|
text-align: center; |
||||||
|
color: #B5B5B5 !important; |
||||||
|
letter-spacing: -1px; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
.Mui-focused { |
||||||
|
color: rgba(0, 0, 0, 1) !important; |
||||||
|
border-color: #84de56 !important; |
||||||
|
// background-color: white; |
||||||
|
color: #84de56 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiInputBase-input { |
||||||
|
height: auto !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import "./index.scss"; |
||||||
|
import Navbar from "../../components/Navbar/index"; |
||||||
|
import Footer from "../../views/Home/Footer/index"; |
||||||
|
import Input from "../../components/Input/index"; |
||||||
|
import onInput from "../../util/onInput"; |
||||||
|
|
||||||
|
interface FormData { |
||||||
|
name?: string; |
||||||
|
cellphone?: string; |
||||||
|
departman?: string; |
||||||
|
text?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export default function Contact() { |
||||||
|
const [formData, setFormData] = useState<FormData | undefined>(undefined); |
||||||
|
|
||||||
|
const onChange = (e: any) => { |
||||||
|
setFormData({ ...formData, [e.target.name]: e.target.value }); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="contact main d-flex flex-column"> |
||||||
|
<Navbar /> |
||||||
|
<main className="d-flex flex-column"> |
||||||
|
<header> |
||||||
|
<h1>تماس با ما</h1> |
||||||
|
</header> |
||||||
|
<div className="d-flex"> |
||||||
|
<section className="contact__form d-flex flex-column"> |
||||||
|
<form action=""> |
||||||
|
<div className="contact__form--name"> |
||||||
|
<Input |
||||||
|
name="name" |
||||||
|
label="نام" |
||||||
|
align="right" |
||||||
|
// onInput={onInput.englishAndNumberWithoutSpace}
|
||||||
|
onChange={onChange} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="contact__form--name"> |
||||||
|
<Input |
||||||
|
name="cellphone" |
||||||
|
label="شماره موبایل" |
||||||
|
align="left" |
||||||
|
onInput={onInput.numberOnly} |
||||||
|
onChange={onChange} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</section> |
||||||
|
<section className="contact__info d-flex flex-column"> |
||||||
|
|
||||||
|
</section> |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
<Footer /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
.discount-code{ |
||||||
|
width: 100%; |
||||||
|
border: 1px solid #707070; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 20px 30px; |
||||||
|
h3{ |
||||||
|
color: white; |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
input{ |
||||||
|
background-color : rgba(255, 255, 255, 0.06); |
||||||
|
border-top-right-radius: 10px; |
||||||
|
border-bottom-right-radius: 10px; |
||||||
|
border: 0px; |
||||||
|
color: white; |
||||||
|
&::placeholder{ |
||||||
|
color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
button{ |
||||||
|
background-color : #9CDF52; |
||||||
|
border-top-left-radius: 10px; |
||||||
|
color: white; |
||||||
|
border-bottom-left-radius: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width : 1441px) { |
||||||
|
.discount-code{ |
||||||
|
h3{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
input{ |
||||||
|
padding: 20px 10px 20px 0px; |
||||||
|
width: 200px; |
||||||
|
font-size: 14px; |
||||||
|
&::placeholder{ |
||||||
|
font-size: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
button{ |
||||||
|
padding: 0px 20px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.discount-code{ |
||||||
|
h3{ |
||||||
|
font-size: calc(100vw / 72); |
||||||
|
} |
||||||
|
input{ |
||||||
|
padding: 20px 10px 20px 0px; |
||||||
|
width: 200px; |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
&::placeholder{ |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
} |
||||||
|
button{ |
||||||
|
padding: 0px 20px; |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function DiscountCode() { |
||||||
|
return ( |
||||||
|
<div className="discount-code d-flex align-items-center justify-content-between"> |
||||||
|
<h3>کارت هدیه یا کد تخفیف دارید؟ </h3> |
||||||
|
<div className="d-flex flex-column"> |
||||||
|
<div className="d-flex"> |
||||||
|
<input type="text" placeholder="کد خود را در این قسمت وارد نمائید" /> |
||||||
|
<button>تایید کد</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,133 @@ |
|||||||
|
.subscribe-radio{ |
||||||
|
width: 100%; |
||||||
|
border : 1px solid #DFDFDF; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-radius: 10px; |
||||||
|
&__name{ |
||||||
|
padding: 12px; |
||||||
|
border-top-right-radius: 10px; |
||||||
|
border-bottom-right-radius: 10px; |
||||||
|
} |
||||||
|
&__factor{ |
||||||
|
border-top-left-radius: 10px; |
||||||
|
border-bottom-left-radius: 10px; |
||||||
|
background-color: rgba(255, 255, 255, 0.18); |
||||||
|
padding : 10px 20px 10px 0px; |
||||||
|
|
||||||
|
strong, b{ |
||||||
|
color: white; |
||||||
|
} |
||||||
|
&--tag{ |
||||||
|
background-color: yellow; |
||||||
|
padding: 4px 20px; |
||||||
|
border-radius: 30px; |
||||||
|
width: fit-content; |
||||||
|
} |
||||||
|
&--finalPrice{ |
||||||
|
i{ |
||||||
|
color: white; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--off{ |
||||||
|
color: #707070; |
||||||
|
b{ |
||||||
|
color: #707070; |
||||||
|
position: relative; |
||||||
|
span{ |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 2px; |
||||||
|
top: 50%; |
||||||
|
left: 0px; |
||||||
|
transform: translateY(-50%) rotate(-15deg); |
||||||
|
background-color: rgb(211, 211, 211); |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
} |
||||||
|
i{ |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-active{ |
||||||
|
box-shadow: 0px 0px 6px #4DD35B; |
||||||
|
background-color: #4DD35B; |
||||||
|
border: none; |
||||||
|
.subscribe-radio__name{ |
||||||
|
} |
||||||
|
.subscribe-radio__factor{ |
||||||
|
background-color: rgba(255, 255, 255, 0.18); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.subscribe-radio{ |
||||||
|
height: 120px; |
||||||
|
&__name{ |
||||||
|
flex: 7; |
||||||
|
h2{ |
||||||
|
font-size: 20px; |
||||||
|
margin-right: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__factor{ |
||||||
|
flex: 3; |
||||||
|
&--tag{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
&--off{ |
||||||
|
b{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
i{ |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--finalPrice{ |
||||||
|
i{ |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
strong{ |
||||||
|
font-size: 26px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.subscribe-radio{ |
||||||
|
min-height: 100px; |
||||||
|
&__name{ |
||||||
|
flex: 7; |
||||||
|
h2{ |
||||||
|
font-size: calc(100vw / 70); |
||||||
|
margin-right: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__factor{ |
||||||
|
flex: 3; |
||||||
|
&--tag{ |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
&--off{ |
||||||
|
b{ |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
} |
||||||
|
i{ |
||||||
|
font-size: calc(100vw / 115); |
||||||
|
} |
||||||
|
} |
||||||
|
&--finalPrice{ |
||||||
|
i{ |
||||||
|
font-size: calc(100vw / 115); |
||||||
|
} |
||||||
|
strong{ |
||||||
|
font-size: calc(100vw / 64); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import React from "react"; |
||||||
|
import "./index.scss"; |
||||||
|
import CustomCheckbox from "../../../components/CustomCheckbox"; |
||||||
|
import CircleRoundedIcon from "@mui/icons-material/CircleRounded"; |
||||||
|
import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
function SubscribeRadio({ data, selectedSubscripe }: any) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={ |
||||||
|
"subscribe-radio d-flex" + |
||||||
|
" " + |
||||||
|
(selectedSubscripe.id === data.id ? "subscribe-radio-active" : "") |
||||||
|
} |
||||||
|
> |
||||||
|
<div className="subscribe-radio__name d-flex align-items-center"> |
||||||
|
<CustomCheckbox |
||||||
|
icon={ |
||||||
|
<RadioButtonUncheckedRoundedIcon |
||||||
|
style={{ color: "#707070", fontSize: 50, padding: 0 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
checkedIcon={ |
||||||
|
<CircleRoundedIcon |
||||||
|
style={{ color: "white", fontSize: 50, padding: 0 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
/> |
||||||
|
<h2>{data.name}</h2> |
||||||
|
</div> |
||||||
|
<div className="subscribe-radio__factor d-flex flex-column justify-content-center"> |
||||||
|
{data.offPercent !== 0 && ( |
||||||
|
<div className="subscribe-radio__factor--off d-flex align-items-center"> |
||||||
|
<b>{data.off}<span></span></b> |
||||||
|
<i>تومان</i> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className="subscribe-radio__factor--finalPrice d-flex align-items-center"> |
||||||
|
<strong>{data.finalPrice}</strong> |
||||||
|
<i>تومان</i> |
||||||
|
</div> |
||||||
|
{data.offPercent !== 0 && ( |
||||||
|
<span className="subscribe-radio__factor--tag">{`${data.offPercent}% تخفیف ویژه`}</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default connect( |
||||||
|
(state: any) => ({ |
||||||
|
selectedSubscripe: state.publicApi.selectedSubscripe, |
||||||
|
}), |
||||||
|
{} |
||||||
|
)(SubscribeRadio); |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.subscription { |
||||||
|
main { |
||||||
|
h1,h2{ |
||||||
|
color: white; |
||||||
|
} |
||||||
|
p{ |
||||||
|
color : #969696; |
||||||
|
margin : 5px 0px 35px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width : 1441px) { |
||||||
|
.subscription{ |
||||||
|
main{ |
||||||
|
margin-top: 50px; |
||||||
|
max-width: 700px; |
||||||
|
h1{ |
||||||
|
font-size: 44px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 21px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width : 1008px) and (max-width : 1440px) { |
||||||
|
.subscription{ |
||||||
|
main{ |
||||||
|
margin-top: 50px; |
||||||
|
max-width: 700px; |
||||||
|
h1{ |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 70); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Navbar from "../../components/Navbar/index"; |
||||||
|
import Footer from "../../views/Home/Footer/index"; |
||||||
|
import SubscribeRadio from "./SubscribeRadio/index"; |
||||||
|
import DiscountCode from "./DiscountCode/index"; |
||||||
|
import {connect} from 'react-redux'; |
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
function Subscription({subscribes} : any) { |
||||||
|
return ( |
||||||
|
<div className="subscription main d-flex flex-column"> |
||||||
|
<Navbar /> |
||||||
|
<main className="d-flex flex-column"> |
||||||
|
<h1>خرید اشتراک دانوین</h1> |
||||||
|
<p> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده |
||||||
|
از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است و برای شرایط{" "} |
||||||
|
</p> |
||||||
|
{ |
||||||
|
subscribes?.map((subscribe : any , i : any) => ( |
||||||
|
<SubscribeRadio data={subscribe} /> |
||||||
|
)) |
||||||
|
} |
||||||
|
<DiscountCode /> |
||||||
|
</main> |
||||||
|
<Footer /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default connect((state : any) => ({ |
||||||
|
subscribes : state.publicApi.mockSubscribes, |
||||||
|
}), {})(Subscription); |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Avatar from "@mui/material/Avatar"; |
||||||
|
import user3 from "../../../assets/images/user3.png"; |
||||||
|
|
||||||
|
export default function AddComment() { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Avatar src={user3} style={{ width: 65, height: 65, marginLeft: 10 }} /> |
||||||
|
<div className="d-flex flex-column" style={{width : '100%'}}> |
||||||
|
<textarea rows={5} placeholder="نظر خود را در این قسمت بنویسید " /> |
||||||
|
<div className="d-flex justify-content-end"> |
||||||
|
<button>ارسال نظر</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
.download-attachments{ |
||||||
|
color: white; |
||||||
|
margin: 0px auto; |
||||||
|
border-bottom: 1px solid #2c2c2c; |
||||||
|
span{ |
||||||
|
|
||||||
|
} |
||||||
|
h4{ |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
a{ |
||||||
|
padding: 5px 15px; |
||||||
|
border: 1px solid #707070; |
||||||
|
color: white; |
||||||
|
text-decoration: none; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.download-attachments{ |
||||||
|
width: calc(100% - 20px); |
||||||
|
padding: 20px 0px; |
||||||
|
a{ |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
h4{ |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.download-attachments{ |
||||||
|
width: calc(100% - 20px); |
||||||
|
padding: 20px 0px; |
||||||
|
a{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
h4{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function Attachments({file,num} : any) { |
||||||
|
return ( |
||||||
|
<div className="download-attachments d-flex justify-content-between align-items-center"> |
||||||
|
<div className="d-flex"> |
||||||
|
<span>{num}</span> |
||||||
|
<h4>{file.name}</h4> |
||||||
|
</div> |
||||||
|
<a href={file.file} download>دریافت</a> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
.video-tube-suggest{ |
||||||
|
color: white; |
||||||
|
img{ |
||||||
|
border-top-right-radius: 10px; |
||||||
|
border-top-left-radius: 10px; |
||||||
|
border-bottom-right-radius: 10px; |
||||||
|
border-bottom-left-radius: 24px; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.video-tube-suggest{ |
||||||
|
width: 30%; |
||||||
|
img{ |
||||||
|
width: 130px; |
||||||
|
height: 180px; |
||||||
|
} |
||||||
|
h4{ |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.video-tube-suggest{ |
||||||
|
width: 30%; |
||||||
|
img{ |
||||||
|
width: 130px; |
||||||
|
height: 180px; |
||||||
|
} |
||||||
|
h4{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function Book({data} : any) { |
||||||
|
return ( |
||||||
|
<div className="video-tube-suggest d-flex flex-column"> |
||||||
|
<img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt="" /> |
||||||
|
<h4>{data.name}</h4> |
||||||
|
<p>{'لورم ایپسوم و اینجور چیزا'}</p> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,50 @@ |
|||||||
|
.video-tube-comment{ |
||||||
|
padding: 10px 0px; |
||||||
|
color: white; |
||||||
|
div{ |
||||||
|
} |
||||||
|
button{ |
||||||
|
background-color: inherit; |
||||||
|
color: #4DD35B; |
||||||
|
border: none; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px){ |
||||||
|
.video-tube-comment{ |
||||||
|
width: 90%; |
||||||
|
p{ |
||||||
|
font-size: 16px; |
||||||
|
strong{ |
||||||
|
font-size: 18px; |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
button{ |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.video-tube-comment{ |
||||||
|
width: 90%; |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 105); |
||||||
|
strong{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
button{ |
||||||
|
font-size: calc(100vw / 100) !important; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Avatar from "@mui/material/Avatar"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
export default function Comment({ comment }: any) { |
||||||
|
return ( |
||||||
|
<div className="video-tube-comment d-flex"> |
||||||
|
<Avatar src={comment.imageUrl} style={{ width: 65, height: 65, marginLeft: 10 }} /> |
||||||
|
<div className="d-flex flex-column"> |
||||||
|
<p> |
||||||
|
<strong>{comment.name}</strong> {comment.text} |
||||||
|
</p> |
||||||
|
<div className="d-flex justify-content-end align-items-center"> |
||||||
|
<button>پاسخ</button> |
||||||
|
<span>{comment.date}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,134 @@ |
|||||||
|
.lesson-playlist{ |
||||||
|
width: 100%; |
||||||
|
header{ |
||||||
|
background-color: inherit !important; |
||||||
|
h3{ |
||||||
|
background-color : #707070; |
||||||
|
padding: 5px 10px; |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
background-color : #707070; |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
height : 1px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__item{ |
||||||
|
&--count{ |
||||||
|
color: white; |
||||||
|
} |
||||||
|
&--text{ |
||||||
|
padding: 15px 10px; |
||||||
|
h4{ |
||||||
|
color: white; |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
color: #767676; |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--video{ |
||||||
|
span{ |
||||||
|
background-color : #0000006d; |
||||||
|
padding: 0px 5px; |
||||||
|
position: absolute; |
||||||
|
left: 5px; |
||||||
|
bottom: 10px; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.lesson-playlist{ |
||||||
|
width: 100%; |
||||||
|
header{ |
||||||
|
padding: 10px 40px 0px 0px !important; |
||||||
|
h3{ |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
&__item{ |
||||||
|
padding: 10px 0px 5px 0px; |
||||||
|
cursor: pointer; |
||||||
|
&--count{ |
||||||
|
font-size: 18px; |
||||||
|
width : 40px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
&--text{ |
||||||
|
max-width: 55%; |
||||||
|
h4{ |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--video{ |
||||||
|
width: 142px; |
||||||
|
height: 90px; |
||||||
|
position: relative; |
||||||
|
video{ |
||||||
|
width : 100%; |
||||||
|
height : 100%; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.lesson-playlist{ |
||||||
|
width: 100%; |
||||||
|
header{ |
||||||
|
padding: 10px 40px 0px 0px !important; |
||||||
|
h3{ |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
} |
||||||
|
span{ |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
&__item{ |
||||||
|
padding: 10px 0px 5px 0px; |
||||||
|
cursor: pointer; |
||||||
|
&--count{ |
||||||
|
font-size: calc(100vw / 72); |
||||||
|
width : 40px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
&--text{ |
||||||
|
max-width: 55%; |
||||||
|
h4{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
} |
||||||
|
&--video{ |
||||||
|
width: 132px; |
||||||
|
height: 90px; |
||||||
|
position: relative; |
||||||
|
video{ |
||||||
|
width : 100%; |
||||||
|
height : 100%; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import React from "react"; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function LessonPlayList(props: any) { |
||||||
|
const { lesson } = props; |
||||||
|
return ( |
||||||
|
<div className="lesson-playlist d-flex flex-column"> |
||||||
|
<header className="d-flex align-items-center"> |
||||||
|
<h3>{lesson.name}</h3> |
||||||
|
<span></span> |
||||||
|
</header> |
||||||
|
{lesson.files.map((file : any, i : any) => ( |
||||||
|
<div className="lesson-playlist__item d-flex align-items-center" key={i}> |
||||||
|
<span className="lesson-playlist__item--count">{i+1}</span> |
||||||
|
<div className="lesson-playlist__item--video"> |
||||||
|
<video> |
||||||
|
<source src={file.src} /> |
||||||
|
</video> |
||||||
|
<span>22:05</span> |
||||||
|
</div> |
||||||
|
<div className="lesson-playlist__item--text d-flex flex-column"> |
||||||
|
<h4>{file.name}</h4> |
||||||
|
<p>{file.text}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,346 @@ |
|||||||
|
.video-tube { |
||||||
|
&__content { |
||||||
|
margin-left: 15px; |
||||||
|
|
||||||
|
&--display { |
||||||
|
border-bottom: 1px solid #707070; |
||||||
|
padding-bottom: 30px; |
||||||
|
video{ |
||||||
|
border: 1px solid #707070; |
||||||
|
} |
||||||
|
span{ |
||||||
|
color: #84DE56; |
||||||
|
padding: 15px 0px; |
||||||
|
} |
||||||
|
h1{ |
||||||
|
color: white; |
||||||
|
} |
||||||
|
p{ |
||||||
|
color: white; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--comments{ |
||||||
|
color: white; |
||||||
|
border-bottom: 1px solid #707070; |
||||||
|
header{ |
||||||
|
padding: 20px 0px; |
||||||
|
h2{ |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
button{ |
||||||
|
background-color: inherit; |
||||||
|
border: none; |
||||||
|
color: #4DD35B; |
||||||
|
} |
||||||
|
} |
||||||
|
&--addComment{ |
||||||
|
padding: 15px 0px; |
||||||
|
button{ |
||||||
|
background-color: #4DD35B; |
||||||
|
border: none; |
||||||
|
color: white; |
||||||
|
border-radius: 20px; |
||||||
|
padding: 8px 12px; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
textarea{ |
||||||
|
width: 100%; |
||||||
|
border-radius: 12px; |
||||||
|
background-color: #2D2D2D; |
||||||
|
padding: 10px; |
||||||
|
color: white; |
||||||
|
&:focus{ |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
&::placeholder{ |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__sidebar { |
||||||
|
&--playlist { |
||||||
|
border: 1px solid #707070; |
||||||
|
margin-bottom: 30px; |
||||||
|
header { |
||||||
|
width: 100%; |
||||||
|
color: white; |
||||||
|
h2, |
||||||
|
p { |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
p { |
||||||
|
margin-top: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
&___list { |
||||||
|
overflow-y: scroll; |
||||||
|
&::-webkit-scrollbar { |
||||||
|
width: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Track */ |
||||||
|
&::-webkit-scrollbar-track { |
||||||
|
box-shadow: inset 0 0 5px inherit; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Handle */ |
||||||
|
&::-webkit-scrollbar-thumb { |
||||||
|
background: #bbbbbb; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Handle on hover */ |
||||||
|
&::-webkit-scrollbar-thumb:hover { |
||||||
|
background: white; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--attachments { |
||||||
|
border: 1px solid #707070; |
||||||
|
margin-bottom: 30px; |
||||||
|
header { |
||||||
|
width: 100%; |
||||||
|
color: white; |
||||||
|
h2, |
||||||
|
p { |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
p { |
||||||
|
margin-top: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
&___list { |
||||||
|
overflow-y: scroll; |
||||||
|
&::-webkit-scrollbar { |
||||||
|
width: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Track */ |
||||||
|
&::-webkit-scrollbar-track { |
||||||
|
box-shadow: inset 0 0 5px inherit; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Handle */ |
||||||
|
&::-webkit-scrollbar-thumb { |
||||||
|
background: #bbbbbb; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Handle on hover */ |
||||||
|
&::-webkit-scrollbar-thumb:hover { |
||||||
|
background: white; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--suggests { |
||||||
|
border: 1px solid #707070; |
||||||
|
header { |
||||||
|
width: 100%; |
||||||
|
color: white; |
||||||
|
h2{ |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
background-color: #00fff74f; |
||||||
|
color: #00FFF8; |
||||||
|
padding: 5px 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.video-tube { |
||||||
|
main { |
||||||
|
max-width: 1350px; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
&__content { |
||||||
|
flex: 8; |
||||||
|
&--display { |
||||||
|
span{ |
||||||
|
font-size: 21px; |
||||||
|
} |
||||||
|
h1{ |
||||||
|
font-size: 36px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 25px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--comments{ |
||||||
|
header{ |
||||||
|
h2{ |
||||||
|
font-size: 26px; |
||||||
|
} |
||||||
|
} |
||||||
|
button{ |
||||||
|
font-size: 19px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--addComment{ |
||||||
|
width: 60%; |
||||||
|
button{ |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
textarea{ |
||||||
|
font-size: 18px; |
||||||
|
&::placeholder{ |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__sidebar { |
||||||
|
flex: 4; |
||||||
|
&--playlist { |
||||||
|
max-height: calc(100vh - 140px); |
||||||
|
header { |
||||||
|
padding: 14px 12px; |
||||||
|
background-color: #2c2c2c; |
||||||
|
img { |
||||||
|
transform: translateY(-5px); |
||||||
|
} |
||||||
|
h2 { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
p { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--attachments { |
||||||
|
max-height: 320px; |
||||||
|
header { |
||||||
|
padding: 14px 12px; |
||||||
|
background-color: #2c2c2c; |
||||||
|
h2 { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
p { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--suggests { |
||||||
|
header { |
||||||
|
padding: 26px 12px; |
||||||
|
background-color: #8bd09746; |
||||||
|
h2 { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
&___list{ |
||||||
|
padding: 15px 12px; |
||||||
|
background-color: #08793d58; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.video-tube { |
||||||
|
main { |
||||||
|
max-width: 1250px; |
||||||
|
margin-top: 30px; |
||||||
|
padding: 0px 10px; |
||||||
|
} |
||||||
|
&__content { |
||||||
|
flex: 8; |
||||||
|
&--display { |
||||||
|
video{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
h1{ |
||||||
|
font-size: calc(100vw / 60); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
} |
||||||
|
&--comments{ |
||||||
|
header{ |
||||||
|
h2{ |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
} |
||||||
|
} |
||||||
|
button{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
} |
||||||
|
&--addComment{ |
||||||
|
width: 60%; |
||||||
|
button{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
textarea{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
&::placeholder{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__sidebar { |
||||||
|
flex: 4; |
||||||
|
&--playlist { |
||||||
|
max-height: calc(100vh - 140px); |
||||||
|
header { |
||||||
|
padding: 14px 12px; |
||||||
|
background-color: #2c2c2c; |
||||||
|
img { |
||||||
|
transform: translateY(-5px); |
||||||
|
} |
||||||
|
h2 { |
||||||
|
font-size: calc(100vw / 85); |
||||||
|
} |
||||||
|
p { |
||||||
|
font-size: calc(100vw / 120); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--attachments { |
||||||
|
max-height: 320px; |
||||||
|
header { |
||||||
|
padding: 14px 12px; |
||||||
|
background-color: #2c2c2c; |
||||||
|
h2 { |
||||||
|
font-size: calc(100vw / 85); |
||||||
|
} |
||||||
|
p { |
||||||
|
font-size: calc(100vw / 120); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--suggests { |
||||||
|
header { |
||||||
|
padding: 26px 12px; |
||||||
|
background-color: #8bd09746; |
||||||
|
h2 { |
||||||
|
font-size: calc(100vw / 85); |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-size: calc(100vw / 120); |
||||||
|
} |
||||||
|
} |
||||||
|
&___list{ |
||||||
|
padding: 15px 12px; |
||||||
|
background-color: #08793d58; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
import React, { useEffect } from "react"; |
||||||
|
import Navbar from "../../components/Navbar/index"; |
||||||
|
import Footer from "../../views/Home/Footer/index"; |
||||||
|
import LessonPlayList from "./LessonPlayList/index"; |
||||||
|
import Attachments from "./Attachments/index"; |
||||||
|
import Book from "./Book/index"; |
||||||
|
import Comment from "./Comment/index"; |
||||||
|
import AddComment from "./AddComment/index"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
import listIcon from "../../assets/icons/list.png"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { book } from "../../redux/actions"; |
||||||
|
|
||||||
|
|
||||||
|
import user from '../../assets/images/user3.png'; |
||||||
|
|
||||||
|
function VodTube({ videoList, getList, list, selectedVideo, comments }: any) { |
||||||
|
useEffect(() => { |
||||||
|
getList(); |
||||||
|
}, []); |
||||||
|
return ( |
||||||
|
<div className="video-tube main d-flex flex-column"> |
||||||
|
<Navbar /> |
||||||
|
<main className="d-flex"> |
||||||
|
<div className="video-tube__content d-flex flex-column"> |
||||||
|
<section className="video-tube__content--display d-flex flex-column"> |
||||||
|
<video controls> |
||||||
|
<source src={selectedVideo.src} /> |
||||||
|
</video> |
||||||
|
<span>درس دوم / بیست و یکم</span> |
||||||
|
<h1>{selectedVideo.name}</h1> |
||||||
|
<p>{selectedVideo.text}</p> |
||||||
|
</section> |
||||||
|
<section className="video-tube__content--comments d-flex flex-column"> |
||||||
|
<header className="d-flex justify-content-between align-items-center"> |
||||||
|
<h2>نظرات</h2> |
||||||
|
<button>بستن نظرات</button> |
||||||
|
</header> |
||||||
|
<div className="video-tube__content-comments___list d-flex flex-column"> |
||||||
|
{ |
||||||
|
comments?.map((comment : any, i : any) => ( |
||||||
|
<Comment comment={comment} key={i} /> |
||||||
|
)) |
||||||
|
} |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<section className="video-tube__content--addComment d-flex"> |
||||||
|
<AddComment /> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
<div className="video-tube__sidebar d-flex flex-column"> |
||||||
|
<section className="video-tube__sidebar--playlist d-flex flex-column"> |
||||||
|
<header className="d-flex justify-content-between align-items-center"> |
||||||
|
<div className="d-flex flex-column"> |
||||||
|
<h2>{videoList.name}</h2> |
||||||
|
<p>در این قسمت توضیحی کوتاه قرار می گیرد</p> |
||||||
|
</div> |
||||||
|
<img src={listIcon} alt="" /> |
||||||
|
</header> |
||||||
|
<div className="video-tube__sidebar--playlist___list d-flex flex-column"> |
||||||
|
{videoList.lessons?.map((lesson: any, i: any) => ( |
||||||
|
<LessonPlayList lesson={lesson} key={i} num={i + 1} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<section className="video-tube__sidebar--attachments d-flex flex-column"> |
||||||
|
<header className="d-flex align-items-center"> |
||||||
|
<div className="d-flex flex-column"> |
||||||
|
<h2>فایل پیوست تمارین این فصل</h2> |
||||||
|
<p>در این قسمت توضیحی کوتاه قرار می گیرد</p> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<div className="video-tube__sidebar--attachments___list d-flex flex-column"> |
||||||
|
{videoList.attachments?.map((file: any, i: any) => ( |
||||||
|
<Attachments file={file} key={i} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<section className="video-tube__sidebar--suggests d-flex flex-column"> |
||||||
|
<header className="d-flex justify-content-between align-items-center"> |
||||||
|
<h2>پیشنهاد دانوین برای شما</h2> |
||||||
|
<span>تا 50% تخفیف </span> |
||||||
|
</header> |
||||||
|
<div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center"> |
||||||
|
{list?.slice(0, 3).map((item: any, i: any) => ( |
||||||
|
<Book data={item} key={i} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
<Footer /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default connect( |
||||||
|
(state: any) => ({ |
||||||
|
videoList: state.book.mockVideoList, |
||||||
|
selectedVideo: state.book.selectedVideo, |
||||||
|
list: state.book.list, |
||||||
|
comments: state.book.comments, |
||||||
|
}), |
||||||
|
{ getList: book.list } |
||||||
|
)(VodTube); |
||||||
Loading…
Reference in new issue