parent
e399caa05b
commit
6bfcf9e65b
11 changed files with 739 additions and 512 deletions
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,36 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 28, |
||||||
|
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
||||||
|
}; |
||||||
|
|
||||||
|
export default function Flex(props){ |
||||||
|
const {data} = props; |
||||||
|
const style = { |
||||||
|
background: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, |
||||||
|
flex: data.flex, |
||||||
|
margin: 5, |
||||||
|
borderRadius: 10,
|
||||||
|
color: data.color, |
||||||
|
|
||||||
|
} |
||||||
|
return( |
||||||
|
<div className="mobile-home-static__flex d-flex align-items-center justify-content-center" style={style}> |
||||||
|
<div className="mobile-home-static__flex--right d-flex flex-column"> |
||||||
|
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1> |
||||||
|
{ |
||||||
|
data.badge ?
|
||||||
|
<span className="d-flex justify-content-center" style={{ fontSize: fontSize.span, backgroundColor: '#F1F907', color: '#4D4D4F'}}>{data.badge}</span> : null |
||||||
|
} |
||||||
|
<span style={{ fontSize: fontSize.span }}>{data.subTitle}</span> |
||||||
|
</div> |
||||||
|
<img src={data.imageUrl} alt={data.title} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import Flex from '../Flex/index'; |
||||||
|
import Simple from '../Simple/index'; |
||||||
|
|
||||||
|
export default function Identifier(props){ |
||||||
|
const {data} = props; |
||||||
|
return( |
||||||
|
<> |
||||||
|
{ |
||||||
|
data.design === 'flex' ? |
||||||
|
<Flex data={data} /> : null |
||||||
|
} |
||||||
|
{ |
||||||
|
data.design === 'simple' ? |
||||||
|
<Simple data={data} /> : null |
||||||
|
} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 28, |
||||||
|
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
||||||
|
}; |
||||||
|
|
||||||
|
export default function Simple(props){ |
||||||
|
|
||||||
|
const {data} = props; |
||||||
|
const style = { |
||||||
|
backgroundImage: `url('${data.imageUrl}')`, |
||||||
|
backgroundColor: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, |
||||||
|
flex: data.flex, |
||||||
|
margin: 5, |
||||||
|
borderRadius: 10,
|
||||||
|
color: data.color, |
||||||
|
}; |
||||||
|
return( |
||||||
|
<div className="mobile-home-static__simple d-flex flex-column justify-content-center" style={style}> |
||||||
|
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in new issue