Output Shimmer

import styled from "styled-components";
export default function OutputShimmer({
  width = "100%",
  height = "100px",
  backgroundColor = "#333",
  borderRadius = "8px",
  className,
  style,
  margin,
}) {
  return (
    <Styled
      style={style}
      className={className}
      $width={width}
      $height={height}
      $backgroundColor={backgroundColor}
      $borderRadius={borderRadius}
      $margin={margin}
    >
      <div className="shimmer"></div>
    </Styled>
  );
}

const Styled = styled.div`
  width: ${({ $width }) => $width};
  height: ${({ $height }) => $height};
  margin: ${({ $margin }) => $margin};
  border-radius: ${({ $borderRadius }) => $borderRadius};
  overflow: hidden;
  background-color: ${({ $backgroundColor }) => $backgroundColor };
  .shimmer {
    width: 100%;
    height: 100%;
    background: rgba(100, 100, 100, 0.02);

    background-image: linear-gradient(
      to right,
      rgba(100, 100, 100, 0.02) 0%,
      rgba(100, 100, 100, 0.2) 20%,
      rgba(100, 100, 100, 0.02) 40%,
      rgba(100, 100, 100, 0.02) 100%
    );
    background-repeat: no-repeat;
    background-size: ${({ $width }) => $width} ${({ $height }) => $height};
    display: inline-block;
    position: relative;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: anim;
    animation-timing-function: linear;

    @keyframes anim {
      0% {
        background-position: -${({ $width }) => $width} 0;
      }

      100% {
        background-position: ${({ $width }) => $width} 0;
      }
    }
  }
`;

import OutputShimmer from "../../example/OutputShimmer";

export default function TestView() {
  return (
    <div className="test-view">
      <Shimmer width="200px" height="20px" margin={"0 0 20px 0"} />
      <Shimmer width="200px" height="20px" margin={"0 0 20px 0"} />
      <Shimmer width="200px" height="20px" />
    </div>
  );
}