mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
#23 added lab tabs
This commit is contained in:
parent
0c07fb5a45
commit
58d5a8ee35
6 changed files with 84 additions and 22 deletions
32
src/components/lab/LabHeadItem/index.tsx
Normal file
32
src/components/lab/LabHeadItem/index.tsx
Normal file
|
@ -0,0 +1,32 @@
|
|||
import React, { FC } from 'react';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
import { Placeholder } from '~/components/placeholders/Placeholder';
|
||||
import styles from './styles.module.scss';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface IProps {
|
||||
icon: string;
|
||||
isLoading?: boolean;
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active }) => {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Group horizontal className={styles.item}>
|
||||
<Placeholder width="32px" height={32} />
|
||||
<Placeholder width="96px" height={18} />
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Group horizontal className={classNames(styles.item, { [styles.active]: active })}>
|
||||
<Icon icon={icon} size={24} />
|
||||
<span className={styles.text}>{children}</span>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export { LabHeadItem };
|
Loading…
Add table
Add a link
Reference in a new issue