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> |
||||
); |
||||
} |
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue