Skip to content

Commit 5d0ded7

Browse files
Merge pull request #94 from ur5us/improve-html-structure
Improve HTML structure
2 parents 90d9ea6 + 4547c93 commit 5d0ded7

File tree

1 file changed

+61
-45
lines changed

1 file changed

+61
-45
lines changed

components/Sort.tsx

Lines changed: 61 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -41,23 +41,25 @@ export default function Sort() {
4141
};
4242
return (
4343
<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">
4545
<div tabIndex={0} className="m-1 btn w-60">
4646
<FontAwesomeIcon
4747
icon={faCode}
4848
className=" w-6 h-6 mr-3"
4949
></FontAwesomeIcon>
5050
Language
5151
</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">
5454
{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>
5860
))}
59-
</li>
60-
</ul>
61+
</ul>
62+
</div>
6163
</div>
6264
<div className="dropdown dropdown-hover">
6365
<div tabIndex={0} className="btn mb-3 w-60">
@@ -67,43 +69,57 @@ export default function Sort() {
6769
></FontAwesomeIcon>
6870
{selectedSort()}
6971
</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>
107123
</div>
108124
</div>
109125
);

0 commit comments

Comments
 (0)