@ant-design/icons#CreditCardOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#CreditCardOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From bank-client with MIT License | 6 votes |
|
export default function BankCards() {
return (
<FormattedMessage {...messages.title}>
{(title) => (
<StyledCard
shadowed="true"
darker="true"
bordered="true"
title={title}
excluded="true"
extra={
<StyledButton type="link">
<StyledButtonContent onMouseDown={(e) => e.stopPropagation()}>
<CreditCardOutlined /> <FormattedMessage {...messages.action} />
</StyledButtonContent>
</StyledButton>
}
>
<StyledCardContent onMouseDown={(e) => e.stopPropagation()}>
<FormattedMessage {...messages.description} />
</StyledCardContent>
</StyledCard>
)}
</FormattedMessage>
);
}
Example #2
| Source File: index.jsx From erp-crm with MIT License | 5 votes |
|
export default function Navigation() {
const { state: stateApp, appContextAction } = useAppContext();
const { isNavMenuClose } = stateApp;
const { navMenu } = appContextAction;
const [showLogoApp, setLogoApp] = useState(isNavMenuClose);
useEffect(() => {
if (isNavMenuClose) {
setLogoApp(isNavMenuClose);
}
const timer = setTimeout(() => {
if (!isNavMenuClose) {
setLogoApp(isNavMenuClose);
}
}, 200);
return () => clearTimeout(timer);
}, [isNavMenuClose]);
const onCollapse = () => {
navMenu.collapse();
};
return (
<>
<Sider collapsible collapsed={isNavMenuClose} onCollapse={onCollapse} className="navigation">
<div className="logo">
<img
src={logoIcon}
alt="Logo"
// style={{ margin: "0 auto 40px", display: "block" }}
/>
{!showLogoApp && (
<img src={logoText} alt="Logo" style={{ marginTop: '3px', marginLeft: '10px' }} />
)}
</div>
<Menu mode="inline">
<Menu.Item key={'Dashboard'} icon={<DashboardOutlined />}>
<Link to={'/'} />
Dashboard
</Menu.Item>
<Menu.Item key={'Customer'} icon={<CustomerServiceOutlined />}>
<Link to={'/customer'} />
Customer
</Menu.Item>
<Menu.Item key={'Invoice'} icon={<FileTextOutlined />}>
<Link to={'/invoice'} />
Invoice
</Menu.Item>
<Menu.Item key={'Quote'} icon={<FileSyncOutlined />}>
<Link to={'/quote'} />
Quote
</Menu.Item>
<Menu.Item key={'PaymentInvoice'} icon={<CreditCardOutlined />}>
<Link to={'/payment/invoice'} />
Payment Invoice
</Menu.Item>
<Menu.Item key={'Employee'} icon={<UserOutlined />}>
<Link to={'/employee'} />
Employee
</Menu.Item>
<Menu.Item key={'Admin'} icon={<TeamOutlined />}>
<Link to={'/admin'} />
Admin
</Menu.Item>
<SubMenu key={'Settings'} icon={<SettingOutlined />} title={'Settings'}>
<Menu.Item key={'PaymentMode'}>
<Link to={'/payment/mode'} />
Payment Mode
</Menu.Item>
<Menu.Item key={'Role'}>
<Link to={'/role'} />
Role
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
</>
);
}
Example #3
| Source File: DataTableDropMenu.jsx From erp-crm with MIT License | 5 votes |
|
export default function DataTableDropMenu({ row, entity }) {
const dispatch = useDispatch();
const { erpContextAction } = useErpContext();
const { readPanel, updatePanel, recordPanel, modal } = erpContextAction;
const item = useSelector(selectItemById(row._id));
function Read() {
dispatch(erp.currentItem({ data: item }));
readPanel.open();
}
function RecordPayment() {
dispatch(erp.currentAction({ actionType: 'recordPayment', data: item }));
recordPanel.open();
dispatch(erp.currentItem({ data: item }));
}
function Edit() {
dispatch(erp.currentAction({ actionType: 'update', data: item }));
updatePanel.open();
}
function Delete() {
dispatch(erp.currentAction({ actionType: 'delete', data: item }));
modal.open();
}
function Download() {
window.open(`${DOWNLOAD_BASE_URL}${entity}/${entity}-${row._id}.pdf`, '_blank');
}
return (
<Menu style={{ minWidth: 130 }}>
<Menu.Item key={`${uniqueId()}`} icon={<EyeOutlined />} onClick={Read}>
Show
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<CreditCardOutlined />} onClick={RecordPayment}>
Record Payment
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<EditOutlined />} onClick={Edit}>
Edit
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<FilePdfOutlined />} onClick={Download}>
Download
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<DeleteOutlined />} onClick={Delete}>
Delete
</Menu.Item>
</Menu>
);
}
Example #4
| Source File: index.js From bank-client with MIT License | 5 votes |
|
items = [
{
id: 1,
name: routes.dashboard.name,
path: routes.dashboard.path,
icon: <DesktopOutlined />,
disabled: false,
},
{
id: 2,
name: routes.payment.name,
path: routes.payment.path,
icon: <WalletOutlined />,
disabled: false,
},
{
id: 3,
name: routes.history.name,
path: routes.history.path,
icon: <HistoryOutlined />,
disabled: false,
},
{
id: 4,
name: 'Cards',
path: '4',
icon: <CreditCardOutlined />,
disabled: true,
},
{
id: 5,
name: 'Credits',
path: '5',
icon: <LineChartOutlined />,
disabled: true,
},
{
id: 6,
name: 'Deposits',
path: '6',
icon: <BankOutlined />,
disabled: true,
},
{
id: 7,
name: routes.settings.name,
path: routes.settings.path,
icon: <SettingOutlined />,
disabled: false,
},
]
Example #5
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
EcommerceCart = () => {
const columns = [
{
title: '#',
dataIndex: 'number',
width: 50,
},
{
title: 'Description',
dataIndex: 'description',
render: text => (
<a className="btn btn-sm btn-light" href="#" onClick={e => e.preventDefault()}>
{text}
</a>
),
},
{
title: 'Quantity',
dataIndex: 'quantity',
render: text => <InputNumber defaultValue={text} size="small" />,
className: 'text-right',
},
{
title: 'Unit Cost',
dataIndex: 'unitcost',
className: 'text-right',
},
{
title: 'Total',
dataIndex: 'total',
className: 'text-right',
},
{
title: '',
dataIndex: '',
render: () => (
<a href="#" onClick={e => e.preventDefault()} className="btn btn-sm btn-light">
<i className="fe fe-trash mr-1" /> Remove
</a>
),
className: 'text-right',
},
]
return (
<div>
<Helmet title="Ecommerce: Cart" />
<div className="cui__utils__heading">
<strong>Ecommerce: Cart</strong>
</div>
<div className="card">
<div className="card-body">
<h6 className="mb-4 text-uppercase">
<strong>Order items</strong>
</h6>
<div className="text-nowrap mb-4">
<Table columns={columns} dataSource={ordersTableData} pagination={false} />
</div>
<h6 className="mb-4 text-uppercase">
<strong>Shipment details</strong>
</h6>
<div className="row mb-4">
<div className="col-md-8">
<Form layout="vertical">
<div className="row">
<div className="col-md-6">
<div className="form-group">
<Form.Item
label="Email"
name="email"
rules={[{ required: true, message: 'Please input your Email!' }]}
>
<Input id="checkout-email" placeholder="Email" />
</Form.Item>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<Form.Item
label="Phone Number"
name="phoneNumber"
rules={[{ required: true, message: 'Please input your Phone Number!' }]}
>
<Input id="checkout-phnum" placeholder="Phone Number" />
</Form.Item>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<Form.Item
label="Name"
name="name"
rules={[{ required: true, message: 'Please input your Name!' }]}
>
<Input id="checkout-name" placeholder="Name" />
</Form.Item>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<Form.Item
label="Surname"
name="surname"
rules={[{ required: true, message: 'Please input your Surname!' }]}
>
<Input id="checkout-surname" placeholder="Surname" />
</Form.Item>
</div>
</div>
</div>
<div className="form-group">
<Form.Item
label="City"
name="city"
rules={[{ required: true, message: 'Please input your City!' }]}
>
<Input id="checkout-city" placeholder="City" />
</Form.Item>
</div>
<div className="form-group">
<Form.Item
label="Address"
name="address"
rules={[{ required: true, message: 'Please input your Address!' }]}
>
<Input id="checkout-adress" placeholder="Adress" className="mb-3" />
</Form.Item>
</div>
<h6 className="mb-4 text-uppercase">
<strong>Shipment details</strong>
</h6>
<div className="form-group">
<Form.Item
label="Card Number"
name="cardnum"
rules={[{ required: true, message: 'Please input Card Number!' }]}
>
<Input addonBefore={<CreditCardOutlined />} placeholder="Card Number" />
</Form.Item>
</div>
<div className="row">
<div className="col-md-7">
<div className="form-group">
<Form.Item
label="Expiration Date"
name="expirationdate"
rules={[{ required: true, message: 'Please input Card Expiration Date!' }]}
>
<Input id="checkout-cardexpdate" placeholder="MM / YY" />
</Form.Item>
</div>
</div>
<div className="col-md-5 pull-right">
<div className="form-group">
<Form.Item
label="Card CVC"
name="cardcvc"
rules={[{ required: true, message: 'Please input Card CVC!' }]}
>
<Input id="checkout-cardholder" placeholder="CVC" />
</Form.Item>
</div>
</div>
</div>
<div className="form-group">
<Form.Item
label="Card Holder Name"
name="cardholdername"
rules={[{ required: true, message: 'Please input Card Holder Name!' }]}
>
<Input id="checkout-cardholder" placeholder="Name and Surname" />
</Form.Item>
</div>
</Form>
</div>
<div className="col-md-4">
<h4 className="text-black mb-3">
<strong>General Info</strong>
</h4>
<h2>
<i className="fa fa-cc-visa text-primary mr-1" />
<i className="fa fa-cc-mastercard text-default mr-1" />
<i className="fa fa-cc-amex text-default" />
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</p>
</div>
</div>
<div className="border-top text-dark font-size-18 pt-4 text-right">
<p className="mb-1">
Sub - Total amount: <strong className="font-size-24">$5,700.00</strong>
</p>
<p className="mb-1">
VAT: <strong className="font-size-24">$57.00</strong>
</p>
<p className="mb-4">
Grand Total: <strong className="font-size-36">$5,757.00</strong>
</p>
<a
href="#"
onClick={e => e.preventDefault()}
className="btn btn-lg btn-success width-200 mb-2"
>
Order Now
</a>
</div>
</div>
</div>
</div>
)
}
