66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import slide from 'App/svg/cheers.svg';
|
|
import { Icon, Button } from 'UI';
|
|
import Footer from './Footer'
|
|
|
|
function Category({ name, healthOk }: { name: string; healthOk: boolean }) {
|
|
const icon = healthOk ? ('check-circle-fill' as const) : ('exclamation-circle-fill' as const);
|
|
return (
|
|
<div
|
|
className={'p-4 flex items-center gap-2 border-b cursor-pointer hover:bg-gray-lightest'}
|
|
>
|
|
<Icon name={icon} size={20} color={'green'} />
|
|
{name}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function HealthModal({ healthOk }: { healthOk: boolean }) {
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
width: 640,
|
|
position: 'fixed',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
}}
|
|
className={'flex flex-col bg-white rounded border border-figmaColors-divider'}
|
|
>
|
|
<div
|
|
className={
|
|
'flex w-full justify-between items-center p-4 border-b border-figmaColors-divider'
|
|
}
|
|
>
|
|
<div className={'text-xl font-semibold'}>Installation Status</div>
|
|
<Button icon={'arrow-repeat'} variant={'text-primary'}>
|
|
Recheck
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={'flex w-full'}>
|
|
<div className={'flex flex-col h-full'} style={{ flex: 1 }}>
|
|
<Category name={'Databases'} healthOk={true} />
|
|
<Category name={'Ingestion Pipeline'} healthOk={false} />
|
|
<Category name={'Backend'} healthOk={false} />
|
|
<Category name={'SSL'} healthOk={true} />
|
|
</div>
|
|
<div
|
|
className={'bg-gray-lightest border-l w-fit border-figmaColors-divider'}
|
|
style={{ flex: 2 }}
|
|
>
|
|
<img src={slide} width={392} />
|
|
</div>
|
|
</div>
|
|
<div className={'p-4 w-full border-t border-figmaColors-divider'}>
|
|
<Button variant={'primary'} className={'ml-auto'}>
|
|
Create Account
|
|
</Button>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HealthModal;
|