Current Path : /storage/v11800/alliedessence/public_html/wp-content/plugins/lottiefiles/src/components/ |
Linux v11800 5.3.0-1023-aws #25~18.04.1-Ubuntu SMP Fri Jun 5 15:19:18 UTC 2020 aarch64
|
Current File : /storage/v11800/alliedessence/public_html/wp-content/plugins/lottiefiles/src/components/NoData.tsx |
/**
* Copyright 2022 Design Barn Inc.
*/
import { Appearance, Size, TextColor } from '@lottiefiles/react-ui-kit';
import clsx from 'clsx';
import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '../_components';
interface INoDataProps {
children: React.ReactNode;
lottieBy: string;
noDataText: string;
}
export const NoData: React.FC<INoDataProps> = ({ children, lottieBy, noDataText }: INoDataProps) => {
const navigate = useNavigate();
const goToDiscover = (): void => {
navigate('/discover');
};
return (
<div className={clsx('lf-flex lf-justify-center lf-h-full lf-items-center lf-text-center')}>
<div className={clsx('lf-flex lf-flex-col lf-items-center')}>
{children}
<p className={clsx('lf-text-xs')}>Animation by {lottieBy}</p>
<h4 className={clsx('lf-font-bold lf-text-base lf-m-3.5')}>{noDataText}</h4>
<Button appearance={Appearance.primary} size={Size.small} textColor={TextColor.white} onClick={goToDiscover}>
Discover Animations
</Button>
</div>
</div>
);
};