interview badge

Prototypr · Jun 9, 2024 · 0da5374 · 0da5374
1 parent 112ab16
commit 0da5374
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 8 deletions.
diff --git a/components/Dashboard/PostCard.jsx b/components/Dashboard/PostCard.jsx
@@ -95,7 +95,7 @@ const PostCard = ({ post, refetch, user, edit }) => {
               </p>
               <div className="my-auto text-sm text-gray-500">{` · `}</div>
               {post.type == "article" && post.tools?.length ? (
-                <div className="text-[11px] font-semibold my-auto bg-yellow-100 px-3 py-1 uppercase  rounded-full text-yellow-900">
+                <div className="text-[11px] font-semibold my-auto bg-pink-100 px-3 py-1 uppercase  rounded-full text-pink-900">
                   Interview
                 </div>
               ) : post.type ? (

diff --git a/components/EditorNav.js b/components/EditorNav.js
@@ -12,7 +12,7 @@ const NavigationMenuMobile = dynamic(() => import("./navbar-menu-mobile"), {
   ssr: false,
 });
 
-export default function EditorNav({ activeNav, postStatus }) {
+export default function EditorNav({ activeNav, postStatus, tool, post }) {
   const { user, isLoading } = useUser({
     redirectIfFound: false,
   });
@@ -94,7 +94,7 @@ export default function EditorNav({ activeNav, postStatus }) {
             <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
               <Link href="/" as="/">
                 <div
-                  className={`flex-shrink-0 flex items-center cursor-pointer transition transition-all duration-300 ease-in-out`}
+                  className={`flex-shrink-0  flex items-center cursor-pointer transition transition-all duration-300 ease-in-out`}
                 >
                   <img
                     className="lg:block h-8 w-auto"
@@ -104,6 +104,13 @@ export default function EditorNav({ activeNav, postStatus }) {
                   />
                 </div>
               </Link>
+              {tool ? (
+                <div className="my-auto ml-3">
+                  <div className="p-2 py-0.5 text-xs bg-pink-100 text-pink-900 rounded-full border border-pink-200">
+                    Interview
+                  </div>
+                </div>
+              ) : null}
               <div className="my-auto ml-3">{statusComponent}</div>
               {/* Undo/redo */}
               <div id="undoredo-container"></div>
@@ -150,6 +157,7 @@ export default function EditorNav({ activeNav, postStatus }) {
           </div>
         </div>
       </>
+
     </div>
   );
 }
diff --git a/pages/toolbox/post/[id]/interview/[slug].js b/pages/toolbox/post/[id]/interview/[slug].js
@@ -12,6 +12,7 @@ import useUpdate from "@/components/Editor/editorHooks/editPost/useUpdate";
 import { useConfirmTabClose } from "@/components/Editor/useConfirmTabClose";
 import EditorNav from "@/components/EditorNav";
 import { addTwitterScript } from "@/components/Editor/editorHooks/libs/addTwitterScript";
+import { getToolById } from "@/lib/api";
 
 const Spinner = dynamic(() => import("@/components/atom/Spinner/Spinner"));
 
@@ -26,7 +27,7 @@ const Spinner = dynamic(() => import("@/components/atom/Spinner/Spinner"));
  * @param {*} props
  * @returns
  */
-export default function EditPostPage(props) {
+export default function EditPostPage({ tool }) {
   const { user } = useUser({
     redirectTo: "/onboard",
     redirectIfFound: false,
@@ -78,7 +79,7 @@ export default function EditPostPage(props) {
       });
 
       //update the postObject from useLoad hook
-      if(updatedPostObject) {
+      if (updatedPostObject) {
         setPostObject(updatedPostObject);
         //confirm no unsaved changes
         setHasUnsavedChanges(false);
@@ -102,7 +103,7 @@ export default function EditPostPage(props) {
         postObject: postObject,
       });
 
-      if(updatedPostObject) {
+      if (updatedPostObject) {
         setPostObject(updatedPostObject);
       }
 
@@ -129,9 +130,26 @@ export default function EditPostPage(props) {
 
   return (
     <>
-      <EditorNav postStatus={postStatus} />
+      <EditorNav tool={tool} post={postObject} postStatus={postStatus} />
 
       <div className="h-full w-full">
+        {tool?.attributes?.logo?.data?.attributes?.url ? (
+          <div className="mx-auto mt-[72px] -mb-16 max-w-[44rem] mx-auto text-sm px-2 py-2  bg-white border border-1 border-gray-200/70 rounded-xl">
+            <div className="flex ">
+              <img
+                className="lg:block h-8 w-auto shadow rounded-lg border border-gray-50"
+                data-gumlet="false"
+                src={tool?.attributes?.logo?.data?.attributes?.url}
+                alt="Prototypr Logo"
+              />
+              <div className="my-auto ml-3">
+                <div className="text-base font-medium tracking-tight text-gray-800">
+                  {tool?.attributes?.title}: Creator Story
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : null}
         <div id="editor-container" className="w-full h-full mx-auto  relative">
           {/* {!user && <Fallback />} */}
 
@@ -173,3 +191,29 @@ export default function EditPostPage(props) {
     </>
   );
 }
+
+export async function getStaticProps({ params, preview = null, locale }) {
+  let data;
+  try {
+    data = await getToolById(params.id, preview);
+  } catch (error) {
+    console.error("Failed to get tool:", error);
+    return {
+      notFound: true,
+    };
+  }
+
+  let tool = data?.posts?.data[0] || null;
+  return {
+    props: {
+      tool: tool || null,
+    },
+  };
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: "blocking",
+  };
+}
diff --git a/pages/toolbox/post/[id]/interview/index.js b/pages/toolbox/post/[id]/interview/index.js
@@ -114,7 +114,7 @@ export default function InterviewEditor({ tool }) {
 
   return (
     <>
-      <EditorNav postStatus={postStatus} />
+      <EditorNav tool={tool} postStatus={postStatus} />
 
       <div className="h-full w-full" id="editor-container">
         <div className="w-full h-full mx-auto  relative">