Components
Tiered Price Configurator
Configurateur de prix par paliers. L'acheteur choisit un niveau et le total, la mensualite et les caracteristiques techniques s'animent ensemble. Concu pour les produits a panier eleve ou le prix seul bloque la decision. Couleurs et libelles pilotes par props, aucune dependance a un theme.
import Configurator from "@/components/ui/tiered-price-configurator";
import type { ConfiguratorStage } from "@/components/ui/tiered-price-configurator";
const STAGES: ConfiguratorStage[] = [
{
id: "origine",
name: "Origine",
sub: "Configuration d'usine",
add: 0,
note: { tone: "ok", text: "Homologuée route" },
includes: ["Bridage L1e conservé", "Carte grise et plaque", "Garantie constructeur intacte"],
metrics: { couple: 250, vitesse: 45, autonomie: 65, poids: 57 },
},
{
id: "stage-1",
name: "Stage 1",
sub: "Le réveil",
add: 690,
note: { tone: "warn", text: "Terrain privé uniquement" },
includes: ["Contrôleur reprogrammé", "Refroidissement renforcé", "Réglage sur banc"],
metrics: { couple: 280, vitesse: 62, autonomie: 70, poids: 57 },
warning:
"Cette configuration n'est plus homologuée. Elle se roule sur terrain privé ou circuit fermé.",
},
{
id: "stage-2",
name: "Stage 2",
sub: "Le terrain",
add: 1890,
note: { tone: "warn", text: "Terrain privé uniquement" },
includes: ["Suspensions revues", "Roues renforcées", "Freinage revu"],
metrics: { couple: 310, vitesse: 78, autonomie: 74, poids: 59 },
warning:
"Cette configuration n'est plus homologuée. Elle se roule sur terrain privé ou circuit fermé.",
},
{
id: "ultimate",
name: "Ultimate",
sub: "La piste",
add: 3990,
note: { tone: "warn", text: "Terrain privé uniquement" },
includes: ["Batterie haute densité", "Transmission complète", "Préparation intégrale au banc"],
metrics: { couple: 380, vitesse: 95, autonomie: 105, poids: 63 },
warning:
"Cette configuration n'est plus homologuée. Elle se roule sur terrain privé ou circuit fermé.",
},
];
const METRICS = [
{ key: "couple", label: "Couple", unit: "Nm" },
{ key: "vitesse", label: "Vitesse", unit: "km/h" },
{ key: "autonomie", label: "Autonomie", unit: "km" },
{ key: "poids", label: "Poids", unit: "kg" },
];
export default function Demo() {
return (
<div className="mx-auto max-w-5xl p-6">
<Configurator
basePrice={4490}
stages={STAGES}
metrics={METRICS}
installments={12}
accent="#FF4D17"
panel="#1B1F26"
labels={{
legend: "Niveau de préparation",
included: "Ce que comprend ce niveau",
total: "Total configuré",
perPayment: "par mois en 12 fois sans frais",
submit: "Ajouter au panier",
free: "inclus",
}}
onSubmit={(stage, total) => {
console.log("Ajout au panier", stage.id, total);
}}
/>
</div>
);
}