@@ -9,42 +9,63 @@ export function HooksList() {
99 }
1010
1111 return (
12- < div className = "space-y-8 mt-8 " >
12+ < div className = "space-y-10 mt-6 " >
1313 { hooks . map ( ( hook ) => (
14- < section key = { hook . slug } className = "border-t pt-6" >
15- < h2 id = { hook . name } className = "scroll-mt-20" >
16- { hook . name }
17- </ h2 >
18- { hook . description && (
19- < p className = "mt-2 text-neutral-600" > { hook . description } </ p >
20- ) }
14+ < section
15+ key = { hook . slug }
16+ className = "border-t pt-2 first:border-t-0 first:pt-0"
17+ >
18+ < div className = "space-y-1" >
19+ < h2
20+ id = { hook . name }
21+ className = "scroll-mt-24 text-xl font-bold tracking-tight text-neutral-900"
22+ >
23+ { hook . name }
24+ </ h2 >
25+ { hook . description && (
26+ < p className = "text-neutral-600 leading-relaxed" >
27+ { hook . description }
28+ </ p >
29+ ) }
30+ </ div >
31+
2132 { hook . args && hook . args . length > 0 && (
22- < div className = "mt-4" >
23- < h3 className = "text-lg font-medium mb-2" > Arguments</ h3 >
24- < div className = "space-y-2" >
33+ < div className = "mt-4 rounded-lg border border-neutral-200 bg-neutral-50/50 px-3 pb-3 pt-2 sm:px-4 sm:pb-4 sm:pt-3" >
34+ < h3 className = "mb-2 font-mono text-[10px] font-bold uppercase leading-none tracking-wider text-neutral-500/80" >
35+ Arguments
36+ </ h3 >
37+ < div className = "space-y-3" >
2538 { hook . args . map ( ( arg ) => (
2639 < div
2740 key = { arg . name }
28- className = "border-l-2 border-neutral-200 pl -4"
41+ className = "group grid grid-cols-1 gap-1.5 sm:grid-cols-[180px_1fr] sm:gap -4"
2942 >
30- < div className = "font-mono text-sm" >
31- < span className = "font-semibold" > { arg . name } </ span >
32- < span className = "text-neutral-500" >
33- { " " }
34- : { arg . type_name }
35- </ span >
43+ < div className = "flex flex-col items-start gap-1" >
44+ < code className = "rounded bg-white px-1.5 py-0.5 text-xs font-semibold text-neutral-900 shadow-sm ring-1 ring-neutral-200 font-mono" >
45+ { arg . name }
46+ </ code >
47+ < div className = "flex items-center gap-1.5 px-0.5 font-mono text-[10px] text-neutral-500" >
48+ < span > { arg . type_name } </ span >
49+ { arg . optional && (
50+ < >
51+ < span className = "h-0.5 w-0.5 rounded-full bg-neutral-300" />
52+ < span className = "italic text-neutral-400" >
53+ optional
54+ </ span >
55+ </ >
56+ ) }
57+ </ div >
58+ </ div >
59+ < div className = "text-sm leading-relaxed text-neutral-600" >
60+ { arg . description }
3661 </ div >
37- { arg . description && (
38- < p className = "text-sm text-neutral-600 mt-1" >
39- { arg . description }
40- </ p >
41- ) }
4262 </ div >
4363 ) ) }
4464 </ div >
4565 </ div >
4666 ) }
47- < div className = "mt-4" >
67+
68+ < div className = "mt-4 prose prose-sm prose-neutral max-w-none prose-headings:scroll-mt-24 prose-headings:font-semibold prose-p:leading-relaxed" >
4869 < MDXContent code = { hook . mdx } />
4970 </ div >
5071 </ section >
0 commit comments