feat: init

apps/web/core/components/auth-screens/project/join-project.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image";
+import { useParams } from "next/navigation";
+import { ClipboardList } from "lucide-react";
+// plane imports
+import { Button } from "@plane/propel/button";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// assets
+import Unauthorized from "@/public/auth/unauthorized.svg";
+
+type Props = {
+  projectId?: string;
+  isPrivateProject?: boolean;
+};
+
+export const JoinProject: React.FC<Props> = (props) => {
+  const { projectId, isPrivateProject = false } = props;
+  // states
+  const [isJoiningProject, setIsJoiningProject] = useState(false);
+  // store hooks
+  const { joinProject } = useUserPermissions();
+  const { fetchProjectDetails } = useProject();
+
+  const { workspaceSlug } = useParams();
+
+  const handleJoin = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIsJoiningProject(true);
+
+    joinProject(workspaceSlug.toString(), projectId.toString())
+      .then(() => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()))
+      .finally(() => setIsJoiningProject(false));
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
+      <div className="h-44 w-72">
+        <Image src={Unauthorized} height="176" width="288" alt="JoinProject" />
+      </div>
+      <h1 className="text-xl font-medium text-custom-text-100">
+        {!isPrivateProject ? `You are not a member of this project yet.` : `You are not a member of this project.`}
+      </h1>
+
+      <div className="w-full max-w-md text-base text-custom-text-200">
+        <p className="mx-auto w-full text-sm md:w-3/4">
+          {!isPrivateProject
+            ? `Click the button below to join it.`
+            : `This is a private project. \n We can't tell you more about this project to protect confidentiality.`}
+        </p>
+      </div>
+      {!isPrivateProject && (
+        <div>
+          <Button
+            variant="primary"
+            prependIcon={<ClipboardList color="white" />}
+            loading={isJoiningProject}
+            onClick={handleJoin}
+          >
+            {isJoiningProject ? "Taking you in" : "Click to join"}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};