openreplay/frontend/app/components/Client/Modules/ModuleCard.tsx

33 lines
No EOL
994 B
TypeScript

import React from 'react';
import { Icon } from 'UI';
import { Switch } from 'antd';
import { Module } from 'Components/Client/Modules/index';
interface Props {
module: Module;
onToggle: (module: Module) => void;
}
function ModuleCard(props: Props) {
const { module } = props;
return (
<div className='bg-white rounded-lg border p-4 flex h-full'>
<div className='w-10 shrink-0 pt-1'>
<Icon name={module.icon} size={20} color='gray-darkest' />
</div>
<div className='flex flex-col flex-grow'>
<div className='flex flex-col flex-grow'>
<h3 className='text-lg font-medium'>{module.label}</h3>
<p className='flex-grow'>{module.description}</p>
</div>
<div className='flex items-end'>
<Switch size='small' checked={module.isEnabled} title={module.isEnabled ? 'A' : 'B'}
onChange={() => props.onToggle(module)} />
</div>
</div>
</div>
);
}
export default ModuleCard;