header-blur

import type { ComponentType } from "react"
import styled from "@emotion/styled"

const GradientBlur = styled.div`      
    user-select: none;
    pointer-events: none;
  
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%; 
    height: min(96px,128px);
    
    z-index: 10;
    
    opacity: 0.95;
    backdrop-filter: blur(5px);

    -webkit-mask-image: linear-gradient(to bottom,#000 25%,transparent);
`

export function withBlur(Component): ComponentType {
    return (props) => {
        return <GradientBlur />
    }
}