tethysfaceid
Version:
88 lines (82 loc) • 4.26 kB
JavaScript
import React from 'react';
import { Card, Divider, Result, Row, Col, Button } from 'antd';
import { SmileOutlined, FrownOutlined } from '@ant-design/icons';
import Avatar from 'antd/lib/avatar/avatar';
const UserStatus = ({ data = {}, status }) => {
const { username, urlPictureUser, region, country, email, gender } = data || {};
const title = (
<div className="text-regular">
{status === 'Matched' ? 'Welcome' : 'Oops!'} <span className="primary">{username}</span>, Your face authentication {status === 'Matched' ? 'was Successful.' : 'Failed!'}
</div>);
return (
<div>
<Card>
<Result
// status={status === 'Matched' ? "success" : 'error'}
subTitle={title}
className="no-padding"
icon={status === 'Matched' ? <SmileOutlined /> : <FrownOutlined />}
extra={[
status === 'Matched' && <Divider key="DIVIDER" />,
status === 'Matched' &&
<Row key="row">
<Col span={8} xs={24} md={8}>
<Avatar
size={{ xs: 100, sm: 100, md: 150, lg: 150, xl: 150, xxl: 150, }}
src={urlPictureUser}
style={{ border: '1px solid #03224c' }}
className='space-bottom'
/>
</Col>
<Col span={16} xs={24} sm={13} md={12} className="left" style={{ margin: '0 auto', textTransform: 'capitalize' }}>
<Row className="space-top extra-short">
<Col span={5} xs={12} className="secondary">
UserName :
</Col>
<Col span={6} xs={12} style={{ textTransform: "initial" }}>
{username}
</Col>
</Row>
<Row className="space-top extra-short">
<Col span={5} xs={12} className="secondary">
Email :
</Col>
<Col span={6} xs={12} style={{ textTransform: "initial" }}>
{email}
</Col>
</Row>
<Row className="space-top extra-short">
<Col span={5} xs={12} className="secondary">
Gender :
</Col>
<Col span={6} xs={12}>
{gender}
</Col>
</Row>
<Row className="space-top extra-short">
<Col span={5} xs={12} className="secondary">
Country :
</Col>
<Col span={6} xs={12}>
{country}
</Col>
</Row>
<Row className="space-top extra-short">
<Col span={5} xs={12} className="secondary">
Region :
</Col>
<Col span={6} xs={12}>
{region}
</Col>
</Row>
</Col>
</Row>
,
]}
/>
</Card>
{status !== 'Matched' && <a href="/login"><Button type='primary' block> Try Again </Button></a>}
</div>
);
};
export default UserStatus;