fix: hydration errors for modifier key

This commit is contained in:
Mythie
2023-11-23 13:57:08 +11:00
parent 9444e0cc67
commit 5de0c464f0

View File

@ -1,7 +1,7 @@
'use client';
import type { HTMLAttributes } from 'react';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { Search } from 'lucide-react';
@ -15,11 +15,14 @@ export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
// const pathname = usePathname();
const [open, setOpen] = useState(false);
const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
useEffect(() => {
const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
const isMacOS = /Macintosh|Mac\s+OS\s+X/i.test(userAgent);
const isMacOS = /Macintosh|Mac\s+OS\s+X/i.test(userAgent);
const modifierKey = isMacOS ? '⌘' : 'Ctrl';
setModifierKey(isMacOS ? '⌘' : 'Ctrl');
}, []);
return (
<div
@ -39,7 +42,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
</div>
<div>
<div className="text-muted-foreground bg-muted rounded-md px-1.5 py-0.5 font-mono text-xs">
<div className="text-muted-foreground bg-muted flex items-center rounded-md px-1.5 py-0.5 text-xs tracking-wider">
{modifierKey}+K
</div>
</div>