mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-04-25 11:59:11 +00:00
Katalina
e0fcfc310e
* feat: add skeleton masthead and generic loading page * add generic loader to picker page * smooth out spinner, add no-motion state
55 lines
992 B
TypeScript
55 lines
992 B
TypeScript
import { animateOpacity } from '@roleypoly/design-system/atoms/placeholder';
|
|
import * as React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
const dotOverlayBase = styled.div`
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -10;
|
|
background-size: 27px 27px;
|
|
`;
|
|
|
|
const DotOverlayDark = styled(dotOverlayBase)`
|
|
background-image: radial-gradient(
|
|
circle,
|
|
#332d2d,
|
|
#332d2d 1px,
|
|
transparent 1px,
|
|
transparent
|
|
);
|
|
`;
|
|
|
|
const DotOverlayLight = styled(dotOverlayBase)`
|
|
background-image: radial-gradient(
|
|
circle,
|
|
#dbd9d9,
|
|
#dbd9d9 1px,
|
|
transparent 1px,
|
|
transparent
|
|
);
|
|
`;
|
|
|
|
const DotOverlaySkeleton = styled(DotOverlayDark)`
|
|
${animateOpacity}
|
|
`;
|
|
|
|
export const DotOverlay = ({
|
|
light,
|
|
skeleton,
|
|
}: {
|
|
light?: boolean;
|
|
skeleton?: boolean;
|
|
}) => {
|
|
return skeleton ? (
|
|
<DotOverlaySkeleton />
|
|
) : light ? (
|
|
<DotOverlayLight />
|
|
) : (
|
|
<DotOverlayDark />
|
|
);
|
|
};
|