@@ -41,23 +41,25 @@ export default function Sort() {
41
41
} ;
42
42
return (
43
43
< div className = "flex justify-center items-center mb-2 flex-col gap-2" >
44
- < div className = "dropdown dropdown-hover " >
44
+ < div className = "dropdown dropdown-hover" >
45
45
< div tabIndex = { 0 } className = "m-1 btn w-60" >
46
46
< FontAwesomeIcon
47
47
icon = { faCode }
48
48
className = " w-6 h-6 mr-3"
49
49
> </ FontAwesomeIcon >
50
50
Language
51
51
</ div >
52
- < ul className = "h-64 p-2 overflow-y-scroll shadow menu dropdown-content bg-base-100 rounded-box w-60" >
53
- < li >
52
+ < div className = "h-64 p-2 overflow-y-scroll shadow dropdown-content bg-base-100 rounded-box w-60" >
53
+ < ul tabIndex = { 0 } className = "menu menu-vertical" >
54
54
{ mainLanguages . sort ( sortByName ) . map ( language => (
55
- < Link key = { language } href = { `/repos/${ language . toLowerCase ( ) } ` } >
56
- < a > { language } </ a >
57
- </ Link >
55
+ < li key = { language } >
56
+ < Link href = { `/repos/${ language . toLowerCase ( ) } ` } >
57
+ < a > { language } </ a >
58
+ </ Link >
59
+ </ li >
58
60
) ) }
59
- </ li >
60
- </ ul >
61
+ </ ul >
62
+ </ div >
61
63
</ div >
62
64
< div className = "dropdown dropdown-hover" >
63
65
< div tabIndex = { 0 } className = "btn mb-3 w-60" >
@@ -67,43 +69,57 @@ export default function Sort() {
67
69
> </ FontAwesomeIcon >
68
70
{ selectedSort ( ) }
69
71
</ div >
70
- < ul
71
- tabIndex = { 0 }
72
- className = "h-64 p-2 overflow-y-scroll shadow menu dropdown-content bg-base-100 rounded-box w-60"
73
- >
74
- < li >
75
- < Link href = { { query : { ...router . query } } } >
76
- < a > Best match</ a >
77
- </ Link >
78
- < Link href = { { query : { ...router . query , s : 'stars' , o : 'desc' } } } >
79
- < a > Most stars</ a >
80
- </ Link >
81
- < Link href = { { query : { ...router . query , s : 'stars' , o : 'asc' } } } >
82
- < a > Fewest stars</ a >
83
- </ Link >
84
- < Link href = { { query : { ...router . query , s : 'forks' , o : 'desc' } } } >
85
- < a > Most forks</ a >
86
- </ Link >
87
- < Link href = { { query : { ...router . query , s : 'forks' , o : 'asc' } } } >
88
- < a > Fewest forks</ a >
89
- </ Link >
90
- < Link
91
- href = { {
92
- query : { ...router . query , s : 'help-wanted-issues' , o : 'desc' }
93
- } }
94
- >
95
- < a > Most help wanted issues</ a >
96
- </ Link >
97
- < Link
98
- href = { { query : { ...router . query , s : 'updated' , o : 'desc' } } }
99
- >
100
- < a > Recently updated</ a >
101
- </ Link >
102
- < Link href = { { query : { ...router . query , s : 'updated' , o : 'asc' } } } >
103
- < a > Least recently updated</ a >
104
- </ Link >
105
- </ li >
106
- </ ul >
72
+ < div className = "h-64 p-2 overflow-y-scroll shadow dropdown-content bg-base-100 rounded-box w-60" >
73
+ < ul
74
+ tabIndex = { 0 }
75
+ className = "menu menu-vertical"
76
+ >
77
+ < li >
78
+ < Link href = { { query : { ...router . query } } } >
79
+ < a > Best match</ a >
80
+ </ Link >
81
+ </ li >
82
+ < li >
83
+ < Link href = { { query : { ...router . query , s : 'stars' , o : 'desc' } } } >
84
+ < a > Most stars</ a >
85
+ </ Link >
86
+ </ li >
87
+ < li >
88
+ < Link href = { { query : { ...router . query , s : 'stars' , o : 'asc' } } } >
89
+ < a > Fewest stars</ a >
90
+ </ Link >
91
+ </ li >
92
+ < li >
93
+ < Link href = { { query : { ...router . query , s : 'forks' , o : 'desc' } } } >
94
+ < a > Most forks</ a >
95
+ </ Link >
96
+ </ li >
97
+ < li >
98
+ < Link href = { { query : { ...router . query , s : 'forks' , o : 'asc' } } } >
99
+ < a > Fewest forks</ a >
100
+ </ Link >
101
+ </ li >
102
+ < li >
103
+ < Link
104
+ href = { {
105
+ query : { ...router . query , s : 'help-wanted-issues' , o : 'desc' }
106
+ } }
107
+ >
108
+ < a > Most help wanted issues</ a >
109
+ </ Link >
110
+ </ li >
111
+ < li >
112
+ < Link href = { { query : { ...router . query , s : 'updated' , o : 'desc' } } } >
113
+ < a > Recently updated</ a >
114
+ </ Link >
115
+ </ li >
116
+ < li >
117
+ < Link href = { { query : { ...router . query , s : 'updated' , o : 'asc' } } } >
118
+ < a > Least recently updated</ a >
119
+ </ Link >
120
+ </ li >
121
+ </ ul >
122
+ </ div >
107
123
</ div >
108
124
</ div >
109
125
) ;
0 commit comments