Merge pull request #101 from DemocracyDevelopers/feature/yilin2

Feature/yilin2
DemocracyDevelopers · Oct 14, 2024 · 49940dd · 49940dd
2 parents 9eec445 + 5bc4a96
commit 49940dd
Show file tree

Hide file tree

Showing 20 changed files with 986 additions and 711 deletions.
diff --git a/app/tutorial/assertion/page.tsx b/app/tutorial/assertion/page.tsx
@@ -1,14 +1,22 @@
-// tutorial/assertion/page.tsx
 "use client";
 
 import React, { useState } from "react";
 import AssertionContent from "../components/assertion-content"; // Adjust the path if necessary
 import SidebarWithSearch from "../components/SidebarWithSearch"; // Import the SidebarWithSearch component
+import Breadcrumbs from "../components/Breadcrumbs"; // 导入 Breadcrumbs 组件
+import MarginContainer from "../components/MarginContainer";
+import TermsAndPrivacy from "../../upload/components/terms-and-privacy";
 
 const AssertionPage: React.FC = () => {
   const [sidebarWidth, setSidebarWidth] = useState(256);
   const [collapsed, setCollapsed] = useState(false);
 
+  // 设置面包屑路径，只显示到一级标题
+  const breadcrumbPaths = [
+    { name: "Home", href: "/" },
+    { name: "Assertions for IRV winners", href: "/tutorial/assertion" },
+  ];
+
   return (
     <div className="flex bg-white">
       {/* Sidebar */}
@@ -21,20 +29,15 @@ const AssertionPage: React.FC = () => {
 
       {/* Main content */}
       <main className="flex-grow overflow-y-auto">
+        {/* Breadcrumbs 放置在侧边栏右侧 */}
+        {/* Use MarginContainer for Breadcrumbs */}
+        <MarginContainer collapsed={collapsed} sidebarWidth={sidebarWidth}>
+          <Breadcrumbs paths={breadcrumbPaths} />
+        </MarginContainer>
+        {/* Assertion content */}
         <AssertionContent sidebarWidth={sidebarWidth} collapsed={collapsed} />
-
         {/* Footer Section */}
-        <p className="p-4 text-sm text-gray-500 text-center border-t mt-8">
-          By sharing your files or using our service, you agree to our{" "}
-          <a href="#" className="text-blue-500 hover:underline">
-            Terms of Service
-          </a>{" "}
-          and{" "}
-          <a href="#" className="text-blue-500 hover:underline">
-            Privacy Policy
-          </a>
-          .
-        </p>
+        <TermsAndPrivacy /> {/* Reusing the TermsAndPrivacy component */}
       </main>
     </div>
   );

diff --git a/app/tutorial/components/Breadcrumbs.tsx b/app/tutorial/components/Breadcrumbs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronRight } from "lucide-react"; // 或其他图标库
+
+interface BreadcrumbsProps {
+  paths: { name: string; href: string }[];
+}
+
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ paths }) => {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      className="flex items-center space-x-2 text-sm"
+    >
+      {paths.map((path, index) => (
+        <span key={index} className="flex items-center">
+          <Link
+            href={path.href}
+            className={`hover:underline ${
+              index === paths.length - 1 ? "text-blue-600" : "text-gray-600"
+            }`}
+          >
+            {index === 0 ? (
+              <span className="flex items-center">
+                {/* 主页的图标 */}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 4v-4a1 1 0 011-1h2a1 1 0 011 1v4m-6 4h6"
+                  />
+                </svg>
+              </span>
+            ) : (
+              path.name
+            )}
+          </Link>
+          {index < paths.length - 1 && (
+            <ChevronRight className="mx-2 text-gray-400" />
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+};
+
+export default Breadcrumbs;
diff --git a/app/tutorial/components/MarginContainer.tsx b/app/tutorial/components/MarginContainer.tsx
@@ -0,0 +1,29 @@
+// components/MarginContainer.tsx
+
+import React from "react";
+
+interface MarginContainerProps {
+  collapsed: boolean;
+  sidebarWidth: number;
+  children: React.ReactNode;
+}
+
+const MarginContainer: React.FC<MarginContainerProps> = ({
+  collapsed,
+  sidebarWidth,
+  children,
+}) => {
+  return (
+    <div
+      className="p-4"
+      style={{
+        marginLeft: collapsed ? 0 : sidebarWidth, // Adjust position based on sidebar state
+        transition: "margin-left 0.3s ease",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default MarginContainer;