big update new layout

2026-05-19 18:00:19 +07:00
parent e7c8322c63
commit f5514b8fb5
46 changed files with 1032 additions and 702 deletions
@@ -0,0 +1,69 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+
+interface BreadcrumbPath {
+  name: string;
+  href: string;
+}
+
+interface StickyHeaderProps {
+  header: string;
+  paths?: BreadcrumbPath[];
+}
+
+export default function StickyHeader({ header, paths }: StickyHeaderProps) {
+  return (
+    <div className="sticky top-0 z-40 bg-gradient-to-b from-gray-50 via-gray-50/60 to-transparent pb-8 pt-8 backdrop-blur-xs dark:from-zinc-950 dark:via-zinc-950/60">
+      <div className="flex justify-between items-end">
+        <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+        {header}
+      </h1>
+        {paths && paths.length > 0 && (
+        <nav className="mb-3">
+          <ol className="flex flex-wrap items-center gap-1.5 text-sm">
+            <li>
+              <Link
+                className="inline-flex items-center gap-1.5 text-gray-500 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-white/90"
+                href="/"
+              >
+                Home
+              </Link>
+            </li>
+
+            <span className="text-gray-400 dark:text-zinc-600">
+              <svg width="12" height="12" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="stroke-current" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" />
+              </svg>
+            </span>
+
+            {paths.map((path, index) => (
+              <React.Fragment key={index}>
+                <li>
+                  <Link
+                    className="inline-flex items-center gap-1.5 text-gray-500 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-white/90"
+                    href={path.href}
+                  >
+                    {path.name}
+                  </Link>
+                </li>
+                <span className="text-gray-400 dark:text-zinc-600">
+                  <svg width="12" height="12" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="stroke-current" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" />
+                  </svg>
+                </span>
+              </React.Fragment>
+            ))}
+
+            <li className="font-medium text-gray-800 dark:text-white/90 truncate max-w-[200px]">
+              {header}
+            </li>
+          </ol>
+        </nav>
+      )}
+      </div>
+      
+    </div>
+  );
+}