nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
semble
/
containers
/
sembleContainer
/
SembleHeaderBackground.tsx
902 B
36 lines
1'use client';
2
3import { useColorScheme } from '@mantine/hooks';
4import BG from '@/assets/semble-header-bg.webp';
5import DarkBG from '@/assets/semble-header-bg-dark.webp';
6import { Box, Image } from '@mantine/core';
7
8export default function SembleHeaderBackground() {
9 const colorScheme = useColorScheme();
10
11 return (
12 <Box style={{ position: 'relative', width: '100%' }}>
13 <Image
14 src={colorScheme === 'dark' ? DarkBG.src : BG.src}
15 alt="bg"
16 fit="cover"
17 w="100%"
18 h={80}
19 />
20
21 {/* White gradient overlay */}
22 <Box
23 style={{
24 position: 'absolute',
25 bottom: 0,
26 left: 0,
27 width: '100%',
28 height: '60%', // fade height
29 background:
30 'linear-gradient(to top, var(--mantine-color-body), transparent)',
31 pointerEvents: 'none',
32 }}
33 />
34 </Box>
35 );
36}