chore:little fixes and formating and linting and patches

This commit is contained in:
2026-03-31 15:50:54 +02:00
parent a1ce71ffb6
commit 9b197abcfa
815 changed files with 22960 additions and 8982 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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)];

View File

@@ -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>

View File

@@ -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>

View File

@@ -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;
}