parent
							
								
									183a97e0ad
								
							
						
					
					
						commit
						ca95749a25
					
				
				 13 changed files with 292 additions and 25 deletions
			
			
		| 
		 After Width: | Height: | Size: 53 KiB  | 
| 
		 After Width: | Height: | Size: 71 KiB  | 
| 
		 After Width: | Height: | Size: 49 KiB  | 
@ -0,0 +1,35 @@ | 
				
			||||
import React from 'react'; | 
				
			||||
import Flex from '../Flex/index'; | 
				
			||||
import Simple from '../Simple/index'; | 
				
			||||
 | 
				
			||||
export default function Column(props){ | 
				
			||||
  const {data} = props; | 
				
			||||
  const style = { | 
				
			||||
    flex: data.flex, | 
				
			||||
  } | 
				
			||||
  return( | 
				
			||||
    <div style={style} className="mobile-home-static__3d d-flex flex-column"> | 
				
			||||
      { | 
				
			||||
        data.subData.map((item,i) => ( | 
				
			||||
          <SubIdentifier item={item} key={i} /> | 
				
			||||
        )) | 
				
			||||
      } | 
				
			||||
    </div> | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
 | 
				
			||||
const SubIdentifier = (props) => { | 
				
			||||
  const {item} = props; | 
				
			||||
  return( | 
				
			||||
    <> | 
				
			||||
      { | 
				
			||||
      item.design === 'flex' ? | 
				
			||||
      <Flex data={item} /> : null | 
				
			||||
      } | 
				
			||||
      { | 
				
			||||
      item.design === 'simple' ? | 
				
			||||
      <Simple data={item} /> : null | 
				
			||||
      } | 
				
			||||
    </> | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
@ -0,0 +1,54 @@ | 
				
			||||
import React from 'react'; | 
				
			||||
import {Link} from "react-router-dom"; | 
				
			||||
 | 
				
			||||
const maxMobileSize = 550; | 
				
			||||
 | 
				
			||||
const fontSize = { | 
				
			||||
  h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, | 
				
			||||
  span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 34, | 
				
			||||
}; | 
				
			||||
 | 
				
			||||
export default function Vitrin(props){ | 
				
			||||
 | 
				
			||||
  const {data} = props; | 
				
			||||
  const style = { | 
				
			||||
    // backgroundImage: `url('${data.imageUrl}')`,
 | 
				
			||||
    background : `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, | 
				
			||||
    flex: data.flex, | 
				
			||||
    backgroundRepeat: 'no-repeat', | 
				
			||||
    backgroundSize: '100%', | 
				
			||||
    backgroundOpacity: '60%', | 
				
			||||
    margin: 5, | 
				
			||||
    borderRadius: 10, 
 | 
				
			||||
    color: data.color, | 
				
			||||
  }; | 
				
			||||
 | 
				
			||||
  return( | 
				
			||||
    <div className="mobile-home-static__vitrin d-flex flex-column" style={style}> | 
				
			||||
      <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1> | 
				
			||||
      <div className="d-flex align-items-end"> | 
				
			||||
        { | 
				
			||||
          data.books.map((item,i) => ( | 
				
			||||
            <Item data={item} key={i} /> | 
				
			||||
          )) | 
				
			||||
        } | 
				
			||||
        <span style={{fontSize: fontSize.span }}>مشاهده بیشتر</span> | 
				
			||||
      </div> | 
				
			||||
    </div> | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
 | 
				
			||||
 | 
				
			||||
const Item = (props) => { | 
				
			||||
  const {data} = props; | 
				
			||||
  return( | 
				
			||||
    <Link to={'/products/'+ data.id} className="mobile-home-static__vitrin--product d-flex"> | 
				
			||||
      <img src={data.imageUrl} alt={'عکس محصول'} /> | 
				
			||||
    </Link> | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
					Loading…
					
					
				
		Reference in new issue