push API sandbox

2025-04-18 23:33:15 +07:00
parent 6d819348fa
commit e0462b95e7
19 changed files with 22 additions and 131 deletions
--- a/components/sublink.tsx
+++ b/components/sublink.tsx
@@ -0,0 +1,85 @@
+import { EachRoute } from "@/lib/routes-config";
+import Anchor from "./anchor";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { SheetClose } from "@/components/ui/sheet";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+
+export default function SubLink({
+  title,
+  href,
+  items,
+  noLink,
+  level,
+  isSheet,
+}: EachRoute & { level: number; isSheet: boolean }) {
+  const path = usePathname();
+  const [isOpen, setIsOpen] = useState(level == 0);
+
+  useEffect(() => {
+    if (path == href || path.includes(href)) setIsOpen(true);
+  }, [href, path]);
+
+  const Comp = (
+    <Anchor activeClassName="text-primary font-medium" href={href}>
+      {title}
+    </Anchor>
+  );
+
+  const titleOrLink = !noLink ? (
+    isSheet ? (
+      <SheetClose asChild>{Comp}</SheetClose>
+    ) : (
+      Comp
+    )
+  ) : (
+    <h4 className="font-medium sm:text-sm text-primary">{title}</h4>
+  );
+
+  if (!items) {
+    return <div className="flex flex-col">{titleOrLink}</div>;
+  }
+
+  return (
+    <div className="flex flex-col gap-1 w-full">
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CollapsibleTrigger className="w-full pr-5">
+          <div className="flex items-center justify-between cursor-pointer w-full">
+            {titleOrLink}
+            <span>
+              {!isOpen ? (
+                <ChevronRight className="h-[0.9rem] w-[0.9rem]" />
+              ) : (
+                <ChevronDown className="h-[0.9rem] w-[0.9rem]" />
+              )}
+            </span>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div
+            className={cn(
+              "flex flex-col items-start sm:text-sm dark:text-stone-300/85 text-stone-800 ml-0.5 mt-2.5 gap-3",
+              level > 0 && "pl-4 border-l ml-1.5"
+            )}
+          >
+            {items?.map((innerLink) => {
+              const modifiedItems = {
+                ...innerLink,
+                href: `${href + innerLink.href}`,
+                level: level + 1,
+                isSheet,
+              };
+              return <SubLink key={modifiedItems.href} {...modifiedItems} />;
+            })}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}