revert a9d83768ca

components/comments/comments-skeleton.tsx

@@ -1,9 +1,8 @@
 import Skeleton from "@/components/ui/skeleton";
-import Wrapper from "./comments-wrapper";
 
 const CommentsSkeleton = () => {
   return (
-    <Wrapper>
+    <>
       <Skeleton className="h-32 w-full" />
 
       <div className="flex gap-4">
@@ -20,7 +19,7 @@ const CommentsSkeleton = () => {
           </div>
         </div>
       </div>
-    </Wrapper>
+    </>
   );
 };
 

components/comments/comments-wrapper.tsx

@@ -1,11 +0,0 @@
-import { cn } from "@/lib/utils";
-
-const CommentsWrapper = ({ className, children }: { className?: string; children: React.ReactNode }) => {
-  return (
-    <section id="comments" className={cn("isolate mt-8 mb-10 min-h-36 w-full border-t-2 pt-8", className)}>
-      <div className="mx-auto w-full max-w-3xl space-y-6 text-base leading-normal [&_p]:my-auto">{children}</div>
-    </section>
-  );
-};
-
-export default CommentsWrapper;

components/comments/comments.tsx

@@ -1,12 +1,11 @@
 import { headers } from "next/headers";
-import Wrapper from "./comments-wrapper";
 import Form from "./comment-form";
 import Thread from "./comment-thread";
 import SignIn from "./sign-in";
 import { auth } from "@/lib/auth";
 import { getComments, type CommentWithUser } from "@/lib/server/comments";
 
-const Comments = async ({ slug, closed = false }: { slug: string; closed?: boolean }) => {
+const Comments = async ({ slug }: { slug: string }) => {
   const session = await auth.api.getSession({
     headers: await headers(),
   });
@@ -28,25 +27,17 @@ const Comments = async ({ slug, closed = false }: { slug: string; closed?: boole
   const rootComments = commentsByParentId["root"] || [];
 
   return (
-    <Wrapper>
-      {closed ? (
-        <div className="bg-muted/40 flex min-h-32 items-center justify-center rounded-lg p-6">
-          <p className="text-center font-medium">Comments are closed for this post.</p>
-        </div>
-      ) : !session ? (
+    <>
+      {session ? (
+        <Form slug={slug} />
+      ) : (
         <div className="bg-muted/40 flex flex-col items-center justify-center gap-y-4 rounded-lg p-6">
           <p className="text-center font-medium">Join the discussion by signing in:</p>
           <SignIn callbackPath={`/${slug}#comments`} />
         </div>
-      ) : (
-        <Form slug={slug} />
       )}
 
-      {!closed && rootComments.length === 0 ? (
-        <div className="text-foreground/80 py-8 text-center text-lg font-medium tracking-tight">
-          Be the first to comment!
-        </div>
-      ) : (
+      {rootComments.length > 0 ? (
         <div className="space-y-6">
           {rootComments.map((comment: CommentWithUser) => (
             <Thread
@@ -57,8 +48,12 @@ const Comments = async ({ slug, closed = false }: { slug: string; closed?: boole
             />
           ))}
         </div>
+      ) : (
+        <div className="text-foreground/80 py-8 text-center text-lg font-medium tracking-tight">
+          Be the first to comment!
+        </div>
       )}
-    </Wrapper>
+    </>
   );
 };
 

components/layout/skip-nav.tsx

@@ -1,17 +0,0 @@
-import Button from "@/components/ui/button";
-
-export const SKIP_NAV_ID = "skip-nav";
-
-const SkipNavButton = () => {
-  return (
-    <Button
-      asChild
-      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-100 focus:inline-flex focus:px-4 focus:py-2"
-      variant="default"
-    >
-      <a href={`#${SKIP_NAV_ID}`}>Skip to content</a>
-    </Button>
-  );
-};
-
-export default SkipNavButton;