Skip to content

Commit f345685

Browse files
timlrxtimlrx
authored
Merge branch 'main' into ts.refactor_MobileNav
2 parents eb88980 + 3c53f58 commit f345685

File tree

4 files changed

+51
-29
lines changed

4 files changed

+51
-29
lines changed

‎components/Header.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ const Header = () => {
3232
<Link
3333
key={link.title}
3434
href={link.href}
35-
className="hidden font-medium text-gray-900 dark:text-gray-100 sm:block"
35+
className="hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400
36+
sm:block"
3637
>
3738
{link.title}
3839
</Link>

‎components/MobileNav.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const MobileNav = () => {
2727
xmlns="http://www.w3.org/2000/svg"
2828
viewBox="0 0 20 20"
2929
fill="currentColor"
30-
className="h-8 w-8 text-gray-900 dark:text-gray-100"
30+
className="h-8 w-8 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
3131
>
3232
<path
3333
fillRule="evenodd"
@@ -36,7 +36,6 @@ const MobileNav = () => {
3636
/>
3737
</svg>
3838
</button>
39-
4039
<Transition appear show={navShow} as={Fragment}>
4140
<Dialog as="div" className="relative z-10" onClose={onToggleNav}>
4241
<Transition.Child
@@ -68,7 +67,7 @@ const MobileNav = () => {
6867
<div key={link.title} className="px-12 py-4">
6968
<Link
7069
href={link.href}
71-
className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
70+
className="text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
7271
onClick={onToggleNav}
7372
>
7473
{link.title}
@@ -87,7 +86,7 @@ const MobileNav = () => {
8786
xmlns="http://www.w3.org/2000/svg"
8887
viewBox="0 0 20 20"
8988
fill="currentColor"
90-
className="text-gray-900 dark:text-gray-100"
89+
className="text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
9190
>
9291
<path
9392
fillRule="evenodd"

‎components/SearchButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ const SearchButton = () => {
1818
viewBox="0 0 24 24"
1919
strokeWidth={1.5}
2020
stroke="currentColor"
21-
className="h-6 w-6 text-gray-900 dark:text-gray-100"
21+
className="h-6 w-6 text-gray-900 hover:text-primary-500 dark:text-gray-100
22+
dark:hover:text-primary-400"
2223
>
2324
<path
2425
strokeLinecap="round"

‎components/ThemeSwitch.tsx‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Sun = () => (
99
xmlns="http://www.w3.org/2000/svg"
1010
viewBox="0 0 20 20"
1111
fill="currentColor"
12-
className="h-6 w-6 text-gray-900 dark:text-gray-100"
12+
className="group:hover:text-gray-100 h-6 w-6"
1313
>
1414
<path
1515
fillRule="evenodd"
@@ -23,7 +23,7 @@ const Moon = () => (
2323
xmlns="http://www.w3.org/2000/svg"
2424
viewBox="0 0 20 20"
2525
fill="currentColor"
26-
className="h-6 w-6 text-gray-900 dark:text-gray-100"
26+
className="group:hover:text-gray-100 h-6 w-6"
2727
>
2828
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
2929
</svg>
@@ -37,13 +37,14 @@ const Monitor = () => (
3737
stroke-width="2"
3838
stroke-linecap="round"
3939
stroke-linejoin="round"
40-
className="h-6 w-6 text-gray-900 dark:text-gray-100"
40+
className="group:hover:text-gray-100 h-6 w-6"
4141
>
4242
<rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
4343
<line x1="7" y1="17" x2="13" y2="17"></line>
4444
<line x1="10" y1="13" x2="10" y2="17"></line>
4545
</svg>
4646
)
47+
const Blank = () => <svg className="h-6 w-6" />
4748

4849
const ThemeSwitch = () => {
4950
const [mounted, setMounted] = useState(false)
@@ -55,8 +56,10 @@ const ThemeSwitch = () => {
5556
return (
5657
<div className="mr-5">
5758
<Menu as="div" className="relative inline-block text-left">
58-
<div>
59-
<Menu.Button>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
59+
<div className="hover:text-primary-500 dark:hover:text-primary-400">
60+
<Menu.Button>
61+
{mounted ? resolvedTheme === 'dark' ? <Moon /> : <Sun /> : <Blank />}
62+
</Menu.Button>
6063
</div>
6164
<Transition
6265
as={Fragment}
@@ -72,32 +75,50 @@ const ThemeSwitch = () => {
7275
<div className="p-1">
7376
<RadioGroup.Option value="light">
7477
<Menu.Item>
75-
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
76-
<div className="mr-2">
77-
<Sun />
78-
</div>
79-
Light
80-
</button>
78+
{({ active }) => (
79+
<button
80+
className={`${
81+
active ? 'bg-primary-600 text-white' : ''
82+
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
83+
>
84+
<div className="mr-2">
85+
<Sun />
86+
</div>
87+
Light
88+
</button>
89+
)}
8190
</Menu.Item>
8291
</RadioGroup.Option>
8392
<RadioGroup.Option value="dark">
8493
<Menu.Item>
85-
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
86-
<div className="mr-2">
87-
<Moon />
88-
</div>
89-
Dark
90-
</button>
94+
{({ active }) => (
95+
<button
96+
className={`${
97+
active ? 'bg-primary-600 text-white' : ''
98+
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
99+
>
100+
<div className="mr-2">
101+
<Moon />
102+
</div>
103+
Dark
104+
</button>
105+
)}
91106
</Menu.Item>
92107
</RadioGroup.Option>
93108
<RadioGroup.Option value="system">
94109
<Menu.Item>
95-
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
96-
<div className="mr-2">
97-
<Monitor />
98-
</div>
99-
System
100-
</button>
110+
{({ active }) => (
111+
<button
112+
className={`${
113+
active ? 'bg-primary-600 text-white' : ''
114+
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
115+
>
116+
<div className="mr-2">
117+
<Monitor />
118+
</div>
119+
System
120+
</button>
121+
)}
101122
</Menu.Item>
102123
</RadioGroup.Option>
103124
</div>

0 commit comments

Comments
 (0)