fork download
copy 
  1. import React from 'react'
  2.  
  3. import { cn } from "@/lib/utils"
  4. import Link from 'next/link';
  5.  
  6. export interface BreadcrumbProps {
  7.     className?: string,
  8.     path: string
  9. }
  10.  
  11. const Breadcrumb = async ({ className, path } : BreadcrumbProps) => {
  12.  
  13.     const progressivePath = await Promise.all(path.split('/').slice(1).map((_, index, array) => {
  14.         const uri = `/${array.slice(0, index + 1).join('/')}`
  15.         return fetch(uri).then(res => res.ok)
  16. }))
  17.  
  18.     const CapitalPath = path.split('/').slice(1).map(currentPath => currentPath.charAt(0).toUpperCase() + currentPath.slice(1))
  19.  
  20.     console.log(progressivePath)
  21.     console.log(CapitalPath)
  22.  
  23.     return (
  24.         <div className={cn("flex items-center space-x-2 text-md bg-slate-300 w-fit px-2 py-1 rounded-md", className)}>
  25.             {CapitalPath.map((path, index) => (
  26.                     <>
  27.                     {
  28.                         progressivePath[index] === '#' ? 
  29.                         <BreadcrumbItem key={index}>
  30.                             <BreadCrumbLink className="text-md" href='#'>{path}</BreadCrumbLink>
  31.                         </BreadcrumbItem>
  32.                         :
  33.                         <BreadcrumbItem key={index}>
  34.                             <BreadCrumbLink className="text-md underline underline-offset-1" href='#'>{path}</BreadCrumbLink>
  35.                         </BreadcrumbItem>
  36.                     }
  37.                     {
  38.                         index < CapitalPath.length - 1 ? 
  39.                         <BreadCrumbSeparator key={index}>
  40.                             {">"}
  41.                         </BreadCrumbSeparator> : null
  42.                     }
  43.                     </>
  44.             ))}
  45.         </div>
  46.     )
  47. }
  48.  
  49. const BreadcrumbItem = React.forwardRef<
  50.     HTMLDivElement, 
  51.     React.HTMLAttributes<HTMLDivElement>>
  52. (({ className, ...props}, ref) => (
  53.     <div
  54.     ref={ref}
  55.     className={cn("flex items-center space-x-2 text-md", className)}
  56.     {...props}
  57.     />
  58. ))
  59. BreadcrumbItem.displayName = "BreadcrumbItem"
  60.  
  61. const BreadCrumbLink = React.forwardRef<
  62.     React.ElementRef<typeof Link>,
  63.     React.ComponentPropsWithoutRef<typeof Link>
  64. >(({ className, href, ...props }, ref) => (
  65.     <Link
  66.     ref={ref}
  67.     href={href}
  68.     className={cn("text-md", className)}
  69.     {...props}
  70.     />
  71. ))
  72. BreadCrumbLink.displayName = "BreadCrumbLink"
  73.  
  74. const BreadCrumbSeparator = React.forwardRef<
  75.     HTMLDivElement,
  76.     React.HTMLAttributes<HTMLDivElement>
  77. >(({ className, ...props }, ref) => (
  78.     <div
  79.     ref={ref}
  80.     className={cn("text-md text-muted-foreground", className)}
  81.     {...props}
  82.     />
  83. ))
  84. BreadCrumbSeparator.displayName = "BreadCrumbSeparator"
  85.  
  86.  
  87. export default Breadcrumb
Runtime error #stdin #stdout #stderr 0.04s 16756KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
stderr
copy 
prog.js:1:0 SyntaxError: import declarations may only appear at top level of a module:
prog.js:1:0 import React from 'react'
prog.js:1:0 ^
https://ideone.com/eU4DwV
language:
JavaScript (SMonkey 60.2.3)
created:
2 years ago
visibility:
secret

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!