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

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}
</>
);
};