Skip to content

Commit cc07ed8

Browse files
tkxkd0159tkxkd0159
committed
Restore club tab visuals
1 parent f665a29 commit cc07ed8

File tree

3 files changed

+207
-52
lines changed

3 files changed

+207
-52
lines changed

‎app/globals.css‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,157 @@ body {
6363
animation-delay: -3.2s;
6464
}
6565

66+
.club-route-loader-stage {
67+
position: relative;
68+
display: flex;
69+
height: 11rem;
70+
width: min(100%, 18rem);
71+
margin-inline: auto;
72+
align-items: center;
73+
justify-content: center;
74+
perspective: 1200px;
75+
}
76+
77+
.club-route-loader-book {
78+
position: absolute;
79+
height: 8rem;
80+
width: 12rem;
81+
transform-style: preserve-3d;
82+
filter: drop-shadow(0 18px 24px rgba(42, 32, 18, 0.12));
83+
}
84+
85+
.club-route-loader-cover,
86+
.club-route-loader-paper,
87+
.club-route-loader-turn-page,
88+
.club-route-loader-spine {
89+
position: absolute;
90+
}
91+
92+
.club-route-loader-cover {
93+
top: 0;
94+
height: 100%;
95+
width: 50%;
96+
border: 1px solid color-mix(in oklab, var(--accent) 16%, var(--border));
97+
background:
98+
linear-gradient(
99+
180deg,
100+
color-mix(in oklab, var(--accent) 24%, white) 0%,
101+
color-mix(in oklab, var(--accent) 14%, #d8c3a0) 52%,
102+
color-mix(in oklab, var(--accent) 20%, #b89462) 100%
103+
);
104+
box-shadow:
105+
inset 0 1px 0 rgba(255, 255, 255, 0.25),
106+
inset 0 -1px 0 rgba(42, 32, 18, 0.08);
107+
}
108+
109+
.club-route-loader-cover-left {
110+
left: 0;
111+
border-radius: 0.95rem 0.25rem 0.25rem 0.95rem;
112+
}
113+
114+
.club-route-loader-cover-right {
115+
right: 0;
116+
border-radius: 0.25rem 0.95rem 0.95rem 0.25rem;
117+
}
118+
119+
.club-route-loader-spine {
120+
left: 50%;
121+
top: 0;
122+
z-index: 4;
123+
height: 100%;
124+
width: 0.95rem;
125+
transform: translateX(-50%);
126+
border-inline: 1px solid rgba(42, 32, 18, 0.08);
127+
background:
128+
linear-gradient(
129+
180deg,
130+
color-mix(in oklab, var(--accent) 30%, #ceb287) 0%,
131+
color-mix(in oklab, var(--accent) 18%, #b79263) 100%
132+
);
133+
box-shadow:
134+
inset 1px 0 0 rgba(255, 255, 255, 0.15),
135+
inset -1px 0 0 rgba(42, 32, 18, 0.08);
136+
}
137+
138+
.club-route-loader-paper {
139+
top: 0.55rem;
140+
z-index: 1;
141+
height: calc(100% - 1.1rem);
142+
width: calc(50% - 0.8rem);
143+
border: 1px solid color-mix(in oklab, var(--border) 72%, white);
144+
background:
145+
linear-gradient(
146+
180deg,
147+
var(--surface-strong) 0%,
148+
#fbf3e6 100%
149+
);
150+
box-shadow:
151+
inset 0 0 0 1px rgba(255, 255, 255, 0.35),
152+
0 3px 8px rgba(42, 32, 18, 0.04);
153+
}
154+
155+
.club-route-loader-paper-left {
156+
left: 0.45rem;
157+
border-radius: 0.72rem 0.16rem 0.16rem 0.72rem;
158+
}
159+
160+
.club-route-loader-paper-right {
161+
right: 0.45rem;
162+
border-radius: 0.16rem 0.72rem 0.72rem 0.16rem;
163+
}
164+
165+
.club-route-loader-turn-page {
166+
top: 0.55rem;
167+
left: calc(50% + 0.02rem);
168+
z-index: 5;
169+
height: calc(100% - 1.1rem);
170+
width: calc(50% - 0.47rem);
171+
transform-origin: left center;
172+
transform-style: preserve-3d;
173+
border: 1px solid color-mix(in oklab, var(--border) 68%, white);
174+
border-radius: 0.16rem 0.72rem 0.72rem 0.16rem;
175+
background:
176+
linear-gradient(
177+
90deg,
178+
color-mix(in oklab, var(--surface) 92%, #d9c09a) 0%,
179+
var(--surface-strong) 16%,
180+
#f5ecdc 100%
181+
);
182+
box-shadow:
183+
inset 1px 0 0 rgba(42, 32, 18, 0.05),
184+
0 8px 16px rgba(42, 32, 18, 0.08);
185+
backface-visibility: hidden;
186+
opacity: 0;
187+
animation: club-route-page-turn 2.8s ease-in-out infinite;
188+
}
189+
190+
.club-route-loader-turn-page::after {
191+
content: "";
192+
position: absolute;
193+
inset: 0.4rem 0.55rem;
194+
border-radius: 0.25rem;
195+
background:
196+
repeating-linear-gradient(
197+
180deg,
198+
transparent 0,
199+
transparent 0.44rem,
200+
rgba(111, 98, 80, 0.08) 0.44rem,
201+
rgba(111, 98, 80, 0.08) 0.5rem
202+
);
203+
}
204+
205+
.club-route-loader-turn-page-2 {
206+
animation-delay: 0.7s;
207+
}
208+
209+
.club-route-loader-turn-page-3 {
210+
animation-delay: 1.4s;
211+
}
212+
213+
.club-route-loader-turn-page-4 {
214+
animation-delay: 2.1s;
215+
}
216+
66217
@keyframes forbidden-float {
67218
0%,
68219
100% {
@@ -87,9 +238,42 @@ body {
87238
}
88239
}
89240

241+
@keyframes club-route-page-turn {
242+
0% {
243+
opacity: 0;
244+
transform: rotateY(0deg);
245+
}
246+
247+
10% {
248+
opacity: 1;
249+
transform: rotateY(0deg);
250+
}
251+
252+
45% {
253+
opacity: 1;
254+
transform: rotateY(-168deg);
255+
}
256+
257+
55%,
258+
100% {
259+
opacity: 0;
260+
transform: rotateY(-179deg);
261+
}
262+
}
263+
90264
@media (prefers-reduced-motion: reduce) {
265+
.club-route-loader-turn-page,
91266
.forbidden-glow,
92267
.forbidden-book {
93268
animation: none;
94269
}
270+
271+
.club-route-loader-turn-page {
272+
opacity: 0;
273+
}
274+
275+
.club-route-loader-turn-page-1 {
276+
opacity: 0.9;
277+
transform: rotateY(-18deg);
278+
}
95279
}

‎components/clubs/club-route-loader.tsx‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,31 @@ export function ClubRouteLoader() {
33
<section
44
data-testid="club-route-loader"
55
aria-label="Loading club section"
6-
className="overflow-hidden rounded-2xl border border-(--border) bg-(--surface-strong) p-5 shadow-[0_12px_28px_rgba(42,32,18,0.05)] sm:p-6"
6+
className="club-route-loader relative overflow-hidden rounded-3xl border border-(--border) bg-(--surface-strong) px-6 py-10 shadow-[0_18px_42px_rgba(42,32,18,0.08)] sm:px-8 sm:py-12"
77
>
8-
<div className="space-y-5 animate-pulse">
9-
<div className="flex flex-wrap items-start justify-between gap-4">
10-
<div className="space-y-3">
11-
<div className="h-4 w-24 rounded-full bg-[color-mix(in_oklab,var(--surface)_72%,var(--border))]" />
12-
<div className="h-8 w-56 rounded-2xl bg-[color-mix(in_oklab,var(--surface)_88%,var(--border))]" />
13-
<div className="h-4 max-w-2xl rounded-full bg-[color-mix(in_oklab,var(--surface)_76%,var(--border))] sm:w-96" />
14-
</div>
8+
<div className="pointer-events-none absolute inset-x-10 top-0 h-28 rounded-full bg-[#fff3d0]/80 blur-3xl" />
9+
<div className="pointer-events-none absolute -bottom-8 right-12 h-24 w-24 rounded-full bg-[#d8eee7]/70 blur-3xl" />
1510

16-
<div className="h-9 w-32 rounded-md bg-[color-mix(in_oklab,var(--surface)_82%,var(--border))]" />
11+
<div className="relative mx-auto flex max-w-xl flex-col items-center gap-6 text-center">
12+
<div className="club-route-loader-stage" aria-hidden>
13+
<div className="club-route-loader-book">
14+
<div className="club-route-loader-cover club-route-loader-cover-left" />
15+
<div className="club-route-loader-cover club-route-loader-cover-right" />
16+
<div className="club-route-loader-spine" />
17+
<div className="club-route-loader-paper club-route-loader-paper-left" />
18+
<div className="club-route-loader-paper club-route-loader-paper-right" />
19+
<span className="club-route-loader-turn-page club-route-loader-turn-page-1" />
20+
<span className="club-route-loader-turn-page club-route-loader-turn-page-2" />
21+
<span className="club-route-loader-turn-page club-route-loader-turn-page-3" />
22+
<span className="club-route-loader-turn-page club-route-loader-turn-page-4" />
23+
</div>
1724
</div>
1825

19-
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
20-
<div className="space-y-3 rounded-2xl border border-(--border) bg-(--surface) p-4">
21-
<div className="h-5 w-24 rounded-full bg-[color-mix(in_oklab,var(--surface-strong)_82%,var(--border))]" />
22-
<div className="h-24 rounded-xl bg-[color-mix(in_oklab,var(--surface-strong)_90%,var(--border))]" />
23-
</div>
24-
<div className="space-y-3 rounded-2xl border border-(--border) bg-(--surface) p-4">
25-
<div className="h-5 w-32 rounded-full bg-[color-mix(in_oklab,var(--surface-strong)_82%,var(--border))]" />
26-
<div className="space-y-2">
27-
<div className="h-4 rounded-full bg-[color-mix(in_oklab,var(--surface-strong)_90%,var(--border))]" />
28-
<div className="h-4 rounded-full bg-[color-mix(in_oklab,var(--surface-strong)_90%,var(--border))]" />
29-
<div className="h-4 w-4/5 rounded-full bg-[color-mix(in_oklab,var(--surface-strong)_90%,var(--border))]" />
30-
</div>
31-
</div>
32-
<div className="space-y-3 rounded-2xl border border-(--border) bg-(--surface) p-4 sm:col-span-2 xl:col-span-1">
33-
<div className="h-5 w-20 rounded-full bg-[color-mix(in_oklab,var(--surface-strong)_82%,var(--border))]" />
34-
<div className="space-y-2">
35-
<div className="h-10 rounded-xl bg-[color-mix(in_oklab,var(--surface-strong)_90%,var(--border))]" />
36-
<div className="h-10 rounded-xl bg-[color-mix(in_oklab,var(--surface-strong)_90%,var(--border))]" />
37-
</div>
38-
</div>
26+
<div className="space-y-2">
27+
<p className="text-lg font-semibold">Opening the next chapter...</p>
28+
<p className="text-sm text-(--muted)">
29+
Turning through the club shelves.
30+
</p>
3931
</div>
4032
</div>
4133
</section>

‎components/clubs/club-tab-link.tsx‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,16 @@
11
"use client";
22

3-
import Link, { useLinkStatus } from "next/link";
3+
import Link from "next/link";
44
import type { ComponentProps, ReactNode } from "react";
55

66
import { buttonStyles } from "@/components/ui/button";
7-
import { cn } from "@/lib/utils";
87

98
type ClubTabLinkProps = {
109
children: ReactNode;
1110
href: ComponentProps<typeof Link>["href"];
1211
isActive: boolean;
1312
};
1413

15-
function TabPendingHint({ enabled }: { enabled: boolean }) {
16-
const { pending } = useLinkStatus();
17-
18-
return (
19-
<span aria-hidden className="flex h-3 w-3 items-center justify-center">
20-
<span
21-
className={cn(
22-
"h-1.5 w-1.5 rounded-full bg-current transition-all duration-150",
23-
enabled && pending
24-
? "scale-100 opacity-75 delay-100"
25-
: "scale-75 opacity-0",
26-
)}
27-
/>
28-
</span>
29-
);
30-
}
31-
3214
export function ClubTabLink({
3315
children,
3416
href,
@@ -47,10 +29,7 @@ export function ClubTabLink({
4729
: "",
4830
})}
4931
>
50-
<span className="inline-flex items-center gap-2">
51-
<span>{children}</span>
52-
<TabPendingHint enabled={!isActive} />
53-
</span>
32+
{children}
5433
</Link>
5534
);
5635
}

0 commit comments

Comments
 (0)