73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import { Check } from "lucide-react";
|
|
|
|
import type { TipCoffeeType } from "@/lib/tip/tip_coffee";
|
|
|
|
import styles from "./tip-screen.module.css";
|
|
|
|
export interface TipCoffeeTierItem {
|
|
type: TipCoffeeType;
|
|
tierLabel: string;
|
|
displayName: string;
|
|
priceLabel: string;
|
|
unavailable: boolean;
|
|
}
|
|
|
|
interface TipCoffeeTierSelectorProps {
|
|
disabled: boolean;
|
|
items: readonly TipCoffeeTierItem[];
|
|
onChange: (type: TipCoffeeType) => void;
|
|
selectedType: TipCoffeeType;
|
|
}
|
|
|
|
export function TipCoffeeTierSelector({
|
|
disabled,
|
|
items,
|
|
onChange,
|
|
selectedType,
|
|
}: TipCoffeeTierSelectorProps) {
|
|
return (
|
|
<fieldset className={styles.tierSelector} disabled={disabled}>
|
|
<legend className={styles.tierLegend}>Choose your coffee</legend>
|
|
<div className={styles.tierList}>
|
|
{items.map((item) => {
|
|
const isSelected = item.type === selectedType;
|
|
|
|
return (
|
|
<label
|
|
key={item.type}
|
|
className={styles.tierOption}
|
|
data-selected={isSelected ? "true" : "false"}
|
|
data-unavailable={item.unavailable ? "true" : "false"}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="tip-coffee-tier"
|
|
value={item.type}
|
|
checked={isSelected}
|
|
disabled={item.unavailable}
|
|
className={styles.tierInput}
|
|
data-analytics-key={`tip.select_${item.type}`}
|
|
data-analytics-label={`Select ${item.displayName}`}
|
|
onChange={() => onChange(item.type)}
|
|
/>
|
|
<span className={styles.tierDetails}>
|
|
<span className={styles.tierLabel}>{item.tierLabel}</span>
|
|
<span className={styles.tierName}>{item.displayName}</span>
|
|
</span>
|
|
<span className={styles.tierPriceBlock}>
|
|
<span className={styles.tierPrice}>{item.priceLabel}</span>
|
|
{item.unavailable ? (
|
|
<span className={styles.tierUnavailable}>Unavailable</span>
|
|
) : null}
|
|
</span>
|
|
<span className={styles.tierCheck} aria-hidden="true">
|
|
{isSelected ? <Check size={16} strokeWidth={3} /> : null}
|
|
</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
</fieldset>
|
|
);
|
|
}
|