All files / Components AppLoader.js

100% Statements 6/6
50% Branches 1/2
100% Functions 1/1
100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57      21x       120x   120x         120x           120x                                 120x                                      
import React from 'react';
import classNames from 'classnames';
 
const AppLoader = props => {
    const {
        theme,
        className,
    } = props;
 
    const grayClasses = classNames(
        `text-gray-300`,
        `dark:text-gray-500`,
    );
 
    const themeClasses = classNames(
        'absolute',
        'bottom-0',
        `text-${theme}-600`,
    );
 
    const boundClasses = classNames(
        'absolute',
        'bottom-0',
        'overflow-hidden',
        'transition-[height]',
        'duration-[1s]',
        'w-24',
        (theme) ? 'h-24' : 'h-0',
    )
 
    // const svgClasses = classNames(
    //     `h-${height}`,
    //     `w-${width}`,
    //     `-translate-y-${height / 2}`,
    //     'mx-auto',
    // );
 
    return (
        <div className="h-full w-full flex items-center justify-center">
            <div className="relative h-24 w-24">
                <div className="absolute inset-0">
                    <svg xmlns="http://www.w3.org/2000/svg" className={grayClasses} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
                    </svg>
                </div>
                <div className={boundClasses}>
                    <svg xmlns="http://www.w3.org/2000/svg" className={themeClasses} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
                    </svg>
                </div>
            </div>
            <div className="sr-only">Loading</div>
        </div>
    );
}
 
export default AppLoader;