🔄 update type of children prop in CategoryLayout from ReactNode to JS…

…X.Element and improve variable naming for clarity
damien-schneider · Dec 13, 2024 · f3b09d2 · f3b09d2
1 parent 40f883e
commit f3b09d2
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/apps/website/src/app/(site)/[section]/[category]/layout.tsx b/apps/website/src/app/(site)/[section]/[category]/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import type { ReactNode } from "react";
+import type { JSX } from "react";
 import { NEXT_PUBLIC_SITE_URL } from "#/src/lib/site.const";
 import { findCategoryBySlug } from "#/src/utils/section-category-components-utils/find-category-by-slug";
 import { findSectionBySlug } from "#/src/utils/section-category-components-utils/find-section-by-slug";
@@ -62,36 +62,36 @@ export default async function CategoryLayout({
   params,
   children,
 }: {
-  children: ReactNode;
+  children: JSX.Element;
   params: Promise<{
     section: string;
     category: string;
   }>;
 }) {
   const { section: sectionParam, category: categoryParam } = await params;
 
-  const section = findSectionBySlug(sectionParam);
-  if (!section) {
+  const sectionInList = findSectionBySlug(sectionParam);
+  if (!sectionInList) {
     return notFound();
   }
-  const category = findCategoryBySlug(section, categoryParam);
-  if (!category) {
+  const categoryInList = findCategoryBySlug(sectionInList, categoryParam);
+  if (!categoryInList) {
     return notFound();
   }
   return (
-    <>
+    <div>
       <Head>
         <Link
-          href={`${NEXT_PUBLIC_SITE_URL}/${section.slug}/${category.slug}`}
+          href={`${NEXT_PUBLIC_SITE_URL}/${sectionInList.slug}/${categoryInList.slug}`}
           key="canonical"
           rel="canonical"
         />
         <meta content="all" name="robots" />
       </Head>
       <h1 className="bg-gradient-to-b from-black to-black/40 dark:from-white dark:to-white/10 bg-clip-text font-medium text-transparent text-3xl sm:text-5xl inline tracking-tighter">
-        {category.name} components
+        {categoryInList.name} components
       </h1>
       {children}
-    </>
+    </div>
   );
 }