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