Merge pull request #101 from syntaxandsips/mr-dark-debug/fix-npm-run-build-errors

Fix Next.js build errors for topics page and UI components

Author: Mr-Dark-debug

src/app/topics/page.tsx

@@ -22,7 +22,7 @@ export const metadata: Metadata = {
 type SearchParamsShape = Record<string, string | string[] | undefined>;
 
 type TopicsPageProps = {
-  searchParams?: SearchParamsShape | Promise<SearchParamsShape>;
+  searchParams?: Promise<SearchParamsShape>;
 };
 
 const footerLinks = [
@@ -229,10 +229,7 @@ const normalizeParam = (value: string | string[] | undefined) =>
   (Array.isArray(value) ? value[0] : value) ?? null;
 
 export default async function TopicsPage({ searchParams }: TopicsPageProps) {
-  const resolvedSearchParams: SearchParamsShape =
-    searchParams && typeof (searchParams as Promise<unknown>).then === 'function'
-      ? await (searchParams as Promise<SearchParamsShape>)
-      : (searchParams ?? {});
+  const resolvedSearchParams: SearchParamsShape = (await searchParams) ?? {};
 
   const rawTopic = normalizeParam(resolvedSearchParams.topic);
   const rawQuery = normalizeParam(resolvedSearchParams.q);

src/components/admin/CommentsModeration.tsx

@@ -187,7 +187,9 @@ export const CommentsModeration = ({
                       <AlertDialogHeader>
                         <AlertDialogTitle>Delete comment?</AlertDialogTitle>
                         <AlertDialogDescription>
-                          This will permanently delete this comment from {comment.authorName}. This action cannot be undone.
+                          This will permanently delete this comment from
+                          {" "}
+                          {comment.authorDisplayName ?? 'this reader'}. This action cannot be undone.
                         </AlertDialogDescription>
                       </AlertDialogHeader>
                       <AlertDialogFooter>

src/components/ui/alert-dialog.tsx

@@ -138,7 +138,7 @@ function AlertDialogCancel({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
     <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "neutral" }), className)}
+      className={cn(buttonVariants({ variant: "outline" }), className)}
       {...props}
     />
   )

src/components/ui/calendar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 
 import { buttonVariants } from "@/components/ui/button"
@@ -75,8 +75,25 @@ function Calendar({
         ),
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" {...props} />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" {...props} />,
+        Chevron: ({ orientation = "right", className, size, disabled, ...iconProps }) => {
+          const IconComponent =
+            orientation === "left"
+              ? ChevronLeft
+              : orientation === "up"
+                ? ChevronUp
+                : orientation === "down"
+                  ? ChevronDown
+                  : ChevronRight
+
+          return (
+            <IconComponent
+              className={cn("h-4 w-4", disabled ? "opacity-40" : undefined, className)}
+              size={size}
+              aria-hidden="true"
+              {...iconProps}
+            />
+          )
+        },
       }}
       {...props}
     />