BartoszJarocki/cv
1
1
Fork 0
mirror of https://github.com/BartoszJarocki/cv.git synced 2024-11-28 22:26:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Display the correct button based on the user platform (#46)

Browse Source 
* Display the correct button based on the user platform

* remove useState and memoize platform
This commit is contained in:
Girges Scandar 2024-01-16 21:07:59 +01:00 committed by GitHub
parent 80273a2be2
commit 732668a5c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/command-menu.tsx
View File

@ -13,6 +13,7 @@ import {
} from "@/components/ui/command";
import { Button } from "./ui/button";
import { CommandIcon } from "lucide-react";
import { useOS } from "@/hooks/useOS";
interface Props {
links: { url: string; title: string }[];
@ -20,6 +21,7 @@ interface Props {
export const CommandMenu = ({ links }: Props) => {
const [open, setOpen] = React.useState(false);
const os = useOS();
React.useEffect(() => {
const down = (e: KeyboardEvent) => {
@ -38,7 +40,7 @@ export const CommandMenu = ({ links }: Props) => {
<p className="fixed bottom-0 left-0 right-0 hidden border-t border-t-muted bg-white p-1 text-center text-sm text-muted-foreground print:hidden xl:block">
Press{" "}
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
<span className="text-xs">⌘</span>J
<span className="text-xs">{os === "mac" ? "⌘" : "CTRL"}</span>+ J
</kbd>{" "}
to open the command menu
</p>

17
src/hooks/useOS.ts Normal file
View File

@ -0,0 +1,17 @@
import { useMemo } from "react";
export type OS = "mac" | "windows" | "linux" | "other";
export const useOS = (): OS => {
const getOperatingSystem = (): OS => {
const userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.includes("mac")) return "mac";
if (userAgent.includes("win")) return "windows";
if (userAgent.includes("linux")) return "linux";
return "other";
};
return useMemo(() => getOperatingSystem(), []);
};