Function BreadCrumbComponent

src/components/BreadCrumbComponent.tsx:16–126

({
  rest,
  course,
  fullCourseContent,
  courseContent,
  contentType,
}: {
  fullCourseContent: FullCourseContent[];
  rest: string[];
  course: any;
  contentType: any;
  courseContent: any;
})

import { Fragment, useMemo } from 'react';

export default function BreadCrumbComponent({
  rest,
  course,
  fullCourseContent,
  courseContent,
  contentType,
}: {
  fullCourseContent: FullCourseContent[];
  rest: string[];
  course: any;
  contentType: any;
  courseContent: any;
}) {
  const findChildContent = (contents: any, childId: any) => {
    for (const content of contents) {
      if (content.id === childId) {
        return content;
      } else if (content.children && content.children.length > 0) {
        const childContent: any = findChildContent(content.children, childId);
        if (childContent) {
          return childContent;
        }
      }
    }
    return undefined;
  };

  const generateBreadcrumbs = useMemo(() => {
    const breadcrumbs = [];

    for (let i = 0; i < rest.length; i++) {
      const childId = parseInt(rest[i], 10);

      const childContent = findChildContent(fullCourseContent, childId);

      if (childContent) {
        breadcrumbs.push(childContent);
      }
    }
    return breadcrumbs;
  }, [rest, fullCourseContent, courseContent, contentType]);

  return (
    <>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink className="text-sm text-blue-600" asChild>
              <Link href={'/'}>
                <Home className="size-4" />
              </Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            {generateBreadcrumbs.length > 0 ? (
              <BreadcrumbLink className="text-blue-600" asChild>
                <Link