jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-19 21:05:29 -04:00
Code Issues Activity

switch some style props to css

Browse Source
This commit is contained in:
Jake Jarvis
2022-03-03 11:46:18 -05:00
parent 4e32048cca
commit dc7622a7af
6 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/Loading/Loading.tsx
View File

@@ -1,5 +1,6 @@
import { memo } from "react";
import { styled, keyframes } from "../../lib/styles/stitches.config";
import type * as Stitches from "@stitches/react";
const pulse = keyframes({
"0%, 80%, 100%": {
@@ -26,10 +27,11 @@ export type LoadingProps = {
width: number; // of entire container, in pixels
boxes?: number; // total number of boxes (default: 3)
timing?: number; // staggered timing between each box's pulse, in seconds (default: 0.1s)
css?: Stitches.CSS;
className?: string;
};
const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) => {
const Loading = ({ width, boxes = 3, timing = 0.1, css, className }: LoadingProps) => {
// each box is just an empty div
const divs = [];
@@ -51,9 +53,10 @@ const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) =>
return (
<Wrapper
className={className}
style={{
css={{
width: `${width}px`,
height: `${width / 2}px`,
...css,
}}
>
{divs}