style: refine shared UI primitives and management flows

src/components/app-breadcrumb.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import {
   Breadcrumb,
@@ -27,7 +28,9 @@ export function BreadcrumbBasic() {
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          <BreadcrumbLink asChild>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
         </BreadcrumbItem>
         {segments.length > 0 && <BreadcrumbSeparator />}
 
@@ -44,8 +47,8 @@ export function BreadcrumbBasic() {
                 {isLast ? (
                   <BreadcrumbPage>{formatSegment(segment)}</BreadcrumbPage>
                 ) : (
-                  <BreadcrumbLink href={href}>
-                    {formatSegment(segment)}
+                  <BreadcrumbLink asChild>
+                    <Link href={href}>{formatSegment(segment)}</Link>
                   </BreadcrumbLink>
                 )}
               </BreadcrumbItem>