feat: upgrade pricing admin with popular/featured selects and price input with BYN badge
Replace per-item toggles with top-level dropdown selects for popular and featured items. Add PriceField component with inline gold BYN suffix badge. Public Pricing component now uses dynamic popular/featured flags from data. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -23,9 +23,9 @@ export function Pricing({ data: pricing }: PricingProps) {
|
||||
{ id: "rules", label: "Правила", icon: <ScrollText size={16} /> },
|
||||
];
|
||||
|
||||
// Split items: regular + unlimited (last item)
|
||||
const regularItems = pricing.items.slice(0, -1);
|
||||
const unlimitedItem = pricing.items[pricing.items.length - 1];
|
||||
// Split items: featured (big card) vs regular
|
||||
const featuredItem = pricing.items.find((item) => item.featured);
|
||||
const regularItems = pricing.items.filter((item) => !item.featured);
|
||||
|
||||
return (
|
||||
<section id="pricing" className="section-glow relative section-padding bg-neutral-50 dark:bg-[#050505]">
|
||||
@@ -66,7 +66,7 @@ export function Pricing({ data: pricing }: PricingProps) {
|
||||
{/* Cards grid */}
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{regularItems.map((item, i) => {
|
||||
const isPopular = i === 0;
|
||||
const isPopular = item.popular ?? false;
|
||||
return (
|
||||
<button
|
||||
key={i}
|
||||
@@ -110,25 +110,25 @@ export function Pricing({ data: pricing }: PricingProps) {
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Unlimited — featured card */}
|
||||
{unlimitedItem && (
|
||||
{/* Featured — big card */}
|
||||
{featuredItem && (
|
||||
<button onClick={() => setBookingOpen(true)} className="mt-6 w-full cursor-pointer text-left team-card-glitter rounded-2xl border border-gold/30 bg-gradient-to-r from-gold/10 via-gold/5 to-gold/10 dark:from-gold/[0.06] dark:via-transparent dark:to-gold/[0.06] p-6 sm:p-8 transition-shadow duration-300 hover:shadow-xl hover:shadow-gold/20">
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
|
||||
<div className="text-center sm:text-left">
|
||||
<div className="flex items-center justify-center gap-2 sm:justify-start">
|
||||
<Crown size={18} className="text-gold" />
|
||||
<p className="text-lg font-bold text-neutral-900 dark:text-white">
|
||||
{unlimitedItem.name}
|
||||
{featuredItem.name}
|
||||
</p>
|
||||
</div>
|
||||
{unlimitedItem.note && (
|
||||
{featuredItem.note && (
|
||||
<p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
|
||||
{unlimitedItem.note}
|
||||
{featuredItem.note}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<p className="shrink-0 font-display text-3xl font-bold text-gold">
|
||||
{unlimitedItem.price}
|
||||
{featuredItem.price}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user