From d2021a5a9c82a3dc07b52d184e41407bb8f6f756 Mon Sep 17 00:00:00 2001
From: Paul Makles <me@insrt.uk>
Date: Thu, 27 Jul 2023 12:28:11 +0100
Subject: [PATCH] feat: various common elements incl. navigation

---
 components/common/ListCompactor.tsx     | 33 ++++++++++++
 components/common/NavigateBack.tsx      |  2 +-
 components/common/NavigationLinks.tsx   | 68 +++++++++++++++++++++++++
 components/common/NavigationToolbar.tsx | 56 ++++++++++++++++++++
 4 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 components/common/ListCompactor.tsx
 create mode 100644 components/common/NavigationLinks.tsx
 create mode 100644 components/common/NavigationToolbar.tsx

diff --git a/components/common/ListCompactor.tsx b/components/common/ListCompactor.tsx
new file mode 100644
index 0000000..286dccb
--- /dev/null
+++ b/components/common/ListCompactor.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { FC, useState } from "react";
+import { Button } from "../ui/button";
+
+export function ListCompactor<T>({
+  data,
+  Component,
+}: {
+  data: T[];
+  Component: FC<{ item: T }>;
+}) {
+  const [limit, setLimit] = useState(5);
+
+  return (
+    <>
+      {data.length === 0 && (
+        <h2 className="text-sm text-center pb-2 text-gray-400">Empty List</h2>
+      )}
+      {data.slice(0, limit).map((item, index) => (
+        <Component key={index} item={item} />
+      ))}
+      {limit < data.length && (
+        <Button
+          variant="secondary"
+          onClick={() => setLimit((limit) => limit + 5)}
+        >
+          Show more
+        </Button>
+      )}
+    </>
+  );
+}
diff --git a/components/common/NavigateBack.tsx b/components/common/NavigateBack.tsx
index b8ede47..73390c7 100644
--- a/components/common/NavigateBack.tsx
+++ b/components/common/NavigateBack.tsx
@@ -7,7 +7,7 @@ export function NavigateBack() {
   const router = useRouter();
 
   return (
-    <Button variant="secondary" onClick={() => router.back()}>
+    <Button variant="outline" onClick={() => router.back()}>
       Go back
     </Button>
   );
diff --git a/components/common/NavigationLinks.tsx b/components/common/NavigationLinks.tsx
new file mode 100644
index 0000000..32d871d
--- /dev/null
+++ b/components/common/NavigationLinks.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link";
+import { buttonVariants } from "../ui/button";
+import {
+  Eye,
+  Globe2,
+  Home,
+  ScrollText,
+  Search,
+  Siren,
+  Sparkles,
+  TrendingUp,
+} from "lucide-react";
+
+export function NavigationLinks() {
+  return (
+    <>
+      <Link
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="/panel"
+      >
+        <Home className="h-4 w-4" />
+      </Link>
+      <Link
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="/panel/search"
+      >
+        <Search className="h-4 w-4" />
+      </Link>
+      <Link
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="/panel/inspect"
+      >
+        <Eye className="h-4 w-4" />
+      </Link>
+      <Link
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="/panel/reports"
+      >
+        <Siren className="h-4 w-4" />
+      </Link>
+      <Link
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="/panel/discover"
+      >
+        <Globe2 className="h-4 w-4" />
+      </Link>
+      <Link
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="/panel/audit"
+      >
+        <ScrollText className="h-4 w-4" />
+      </Link>
+      <a
+        target="_blank"
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="https://monitor.revolt.chat/d/fb0383b2-86c8-4c9c-b401-0af8ce9869af/global-stats?orgId=1"
+      >
+        <TrendingUp className="h-4 w-4" />
+      </a>
+      <Link
+        className={buttonVariants({ variant: "outline", size: "icon" })}
+        href="/panel/sparkle"
+      >
+        <Sparkles className="h-4 w-4" />
+      </Link>
+    </>
+  );
+}
diff --git a/components/common/NavigationToolbar.tsx b/components/common/NavigationToolbar.tsx
new file mode 100644
index 0000000..6d8d0cf
--- /dev/null
+++ b/components/common/NavigationToolbar.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "../ui/button";
+import { ArrowLeft, Star } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+
+export function NavigationToolbar({ children }: { children: string }) {
+  const router = useRouter();
+  const savedAsBookmark = false;
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button variant="outline" size="icon" onClick={() => router.back()}>
+        <ArrowLeft className="h-4 w-4" />
+      </Button>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="icon">
+            <Star
+              className="h-4 w-4"
+              fill={savedAsBookmark ? "black" : "transparent"}
+            />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80">
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <h4 className="font-medium leading-none">Bookmark</h4>
+              <p className="text-sm text-muted-foreground">
+                You&apos;ve saved this page for later.
+              </p>
+            </div>
+            <div className="grid gap-2">
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="description">Description</Label>
+                <Input id="description" className="col-span-2 h-8" />
+              </div>
+              {savedAsBookmark ? (
+                <>
+                  <Button variant="secondary">Update</Button>
+                  <Button variant="destructive">Remove</Button>
+                </>
+              ) : (
+                <Button variant="secondary">Save</Button>
+              )}
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+      <h2 className="text-2xl">{children}</h2>
+    </div>
+  );
+}