chore:little fixes and formating and linting and patches
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Testbed | OpenPanel SDK</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -15,7 +15,9 @@ export function CartPage({ cart, onRemove, onCheckout }: Props) {
|
||||
<div>
|
||||
<div className="page-title">Cart</div>
|
||||
<div className="cart-empty">Your cart is empty.</div>
|
||||
<Link to="/"><button type="button">← Back to shop</button></Link>
|
||||
<Link to="/">
|
||||
<button type="button">← Back to shop</button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -30,7 +32,7 @@ export function CartPage({ cart, onRemove, onCheckout }: Props) {
|
||||
<th>Price</th>
|
||||
<th>Qty</th>
|
||||
<th>Subtotal</th>
|
||||
<th></th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -41,7 +43,11 @@ export function CartPage({ cart, onRemove, onCheckout }: Props) {
|
||||
<td>{item.qty}</td>
|
||||
<td>${item.price * item.qty}</td>
|
||||
<td>
|
||||
<button type="button" className="danger" onClick={() => onRemove(item.id)}>
|
||||
<button
|
||||
className="danger"
|
||||
onClick={() => onRemove(item.id)}
|
||||
type="button"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</td>
|
||||
@@ -52,8 +58,10 @@ export function CartPage({ cart, onRemove, onCheckout }: Props) {
|
||||
<div className="cart-summary">
|
||||
<div className="cart-total">Total: ${total}</div>
|
||||
<div className="cart-actions">
|
||||
<Link to="/"><button type="button">← Shop</button></Link>
|
||||
<button type="button" className="primary" onClick={onCheckout}>
|
||||
<Link to="/">
|
||||
<button type="button">← Shop</button>
|
||||
</Link>
|
||||
<button className="primary" onClick={onCheckout} type="button">
|
||||
Checkout →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -14,26 +14,36 @@ export function CheckoutPage({ cart, onPay }: Props) {
|
||||
<div className="page-title">Checkout</div>
|
||||
<div className="checkout-form">
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="card">Card number</label>
|
||||
<input id="card" defaultValue="4242 4242 4242 4242" readOnly />
|
||||
<label className="form-label" htmlFor="card">
|
||||
Card number
|
||||
</label>
|
||||
<input defaultValue="4242 4242 4242 4242" id="card" readOnly />
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
|
||||
<div
|
||||
style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}
|
||||
>
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="expiry">Expiry</label>
|
||||
<input id="expiry" defaultValue="12/28" readOnly />
|
||||
<label className="form-label" htmlFor="expiry">
|
||||
Expiry
|
||||
</label>
|
||||
<input defaultValue="12/28" id="expiry" readOnly />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="cvc">CVC</label>
|
||||
<input id="cvc" defaultValue="123" readOnly />
|
||||
<label className="form-label" htmlFor="cvc">
|
||||
CVC
|
||||
</label>
|
||||
<input defaultValue="123" id="cvc" readOnly />
|
||||
</div>
|
||||
</div>
|
||||
<div className="checkout-total">Total: ${total}</div>
|
||||
<div className="checkout-pay-buttons">
|
||||
<Link to="/cart"><button type="button">← Back</button></Link>
|
||||
<button type="button" className="primary" onClick={() => onPay(true)}>
|
||||
<Link to="/cart">
|
||||
<button type="button">← Back</button>
|
||||
</Link>
|
||||
<button className="primary" onClick={() => onPay(true)} type="button">
|
||||
Pay ${total} (success)
|
||||
</button>
|
||||
<button type="button" className="danger" onClick={() => onPay(false)}>
|
||||
<button className="danger" onClick={() => onPay(false)} type="button">
|
||||
Pay ${total} (fail)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -64,8 +64,30 @@ export const PRESET_GROUPS: Group[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const FIRST_NAMES = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Hank', 'Iris', 'Jack'];
|
||||
const LAST_NAMES = ['Smith', 'Jones', 'Brown', 'Taylor', 'Wilson', 'Davis', 'Clark', 'Hall', 'Lewis', 'Young'];
|
||||
const FIRST_NAMES = [
|
||||
'Alice',
|
||||
'Bob',
|
||||
'Carol',
|
||||
'Dave',
|
||||
'Eve',
|
||||
'Frank',
|
||||
'Grace',
|
||||
'Hank',
|
||||
'Iris',
|
||||
'Jack',
|
||||
];
|
||||
const LAST_NAMES = [
|
||||
'Smith',
|
||||
'Jones',
|
||||
'Brown',
|
||||
'Taylor',
|
||||
'Wilson',
|
||||
'Davis',
|
||||
'Clark',
|
||||
'Hall',
|
||||
'Lewis',
|
||||
'Young',
|
||||
];
|
||||
|
||||
function randomMock(): User {
|
||||
const first = FIRST_NAMES[Math.floor(Math.random() * FIRST_NAMES.length)];
|
||||
|
||||
@@ -27,7 +27,9 @@ export function ProductPage({ products, onAddToCart }: Props) {
|
||||
return (
|
||||
<div>
|
||||
<div className="page-title">Product not found</div>
|
||||
<Link to="/"><button type="button">← Back to shop</button></Link>
|
||||
<Link to="/">
|
||||
<button type="button">← Back to shop</button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -48,9 +50,9 @@ export function ProductPage({ products, onAddToCart }: Props) {
|
||||
Lorem ipsum dolor sit amet consectetur adipiscing elit.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="primary"
|
||||
onClick={() => onAddToCart(product)}
|
||||
type="button"
|
||||
>
|
||||
Add to cart
|
||||
</button>
|
||||
|
||||
@@ -12,18 +12,18 @@ export function ShopPage({ products, onAddToCart }: Props) {
|
||||
<div className="page-title">Products</div>
|
||||
<div className="product-grid">
|
||||
{products.map((product) => (
|
||||
<div key={product.id} className="product-card">
|
||||
<div className="product-card" key={product.id}>
|
||||
<div className="product-card-category">{product.category}</div>
|
||||
<Link to={`/product/${product.id}`} className="product-card-name">
|
||||
<Link className="product-card-name" to={`/product/${product.id}`}>
|
||||
{product.name}
|
||||
</Link>
|
||||
<div className="product-card-price">${product.price}</div>
|
||||
<div className="product-card-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="primary"
|
||||
style={{ width: '100%' }}
|
||||
onClick={() => onAddToCart(product)}
|
||||
style={{ width: '100%' }}
|
||||
type="button"
|
||||
>
|
||||
Add to cart
|
||||
</button>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -22,7 +24,9 @@ body {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
button, input, select {
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user