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.
153 lines
3.2 KiB
153 lines
3.2 KiB
import React, { Component } from "react"; |
|
|
|
import Navbar from "./Navbar/Navbar"; |
|
import HomeHeader from "./HomeHeader/HomeHeader"; |
|
import HomeStatic from "./HomeStatic/HomeStatic"; |
|
import HomeScroll from "./HomeScroll/HomeScroll"; |
|
import Footer from "./Footer/Footer"; |
|
import HomeSlider from "./HomeSlider/HomeSlider"; |
|
|
|
import pic from "../../assets/images/pic.png"; |
|
|
|
import "./Home.scss"; |
|
export default class Home extends Component { |
|
constructor(props) { |
|
super(props); |
|
this.state = { |
|
homeData: [ |
|
{ |
|
type: "slider", |
|
title: "", |
|
height: 200, |
|
data: [ |
|
{ |
|
image: pic, |
|
width: '100%', |
|
link : '', |
|
}, |
|
{ |
|
image: pic, |
|
width: '100%', |
|
link : '', |
|
}, |
|
{ |
|
image: pic, |
|
width: '100%', |
|
link : '', |
|
}, |
|
], |
|
}, |
|
|
|
{ |
|
type: "static", |
|
title: "مزایا", |
|
height: 100, |
|
data: [ |
|
{ |
|
image: pic, |
|
width: 30, |
|
link : '', |
|
}, |
|
{ |
|
image: pic, |
|
width: 30, |
|
link : '', |
|
}, |
|
{ |
|
image: pic, |
|
width: 30, |
|
link : '', |
|
}, |
|
], |
|
}, |
|
{ |
|
type: "scroll", |
|
title: "لیست محصولات", |
|
height: 250, |
|
data: [ |
|
{ |
|
image: pic, |
|
width: '80%', |
|
link : '', |
|
}, |
|
{ |
|
image: pic, |
|
width: '50%', |
|
link : '', |
|
}, |
|
{ |
|
image: pic, |
|
width: '40%', |
|
link : '', |
|
}, |
|
], |
|
}, |
|
{ |
|
type: "header", |
|
title: "عنوان سایت", |
|
height: 200, |
|
data: [ |
|
{ |
|
image: pic, |
|
width: 100, |
|
}, |
|
], |
|
}, |
|
|
|
], |
|
}; |
|
} |
|
render() { |
|
const { homeData } = this.state; |
|
return ( |
|
<div className="home d-flex flex-column"> |
|
<Navbar /> |
|
{homeData.map((item, i) => ( |
|
<Identifier |
|
type={item.type} |
|
height={item.height} |
|
title={item.title} |
|
data={item.data} |
|
key={i} |
|
/> |
|
))} |
|
<Footer /> |
|
</div> |
|
); |
|
} |
|
} |
|
|
|
const Identifier = (props) => { |
|
return ( |
|
<> |
|
{props.type === "header" ? ( |
|
<HomeHeader |
|
height={props.height} |
|
title={props.title} |
|
data={props.data} |
|
/> |
|
) : null} |
|
{props.type === "static" ? ( |
|
<HomeStatic |
|
height={props.height} |
|
title={props.title} |
|
data={props.data} |
|
/> |
|
) : null} |
|
{props.type === "scroll" ? ( |
|
<HomeScroll |
|
height={props.height} |
|
title={props.title} |
|
data={props.data} |
|
/> |
|
) : null} |
|
{props.type === "slider" ? ( |
|
<HomeSlider |
|
height={props.height} |
|
title={props.title} |
|
data={props.data} |
|
/> |
|
) : null} |
|
</> |
|
); |
|
};
|
|
|