BivekiGroup/yourhouse
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновлен компонент HouseCalculatorModal: улучшены стили для радиокнопок с добавлением эффектов при выборе, изменены классы для повышения читаемости и взаимодействия. Упрощены проверки состояния для визуальных эффектов.

Browse Source
This commit is contained in:
albivkt
2025-07-22 21:48:12 +03:00
parent a04a4cdd63
commit 453c372969
1 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/HouseCalculatorModal.tsx
View File

@ -216,8 +216,14 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
</h2> </h2>
<div className="flex flex-col gap-2 sm:gap-3 lg:gap-4"> <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
{areas.map((a) => ( {areas.map((a) => (
<label key={a} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300"> <label key={a} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> area === a
? 'border-blue-500 shadow-lg shadow-blue-500/25'
: 'border-white/20 hover:border-white/40'
}`}>
<div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
area === a ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
}`}></div>
<div className="relative z-10 flex items-center"> <div className="relative z-10 flex items-center">
<input <input
type="radio" type="radio"
@ -240,10 +246,16 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent"> <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
Вариант отделки Вариант отделки
</h2> </h2>
<div className="space-y-2 sm:space-y-3 lg:space-y-4"> <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
{finishOptions.map((option) => ( {finishOptions.map((option) => (
<label key={option} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300"> <label key={option} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> finish === option
? 'border-blue-500 shadow-lg shadow-blue-500/25'
: 'border-white/20 hover:border-white/40'
}`}>
<div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
finish === option ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
}`}></div>
<div className="relative z-10 flex items-center"> <div className="relative z-10 flex items-center">
<input <input
type="radio" type="radio"
@ -268,10 +280,16 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent"> <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
Источник финансирования Источник финансирования
</h2> </h2>
<div className="space-y-2 sm:space-y-3 lg:space-y-4"> <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
{financeOptions.map((option) => ( {financeOptions.map((option) => (
<label key={option} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300"> <label key={option} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> finance === option
? 'border-blue-500 shadow-lg shadow-blue-500/25'
: 'border-white/20 hover:border-white/40'
}`}>
<div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
finance === option ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
}`}></div>
<div className="relative z-10 flex items-center"> <div className="relative z-10 flex items-center">
<input <input
type="radio" type="radio"