चेकआउट सारांश

कार्ट बदलताना प्रमाण, ओळींच्या रकमा आणि एकूण घरंगळतात; कूपन सूचना येते आणि जाते; पैसे देण्यासाठी जाणीवपूर्वक धरावे लागते.

MotionListMotionNumberMotionPresenceMotionHold

उदाहरण तयार होत आहे…

JavaScript बंद आहे. खालील कोड हेच संपूर्ण उदाहरण आहे.

App.jsx

import { useState } from 'react';
import {
  MotionHold,
  MotionList,
  MotionNumber,
  MotionPresence,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

const rates = { USD: 1, EUR: 0.92, KRW: 1380 };
const catalog = [
  { id: 'mug', name: 'Stoneware mug', price: 18 },
  { id: 'tote', name: 'Canvas tote', price: 24 },
  { id: 'lamp', name: 'Desk lamp', price: 89 },
  { id: 'plant', name: 'Small fern', price: 32 },
];

export default function App({ currency = 'USD', holdTime = 1200 }) {
  const [cart, setCart] = useState([
    { ...catalog[0], quantity: 2 },
    { ...catalog[2], quantity: 1 },
  ]);
  const [coupon, setCoupon] = useState(false);
  const [paid, setPaid] = useState(false);

  const money = (amount) => ({
    value: Math.round(amount * rates[currency] * 100) / 100,
    intl: true,
    locale: 'en-US',
    format: { style: 'currency', currency },
  });
  const change = (id, delta) =>
    setCart(
      cart
        .map((item) => (item.id === id ? { ...item, quantity: item.quantity + delta } : item))
        .filter((item) => item.quantity > 0),
    );
  const addNext = () => {
    const next = catalog.find((product) => !cart.some((item) => item.id === product.id));
    if (next) setCart([...cart, { ...next, quantity: 1 }]);
  };

  const subtotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const discount = coupon ? subtotal * 0.1 : 0;
  const total = subtotal - discount;

  return (
    <div className="checkout">
      <MotionList
        as="ul"
        className="cart"
        items={cart}
        effect="slide"
        renderItem={(item) => (
          <div className="line">
            <span className="name">{item.name}</span>
            <span className="quantity">
              <button onClick={() => change(item.id, -1)}>−</button>
              <MotionNumber value={item.quantity} />
              <button onClick={() => change(item.id, 1)}>+</button>
            </span>
            <MotionNumber className="amount" {...money(item.price * item.quantity)} />
          </div>
        )}
      />
      <div className="actions">
        <button onClick={addNext}>Add an item</button>
        <button onClick={() => setCoupon(!coupon)}>{coupon ? 'Remove' : 'Apply'} SAVE10</button>
      </div>
      <MotionPresence present={coupon} className="coupon">
        SAVE10 applied: 10% off
      </MotionPresence>
      <p className="total">
        <span className="label">Total</span>
        <MotionNumber {...money(total)} mode="roll" />
      </p>
      {paid ? (
        <button className="done" onClick={() => setPaid(false)}>
          Paid. Start over
        </button>
      ) : (
        <MotionHold
          className="pay"
          fillClassName="pay-fill"
          duration={holdTime}
          onConfirm={() => setPaid(true)}
        >
          Hold to pay
        </MotionHold>
      )}
    </div>
  );
}

styles.css

.checkout {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px;
}

.cart {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
}

.name {
  color: #0e2e24;
  font-weight: 600;
}

.quantity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.quantity button {
  width: 32px;
  height: 32px;
  border: 1px solid #cfe8dc;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
}

.amount {
  min-width: 84px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.coupon {
  padding: 10px 14px;
  border-radius: 12px;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 600;
}

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid #cfe8dc;
  font:
    800 30px system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
}

.total .label {
  font-size: 16px;
  font-weight: 600;
  color: #5b616b;
}

.pay,
.done {
  position: relative;
  min-height: 52px;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    700 16px system-ui,
    sans-serif;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.pay-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0e2e24;
}

.done {
  background: #0e2e24;
}

हे कसे काम करते

MotionList नवीन ओळी आत आणि काढलेल्या बाहेर सरकवतो.
MotionNumber intl ने चलन फॉरमॅट करतो आणि चलन बदलासह प्रत्येक बदल घरंगळवतो.
MotionPresence कूपन संदेश बाहेर पडत असताना तो माउंट ठेवतो.
MotionHold पैसे देण्यापूर्वी दाबून धरायला सांगतो; लवकर सोडल्यास मागे फिरते.

चेकआउट सारांश

हे कसे काम करते

आणखी उदाहरणे

शोधा