Add spinner for message pending Improve footer icons Move ContentFrame to layout dirpull/1/head
J M Rossy
2 years ago
parent
1c2b574e32
commit
849a388745
@ -0,0 +1,31 @@ |
|||||||
|
import { createContext, useContext, useMemo, useState } from 'react'; |
||||||
|
|
||||||
|
export const BannerColorContext = createContext<{ |
||||||
|
bannerClassName: string; |
||||||
|
setBannerClassName?: (name: string) => void; |
||||||
|
}>({ bannerClassName: '', setBannerClassName: undefined }); |
||||||
|
|
||||||
|
export function useBackgroundBannerState() { |
||||||
|
// State for managing banner class, to be used as context value
|
||||||
|
const [bannerClassName, setBannerClassName] = useState(''); |
||||||
|
const bannerState = useMemo( |
||||||
|
() => ({ bannerClassName, setBannerClassName }), |
||||||
|
[bannerClassName, setBannerClassName], |
||||||
|
); |
||||||
|
return bannerState; |
||||||
|
} |
||||||
|
|
||||||
|
export function useBackgroundBanner() { |
||||||
|
return useContext(BannerColorContext); |
||||||
|
} |
||||||
|
|
||||||
|
export function BackgroundBanner() { |
||||||
|
const { bannerClassName } = useBackgroundBanner(); |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={`absolute -top-5 -left-4 -right-4 h-36 rounded z-10 transition-all duration-500 ${ |
||||||
|
bannerClassName || 'bg-green-600' |
||||||
|
}`}
|
||||||
|
></div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
import { PropsWithChildren } from 'react'; |
||||||
|
|
||||||
|
import { |
||||||
|
BackgroundBanner, |
||||||
|
BannerColorContext, |
||||||
|
useBackgroundBannerState, |
||||||
|
} from './BackgroundBanner'; |
||||||
|
|
||||||
|
export function ContentFrame(props: PropsWithChildren) { |
||||||
|
// Provide context so children can change banner color
|
||||||
|
const bannerState = useBackgroundBannerState(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col justify-center items-center min-h-full"> |
||||||
|
<div |
||||||
|
style={styles.container} |
||||||
|
className="relative overflow-visible mt-7 mb-8" |
||||||
|
> |
||||||
|
<BannerColorContext.Provider value={bannerState}> |
||||||
|
<BackgroundBanner /> |
||||||
|
<div className="relative z-20">{props.children}</div> |
||||||
|
</BannerColorContext.Provider> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = { |
||||||
|
container: { |
||||||
|
width: 'min(900px,96vw)', |
||||||
|
}, |
||||||
|
}; |
||||||
@ -1,15 +0,0 @@ |
|||||||
import { PropsWithChildren } from 'react'; |
|
||||||
|
|
||||||
export function ContentFrame(props: PropsWithChildren) { |
|
||||||
return ( |
|
||||||
<div className="flex flex-col justify-center items-center min-h-full"> |
|
||||||
<div |
|
||||||
style={{ width: 'min(900px,96vw)' }} |
|
||||||
className="relative overflow-visible mt-7 mb-8" |
|
||||||
> |
|
||||||
<div className="absolute -top-5 -left-4 -right-4 h-36 bg-green-600 rounded z-10"></div> |
|
||||||
<div className="relative z-20">{props.children}</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 649 B |
|
Before Width: | Height: | Size: 315 B After Width: | Height: | Size: 473 B |
|
Before Width: | Height: | Size: 671 B After Width: | Height: | Size: 441 B |
Loading…
Reference in new issue