From e0999f701cd1834c3d940113cd8dd5247c5fe95f Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Fri, 19 Apr 2024 00:09:27 +0100
Subject: feature: Nested lists (#110). Fixes #62

* feature: Add support for nested lists

* prevent moving the parent to a subtree
---
 apps/web/components/ui/collapsible.tsx | 55 ++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 apps/web/components/ui/collapsible.tsx

(limited to 'apps/web/components/ui/collapsible.tsx')

diff --git a/apps/web/components/ui/collapsible.tsx b/apps/web/components/ui/collapsible.tsx
new file mode 100644
index 00000000..43f40402
--- /dev/null
+++ b/apps/web/components/ui/collapsible.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { ChevronRight, Triangle } from "lucide-react";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+function CollapsibleTriggerTriangle({
+  open,
+  className,
+}: {
+  open: boolean;
+  className?: string;
+}) {
+  return (
+    <CollapsibleTrigger asChild>
+      <Triangle
+        className={cn(
+          "fill-foreground",
+          !open ? "rotate-90" : "rotate-180",
+          className,
+        )}
+      />
+    </CollapsibleTrigger>
+  );
+}
+
+function CollapsibleTriggerChevron({
+  open,
+  className,
+}: {
+  open: boolean;
+  className?: string;
+}) {
+  return (
+    <CollapsibleTrigger asChild>
+      <ChevronRight
+        className={cn(!open ? "rotate-0" : "rotate-90", className)}
+      />
+    </CollapsibleTrigger>
+  );
+}
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleTriggerTriangle,
+  CollapsibleTriggerChevron,
+};
-- 
cgit v1.2.3-70-g09d2