import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { AnimatedGradient } from '../../../common/components/animated-gradient';

export const SkeletonHeader: React.FC = () => {
  return (
    <SBox height={16} overflow="hidden" width={64} mb={20}>
      <SBox position="relative" height={36}>
        <SBox width={64} height={16} bg="eastBay" />
        <SBox position="absolute" top={-7} left={0} height="100%" flex={1}>
          <AnimatedGradient angle={8} gradientWidth={160} />
        </SBox>
      </SBox>
    </SBox>
  );
};