lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-08-08 09:41:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix styling for ticket switcher

Browse Source
This commit is contained in:
Randel Mandre
2026-08-03 20:59:32 +03:00
parent f674c450ee
commit e668da200d
2 changed files with 183 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/[locale]/piletid/page.tsx
View File

@@ -78,7 +78,7 @@ function TicketCard({
key={index}
className="flex items-start gap-2 text-[#EEE5E5] text-base"
>
<span className="w-1 h-full min-h-5 bg-[#00A3E0] shrink-0" />
<span className="w-1 self-stretch min-h-5 bg-[#00A3E0] shrink-0" />
<span>{feature}</span>
</li>
))}

90
src/components/SwitchableTicketCard.tsx
View File

@@ -72,9 +72,25 @@ export default function SwitchableTicketCard({
);
}
function renderMobileFeatures(features: string[]) {
return (
<ul className="flex flex-col gap-2 grow mb-6">
{features.map((feature, index) => (
<li
key={index}
className="flex items-start gap-2 text-[#EEE5E5] text-base"
>
<span className="w-1 self-stretch min-h-5 bg-[#00A3E0] shrink-0" />
<span>{feature}</span>
</li>
))}
</ul>
);
}
return (
<div
className={`relative bg-[#0E0F19] border-[#1F5673] px-12 py-16 flex flex-col min-h-87.5 h-full overflow-hidden ${className}`}
className={`relative bg-[#0E0F19] border-[#1F5673] px-12 sm:py-16 py-0 flex flex-col min-h-87.5 h-full overflow-hidden ${className}`}
>
{backgroundImage && (
<Image
@@ -96,6 +112,69 @@ export default function SwitchableTicketCard({
)}
<div className="relative z-10 flex flex-col h-full">
{/* Mobile: Simple slide transition at sm: breakpoint (640px) */}
<div className="sm:hidden relative w-full flex flex-col h-full">
<div className="relative flex-grow overflow-hidden">
<div
className={`absolute inset-0 flex flex-col transition-transform duration-700 ease-out`}
style={{ transform: isA ? "translateX(0)" : "translateX(-100%)" }}
>
<div className="pt-16 pb-8">
<h2
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,1.5rem+2vw,3rem)] leading-none text-[#00A3E0] uppercase`}
>
{optionA.title}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-2xl text-[#EEE5E5] uppercase mb-4`}
>
{optionA.subtitle}
</h3>
<p
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,2rem+2vw,4rem)] leading-none mb-4`}
>
{renderPrice(optionA.price)}
</p>
{renderMobileFeatures(optionA.features)}
</div>
</div>
<div
className={`absolute inset-0 flex flex-col transition-transform duration-700 ease-out`}
style={{ transform: !isA ? "translateX(0)" : "translateX(100%)" }}
>
<div className="pt-16 pb-8">
<h2
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,1.5rem+2vw,3rem)] leading-none text-[#00A3E0] uppercase`}
>
{optionB.title}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-2xl text-[#EEE5E5] uppercase mb-4`}
>
{optionB.subtitle}
</h3>
<p
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,2rem+2vw,4rem)] leading-none mb-4`}
>
{renderPrice(optionB.price)}
</p>
{renderMobileFeatures(optionB.features)}
</div>
</div>
</div>
<div className="pb-16 flex-shrink-0">
<Link href={buttonHref} target="_blank" className="w-fit">
<button
className={`px-4 py-2 border-4 border-transparent bg-[#00A3E0] hover:bg-[#E5E5EE] text-[#0A121F] cursor-pointer ${vipnagorgialla.className} font-bold italic leading-none uppercase transition`}
>
{buttonText}
</button>
</Link>
</div>
</div>
{/* Desktop: Original transition behavior */}
<div className="hidden sm:flex flex-col h-full">
{/* Title + subtitle + price with position shift */}
<div className="flex items-start mb-2 ">
<div
@@ -204,24 +283,25 @@ export default function SwitchableTicketCard({
</button>
</Link>
</div>
</div>
{/* Chevron buttons on left/right sides — hidden on mobile */}
{/* Chevron buttons on left/right sides */}
<button
onClick={() => setIsA(false)}
className={`${isA ? "lg:flex" : "hidden"} absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition-all duration-300 z-20`}
className={`${isA ? "flex" : "hidden"} absolute right-0 top-1/2 -translate-y-1/2 w-10 h-10 items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition-all duration-300 z-20`}
aria-label={optionB.title}
>
<span className="material-symbols-outlined">chevron_right</span>
</button>
<button
onClick={() => setIsA(true)}
className={`${!isA ? "lg:flex" : "hidden"} absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition-all duration-300 z-20`}
className={`${!isA ? "flex" : "hidden"} absolute left-0 top-1/2 -translate-y-1/2 w-10 h-10 items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition-all duration-300 z-20`}
aria-label={optionA.title}
>
<span className="material-symbols-outlined">chevron_left</span>
</button>
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 flex justify-center gap-2 pb-2">
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 flex justify-center gap-2 pb-2 z-20">
<button
onClick={() => setIsA(true)}
className={`w-3 h-3 rounded-full transition ${