jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into ts.refactor_MobileNav

Browse Source
This commit is contained in:
Timothy 2024-06-22 16:21:03 +08:00 committed by GitHub
commit f345685f71
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/Header.tsx
View File

@ -32,7 +32,8 @@ const Header = () => {
<Link
key={link.title}
href={link.href}
className="hidden font-medium text-gray-900 dark:text-gray-100 sm:block"
className="hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400
sm:block"
>
{link.title}
</Link>

7
components/MobileNav.tsx
View File

@ -27,7 +27,7 @@ const MobileNav = () => {
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="h-8 w-8 text-gray-900 dark:text-gray-100"
className="h-8 w-8 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
>
<path
fillRule="evenodd"
@ -36,7 +36,6 @@ const MobileNav = () => {
/>
</svg>
</button>
<Transition appear show={navShow} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={onToggleNav}>
<Transition.Child
@ -68,7 +67,7 @@ const MobileNav = () => {
<div key={link.title} className="px-12 py-4">
<Link
href={link.href}
className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
className="text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
onClick={onToggleNav}
>
{link.title}
@ -87,7 +86,7 @@ const MobileNav = () => {
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="text-gray-900 dark:text-gray-100"
className="text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
>
<path
fillRule="evenodd"

3
components/SearchButton.tsx
View File

@ -18,7 +18,8 @@ const SearchButton = () => {
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-6 w-6 text-gray-900 dark:text-gray-100"
className="h-6 w-6 text-gray-900 hover:text-primary-500 dark:text-gray-100
dark:hover:text-primary-400"
>
<path
strokeLinecap="round"

67
components/ThemeSwitch.tsx
View File

@ -9,7 +9,7 @@ const Sun = () => (
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="h-6 w-6 text-gray-900 dark:text-gray-100"
className="group:hover:text-gray-100 h-6 w-6"
>
<path
fillRule="evenodd"
@ -23,7 +23,7 @@ const Moon = () => (
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="h-6 w-6 text-gray-900 dark:text-gray-100"
className="group:hover:text-gray-100 h-6 w-6"
>
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
@ -37,13 +37,14 @@ const Monitor = () => (
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="h-6 w-6 text-gray-900 dark:text-gray-100"
className="group:hover:text-gray-100 h-6 w-6"
>
<rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
<line x1="7" y1="17" x2="13" y2="17"></line>
<line x1="10" y1="13" x2="10" y2="17"></line>
</svg>
)
const Blank = () => <svg className="h-6 w-6" />
const ThemeSwitch = () => {
const [mounted, setMounted] = useState(false)
@ -55,8 +56,10 @@ const ThemeSwitch = () => {
return (
<div className="mr-5">
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
<div className="hover:text-primary-500 dark:hover:text-primary-400">
<Menu.Button>
{mounted ? resolvedTheme === 'dark' ? <Moon /> : <Sun /> : <Blank />}
</Menu.Button>
</div>
<Transition
as={Fragment}
@ -72,32 +75,50 @@ const ThemeSwitch = () => {
<div className="p-1">
<RadioGroup.Option value="light">
<Menu.Item>
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
<div className="mr-2">
<Sun />
</div>
Light
</button>
{({ active }) => (
<button
className={`${
active ? 'bg-primary-600 text-white' : ''
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
<div className="mr-2">
<Sun />
</div>
Light
</button>
)}
</Menu.Item>
</RadioGroup.Option>
<RadioGroup.Option value="dark">
<Menu.Item>
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
<div className="mr-2">
<Moon />
</div>
Dark
</button>
{({ active }) => (
<button
className={`${
active ? 'bg-primary-600 text-white' : ''
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
<div className="mr-2">
<Moon />
</div>
Dark
</button>
)}
</Menu.Item>
</RadioGroup.Option>
<RadioGroup.Option value="system">
<Menu.Item>
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
<div className="mr-2">
<Monitor />
</div>
System
</button>
{({ active }) => (
<button
className={`${
active ? 'bg-primary-600 text-white' : ''
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
<div className="mr-2">
<Monitor />
</div>
System
</button>
)}
</Menu.Item>
</RadioGroup.Option>
</div>