-
Notifications
You must be signed in to change notification settings - Fork 0
/
Cutout.tsx
40 lines (36 loc) · 1.13 KB
/
Cutout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React, { PropsWithChildren } from 'react';
import { Property } from 'csstype';
import Color from 'color';
export interface ICutoutProps extends PropsWithChildren {
src : string;
backgroundColor : 'black' | 'white' | string;
mode?: Property.MixBlendMode;
}
export default function Cutout({src, backgroundColor, mode, children} : ICutoutProps) {
return (
<div
style={{
background: backgroundColor,
textAlign: 'center',
position: 'relative',
overflow: 'hidden',
}}>
<img
src={src}
style={{
mixBlendMode: (mode !== undefined) ? mode : (Color(backgroundColor).isDark()) ? 'darken' : 'lighten',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
}} />
<span
style={{
color: (Color(backgroundColor).isDark()) ? 'white' : 'black',
textOverflow: 'hidden'
}}>
{ children }
</span>
</div>
);
}