working on site layout

Author: davidemioma

app/(dashboard)/_components/InviteBtn.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const InviteBtn = () => {
+  return <div>InviteBtn</div>;
+};
+
+export default InviteBtn;

app/(dashboard)/_components/Navbar.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import React from "react";
+import SearchInput from "./SearchInput";
+import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
+
+const Navbar = () => {
+  return (
+    <div className="flex items-center gap-4 p-5">
+      <div className="hidden lg:flex lg:flex-1">
+        <SearchInput />
+      </div>
+
+      <div className="block flex-1 lg:hidden">
+        <OrganizationSwitcher
+          hidePersonal
+          appearance={{
+            elements: {
+              rootBox: {
+                display: "flex",
+                width: "100%",
+                alignItems: "center",
+                justifyContent: "center",
+                maxWidth: "367px",
+              },
+              organizationSwitcherTrigger: {
+                width: "100%",
+                padding: "10px",
+                borderRadius: "8px",
+                border: "1px solid #E5E7EB",
+                backgroundColor: "white",
+                justifyContent: "space-between",
+                maxWidth: "367px",
+              },
+            },
+          }}
+        />
+      </div>
+
+      <UserButton />
+    </div>
+  );
+};
+
+export default Navbar;

app/(dashboard)/_components/SearchInput.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import qs from "query-string";
+import { Search, XIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Input } from "@/components/ui/input";
+
+const SearchInput = () => {
+  const router = useRouter();
+
+  const [value, setValue] = useState("");
+
+  const [debounceValue, setDebounceValue] = useState("");
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebounceValue(value);
+    }, 500);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [value]);
+
+  useEffect(() => {
+    const url = qs.stringifyUrl(
+      {
+        url: "/",
+        query: {
+          search: debounceValue,
+        },
+      },
+      { skipEmptyString: true, skipNull: true }
+    );
+
+    router.push(url);
+  }, [debounceValue, router]);
+
+  return (
+    <div className="relative w-full max-w-[520px] flex items-center gap-3">
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+
+      <Input
+        className="w-full px-9"
+        value={value}
+        placeholder="Search Boards..."
+        onChange={(e) => setValue(e.target.value)}
+      />
+
+      <XIcon
+        className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
+        onClick={() => setValue("")}
+      />
+    </div>
+  );
+};
+
+export default SearchInput;

app/(dashboard)/_components/sidebar/NewBtn.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import Hint from "@/components/Hint";
+import { PlusIcon } from "lucide-react";
+import { CreateOrganization } from "@clerk/nextjs";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+
+const NewBtn = () => {
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <div className="w-full aspect-square bg-white/20 flex items-center justify-center rounded-md opacity-75 hover:opacity-100 transition-opacity duration-150">
+          <Hint
+            label="Create Organization"
+            side="right"
+            align="start"
+            sideOffset={15}
+          >
+            <PlusIcon />
+          </Hint>
+        </div>
+      </DialogTrigger>
+
+      <DialogContent className="p-0 bg-transparent w-fit border-none">
+        <CreateOrganization />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default NewBtn;

app/(dashboard)/_components/sidebar/OrgItem.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import Hint from "@/components/Hint";
+import { useOrganization, useOrganizationList } from "@clerk/nextjs";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+type Props = {
+  id: string;
+  name: string;
+  imageUrl: string;
+};
+
+const OrgItem = ({ id, name, imageUrl }: Props) => {
+  const { organization } = useOrganization();
+
+  const { setActive } = useOrganizationList();
+
+  const isActive = organization?.id === id;
+
+  const onClick = () => {
+    if (!setActive) return;
+
+    setActive({ organization: id });
+  };
+
+  return (
+    <div className="w-full aspect-square">
+      <Hint label={name} side="right" align="start" sideOffset={15}>
+        <Avatar
+          className={cn(
+            "rounded-md opacity-75 hover:opacity-100 transition cursor-pointer overflow-hidden",
+            isActive && "opacity-100"
+          )}
+          onClick={onClick}
+        >
+          <AvatarImage src={imageUrl} />
+
+          <AvatarFallback>{name[0]}</AvatarFallback>
+        </Avatar>
+      </Hint>
+    </div>
+  );
+};
+
+export default OrgItem;

app/(dashboard)/_components/sidebar/OrgList.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import OrgItem from "./OrgItem";
+import { useOrganizationList } from "@clerk/nextjs";
+
+const OrgList = () => {
+  const { userMemberships } = useOrganizationList({
+    userMemberships: {
+      infinite: true,
+    },
+  });
+
+  if (userMemberships.data?.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul className="space-y-4">
+      {userMemberships.data?.map((mem) => (
+        <OrgItem
+          key={mem.organization.id}
+          id={mem.organization.id}
+          name={mem.organization.name}
+          imageUrl={mem.organization.imageUrl}
+        />
+      ))}
+    </ul>
+  );
+};
+
+export default OrgList;

app/(dashboard)/_components/sidebar/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import NewBtn from "./NewBtn";
+import OrgList from "./OrgList";
+
+const Sidebar = () => {
+  return (
+    <div className="fixed z-50 left-0 h-screen w-[60px] bg-blue-950 flex flex-col gap-4 text-white p-3">
+      <OrgList />
+
+      <NewBtn />
+    </div>
+  );
+};
+
+export default Sidebar;

app/(dashboard)/layout.tsx

@@ -0,0 +1,27 @@
+import Navbar from "./_components/Navbar";
+import Sidebar from "./_components/sidebar";
+import OrgSidebar from "@/components/OrgSidebar";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <main className="h-full">
+      <Sidebar />
+
+      <div className="pl-[60px] h-full">
+        <div className="h-full flex gap-3">
+          <OrgSidebar />
+
+          <div className="h-full flex-1">
+            <Navbar />
+
+            {children}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

app/page.tsx renamed to app/(dashboard)/page.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+type Props = {
+  children: React.ReactNode;
+  label: string;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  allignOffset?: number;
+};
+
+const Hint = ({
+  children,
+  label,
+  side,
+  align,
+  sideOffset,
+  allignOffset,
+}: Props) => {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={100}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+
+        <TooltipContent
+          className="text-white bg-black/75"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          alignOffset={allignOffset}
+        >
+          <p className="font-semibold capitalize">{label}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default Hint;