import React, { useState } from 'react';
const App = () => {
const [pages, setPages] = useState(20);
const [size, setSize] = useState('15x20');
const [cover, setCover] = useState('soft');
const [paper, setPaper] = useState('matte');
const [binding, setBinding] = useState('saddle');
const [quantity, setQuantity] = useState(1);
const pricePerPage = {
'15x20': { matte: 150, glossy: 180 },
'20x20': { matte: 200, glossy: 230 },
'20x30': { matte: 250, glossy: 280 },
'30x30': { matte: 300, glossy: 330 }
};
const coverPrices = {
soft: 800,
hard: 1500
};
const bindingPrices = {
saddle: 500,
perfect: 800
};
const calculatePrice = () => {
const basePrice = (pricePerPage[size][paper] * pages) / 2;
const coverPrice = coverPrices[cover];
const bindingPrice = bindingPrices[binding];
const totalPrice = basePrice + coverPrice + bindingPrice;
return Math.round(totalPrice * quantity);
};
const formatPrice = (price) => {
return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " ₽";
};
const ShareIcon = () => (
);
const PrintIcon = () => (
);
const DownloadIcon = () => (
);
return (
{/* Header */}
Калькулятор фотокниг Рассчитайте стоимость вашей фотокниги онлайн
Печать Скачать Поделиться
{/* Calculator Form */}
Настройки фотокниги
{/* Pages */}
{/* Size */}
Размер книги
{['15x20', '20x20', '20x30', '30x30'].map((sizeOption) => (
setSize(sizeOption)}
className={`p-3 rounded-lg border-2 transition-all duration-200 ${
size === sizeOption
? 'border-blue-500 bg-blue-50 text-blue-700'
: 'border-gray-200 hover:border-gray-300 text-gray-700'
}`}
> {sizeOption} см
{sizeOption === '15x20' && 'Компактная'}
{sizeOption === '20x20' && 'Квадратная'}
{sizeOption === '20x30' && 'Альбомная'}
{sizeOption === '30x30' && 'Премиум'}
))}
{/* Cover */}
Тип обложки
{[
{ value: 'soft', label: 'Мягкая', price: '800 ₽' },
{ value: 'hard', label: 'Жесткая', price: '1500 ₽' }
].map((option) => (
setCover(option.value)}
className={`p-4 rounded-lg border-2 transition-all duration-200 text-left ${
cover === option.value
? 'border-blue-500 bg-blue-50'
: 'border-gray-200 hover:border-gray-300'
}`}
> {option.label}
{option.price}
))}
{/* Paper */}
Тип бумаги
{[
{ value: 'matte', label: 'Матовая', description: 'Без бликов, классический вид' },
{ value: 'glossy', label: 'Глянцевая', description: 'Яркие цвета, блестящая поверхность' }
].map((option) => (
setPaper(option.value)}
className={`p-4 rounded-lg border-2 transition-all duration-200 text-left ${
paper === option.value
? 'border-blue-500 bg-blue-50'
: 'border-gray-200 hover:border-gray-300'
}`}
> {option.label}
{option.description}
))}
{/* Binding */}
Тип переплета
{[
{ value: 'saddle', label: 'Клеевый', price: '500 ₽', description: 'Надежно, доступно' },
{ value: 'perfect', label: 'Скоба', price: '800 ₽', description: 'Профессионально, долговечно' }
].map((option) => (
setBinding(option.value)}
className={`p-4 rounded-lg border-2 transition-all duration-200 text-left ${
binding === option.value
? 'border-blue-500 bg-blue-50'
: 'border-gray-200 hover:border-gray-300'
}`}
> {option.label}
{option.price}
{option.description}
))}
{/* Quantity */}
Количество экземпляров: {quantity}
setQuantity(Math.max(1, quantity - 1))}
className="w-10 h-10 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center justify-center text-gray-700 font-bold transition-colors duration-200"
>
−
{quantity} setQuantity(quantity + 1)}
className="w-10 h-10 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center justify-center text-gray-700 font-bold transition-colors duration-200"
>
+
{/* Price Summary */}
{/* Preview */}
Визуализация {size}
{cover === 'soft' ? 'Мягкая обложка' : 'Жесткая обложка'}
{pages} страниц
{paper === 'matte' ? 'Матовая бумага' : 'Глянцевая бумага'}
{/* Price Breakdown */}
Стоимость Печать страниц
{formatPrice(Math.round((pricePerPage[size][paper] * pages) / 2))}
Обложка
{formatPrice(coverPrices[cover])}
Переплет
{formatPrice(bindingPrices[binding])}
Количество ({quantity} шт)
×{quantity}
Итоговая стоимость
{formatPrice(calculatePrice())}
за 1 штуку
{formatPrice(calculatePrice() / quantity)}
Оформить заказ
{/* Features */}
Наши преимущества
{[
{
title: "Качественные материалы",
description: "Используем только проверенные материалы от ведущих производителей для долговечности и яркости цветов",
icon: "????️"
},
{
title: "Быстрое производство",
description: "Готовая фотокнига уже через 3-5 рабочих дней после подтверждения макета",
icon: "⚡"
},
{
title: "Гарантия качества",
description: "Каждая фотокнига проходит тщательную проверку перед отправкой клиенту",
icon: "✅"
}
].map((feature, index) => (
{feature.icon}
{feature.title} {feature.description}
))}
);
};
export default App;