GiftCard.jsx

1import { useState } from "react";2import { GIFT } from "../config/shop.ts";3import { buyHref, giftUrl, money } from "../lib/shop.ts";4import { AddToBag } from "../components/AddToBag.jsx";5import { Breadcrumbs } from "../components/Breadcrumbs.jsx";67export const TIERS = [8  { tier: "mini", name: "Mini", tint: "--red", from: 11, to: 99 },9  { tier: "medi", name: "Medi", tint: "--green", from: 111, to: 999 },10  { tier: "maxi", name: "Maxi", tint: "--blue", from: 1111, to: 9999 },11];1213const FACE = "/bird/bird-128.png";1415const whole = (price) => String(Math.round(Number(price)));1617function Face({ card, amount }) {18  return (19    <figure className="face" style={{ "--tint": `var(${card.tint})` }}>20      <div className="face-top">21        <img src={FACE} alt="" width="28" height="28" />22        <span>carlomitchener.com</span>23      </div>24      <p className="face-amount mono">{amount}</p>25      <div className="face-foot">26        <span>Gift Card</span>27        <span>{card.name}</span>28      </div>29    </figure>30  );31}3233export function GiftCards({ cards }) {34  return (35    <div className="wrap">36      <Breadcrumbs trail={[{ name: "Gift Card" }]} />37      <div className="page-head">38        <h1>Gift Card</h1>39        <p className="lead">Three sizes, nine angel numbers each. Sent by email, never expires.</p>40      </div>41      <div className="gift-row">42        {cards.map((card) => (43          <a key={card.tier} className="gift-pick" href={giftUrl(card.tier)}>44            <Face card={card} amount={String(card.from)} />45            <h3>{`${card.name} Gift Card`}</h3>46            <span className="price">{`$${card.from} to $${card.to}`}</span>47          </a>48        ))}49      </div>50    </div>51  );52}5354export function GiftCard({ card, cards, product, buyPrefix }) {55  const [id, setId] = useState("");56  const variant = product.variants.find((one) => one.id === id) ?? product.variants[0];57  return (58    <div className="wrap">59      <Breadcrumbs trail={[{ name: "Gift Card", href: GIFT }, { name: card.name }]} />60      <article className="gift">61        <div className="left">62          <Face card={card} amount={whole(variant.price)} />63        </div>64        <div className="side">65          <div className="details">66            <h1>{`${card.name} Gift Card`}</h1>67            <p className="fine">{`Angel numbers from ${card.from} to ${card.to}.`}</p>68            <p className="price">{money(variant.price)}</p>69            <nav className="tiers" aria-label="Gift card size">70              {cards.map((one) => (71                <a key={one.tier} href={giftUrl(one.tier)} aria-current={one.tier === card.tier ? "page" : undefined}>72                  {one.name}73                </a>74              ))}75            </nav>76            <div className="sizes" role="group" aria-label="Amount">77              {product.variants.map((one) => (78                <button type="button" key={one.id} className="mono" aria-pressed={one.id === variant.id ? "true" : "false"} disabled={!one.available} onClick={() => setId(one.id)}>79                  {whole(one.price)}80                </button>81              ))}82            </div>83            <div className="buy">84              <AddToBag disabled={!product.available} line={{ id: variant.id, key: product.key, title: `${card.name} Gift Card`, size: `$${whole(variant.price)}`, price: variant.price, image: FACE }} />85              <a className="pill wide" href={buyHref(buyPrefix, variant.id)} data-buy rel="noopener">86                Buy now87              </a>88            </div>89            <p className="fine">Shopify emails the code after checkout. It buys anything in the shop, never expires and cannot be refunded.</p>90          </div>91        </div>92      </article>93    </div>94  );95}