64 lines
1.5 KiB
JavaScript
64 lines
1.5 KiB
JavaScript
import { StyleSheet, View } from 'react-native';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { colors } from '../theme';
|
|
|
|
export default function TableBackground({ children, style }) {
|
|
return (
|
|
<View style={[styles.wrapper, style]}>
|
|
<LinearGradient
|
|
colors={[colors.tableEdge, '#3e2a10']}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={styles.edge}
|
|
>
|
|
<LinearGradient
|
|
colors={[colors.tableFelt, colors.tableFeltDark]}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={styles.felt}
|
|
>
|
|
<View style={styles.innerRing} />
|
|
{children}
|
|
</LinearGradient>
|
|
</LinearGradient>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
width: '100%',
|
|
padding: 12
|
|
},
|
|
edge: {
|
|
flex: 1,
|
|
borderTopLeftRadius: 60,
|
|
borderTopRightRadius: 60,
|
|
borderBottomLeftRadius: 280,
|
|
borderBottomRightRadius: 280,
|
|
padding: 10
|
|
},
|
|
felt: {
|
|
flex: 1,
|
|
borderTopLeftRadius: 48,
|
|
borderTopRightRadius: 48,
|
|
borderBottomLeftRadius: 260,
|
|
borderBottomRightRadius: 260,
|
|
padding: 20,
|
|
overflow: 'hidden'
|
|
},
|
|
innerRing: {
|
|
position: 'absolute',
|
|
top: 16,
|
|
bottom: 16,
|
|
left: 16,
|
|
right: 16,
|
|
borderWidth: 2,
|
|
borderColor: 'rgba(255,255,255,0.15)',
|
|
borderTopLeftRadius: 40,
|
|
borderTopRightRadius: 40,
|
|
borderBottomLeftRadius: 240,
|
|
borderBottomRightRadius: 240
|
|
}
|
|
});
|