fixing annoying console errors / warnings

danikova · Nov 30, 2023 · 4c5d10c · 4c5d10c
1 parent 53c7128
commit 4c5d10c
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 29 deletions.
diff --git a/src/components/counter.tsx b/src/components/counter.tsx
@@ -98,7 +98,7 @@ export function Counter() {
     if (digits.includes("h"))
       _displays.push(
         <CounterDisplayNumber
-          key="d"
+          key="h"
           num={remaining.hours}
           tooltip={`${isTMinus ? "Remaining" : "Elapsed"} hours`}
           className="px-2"
@@ -122,10 +122,21 @@ export function Counter() {
           className="px-2"
         />
       );
-    const delimiter = <CounterSegment text={":"} className="w-[20px]" />;
     return _displays.length
       ? _displays.reduce(
-          (acc, val, index) => [...acc, ...(index > 0 ? [delimiter] : []), val],
+          (acc, val, index) => [
+            ...acc,
+            ...(index > 0
+              ? [
+                  <CounterSegment
+                    key={`del-${index}`}
+                    text={":"}
+                    className="w-[20px]"
+                  />,
+                ]
+              : []),
+            val,
+          ],
           [] as JSX.Element[]
         )
       : _displays;

diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
@@ -1,27 +1,26 @@
-import { Moon, Sun } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { useTheme } from "@/components/theme-provider"
+} from "@/components/ui/dropdown-menu";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTheme } from "@/components/theme-provider";
 
 export function ModeToggle() {
-  const { setTheme } = useTheme()
+  const { setTheme } = useTheme();
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button variant="outline" size="icon" as="div">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent align="end" side="left">
         <DropdownMenuItem onClick={() => setTheme("light")}>
           Light
         </DropdownMenuItem>
@@ -33,5 +32,5 @@ export function ModeToggle() {
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  )
+  );
 }
diff --git a/src/components/picture-upload.tsx b/src/components/picture-upload.tsx
@@ -37,7 +37,7 @@ export function PictureUpload({
         setIsOpen((old) => !old);
       }}
     >
-      <DialogTrigger>
+      <DialogTrigger asChild>
         <Button variant="outline">{btnText}</Button>
       </DialogTrigger>
       <DialogContent>

diff --git a/src/components/settings-toggle.tsx b/src/components/settings-toggle.tsx
@@ -31,8 +31,8 @@ export function SettingsToggle() {
 
   return (
     <Dialog>
-      <DialogTrigger>
-        <Button variant={"outline"} size="icon">
+      <DialogTrigger asChild>
+        <Button variant="outline" size="icon" as="div">
           <Settings2 className="h-[1.2rem] w-[1.2rem]" />
         </Button>
       </DialogTrigger>

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -31,26 +31,31 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ButtonHTMLAttributes<HTMLElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
+  as?: "button" | "div" | "span";
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+const Button = React.forwardRef<HTMLElement, ButtonProps>(
+  (
+    { className, variant, size, asChild = false, as = "button", ...props },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : as;
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
+        // @ts-ignore
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };