File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1313 }
1414
1515 let { sponsor }: Props = $props ();
16+ let expanded = $state (false );
17+
18+ function toggleBio() {
19+ expanded = ! expanded ;
20+ }
1621 </script >
1722
1823<article class ="sponsor-card sponsor-card-- {sponsor .tier }" >
3136 <span class ="sponsor-tier" >{sponsor .tier }</span >
3237 </div >
3338
34- <p class ="sponsor-bio" >{sponsor .bio }</p >
39+ {#if sponsor .bio }
40+ <button
41+ class =" bio-toggle"
42+ onclick ={toggleBio }
43+ aria-expanded ={expanded }
44+ aria-controls ="bio- {sponsor .id }"
45+ >
46+ {expanded ? ' Hide bio' : ' Read bio' }
47+ <svg
48+ class =" chevron"
49+ class:rotated ={expanded }
50+ width =" 16"
51+ height =" 16"
52+ viewBox =" 0 0 16 16"
53+ fill =" none"
54+ aria-hidden =" true"
55+ >
56+ <path d =" M4 6L8 10L12 6" stroke =" currentColor" stroke-width =" 2" stroke-linecap =" round" stroke-linejoin =" round" />
57+ </svg >
58+ </button >
59+
60+ {#if expanded }
61+ <p id ="bio- {sponsor .id }" class ="sponsor-bio" >{sponsor .bio }</p >
62+ {/if }
63+ {/if }
3564
3665 <a
3766 href ={sponsor .website }
128157 color : var (--color-text-light );
129158 }
130159
160+ .bio-toggle {
161+ display : flex ;
162+ align-items : center ;
163+ gap : var (--space-xs );
164+ padding : var (--space-xs ) 0 ;
165+ color : var (--color-primary );
166+ font-size : var (--text-sm );
167+ font-weight : 500 ;
168+ margin-bottom : var (--space-sm );
169+ }
170+
171+ .bio-toggle :hover ,
172+ .bio-toggle :focus-visible {
173+ text-decoration : underline ;
174+ }
175+
176+ .chevron {
177+ transition : transform var (--transition-fast );
178+ }
179+
180+ .chevron.rotated {
181+ transform : rotate (180deg );
182+ }
183+
131184 .sponsor-bio {
132- flex : 1 ;
133185 font-size : var (--text-sm );
134186 line-height : 1.6 ;
135187 color : var (--color-gray-600 );
136188 margin-bottom : var (--space-md );
189+ padding-top : var (--space-sm );
190+ border-top : 1px solid var (--color-gray-200 );
137191 }
138192
139193 .sponsor-link {
You can’t perform that action at this time.
0 commit comments