notifications

Prototypr · Jun 18, 2024 · 1b2002f · 1b2002f
1 parent ad60dc8
commit 1b2002f
Show file tree

Hide file tree

Showing 26 changed files with 1,001 additions and 190 deletions.
diff --git a/app/dashboard/drafts/page.js b/app/dashboard/drafts/page.js
@@ -50,7 +50,7 @@ export default async function AccountPage() {
         {/* {userData?.user?.id} */}
         <div
           className="pb-20 mx-auto px-2 sm:px-6 lg:px-8 w-full"
-          style={{ maxWidth: 1200 }}
+          style={{ maxWidth: 840 }}
         >
           <div className="flex flex-row justify-between items-baseline mt-3">
             <h1 className="my-3 text-3xl font-semibold">Your posts</h1>

diff --git a/app/dashboard/published/page.js b/app/dashboard/published/page.js
@@ -40,7 +40,7 @@ export default async function AccountPage() {
         {/* {userData?.user?.id} */}
         <div
           className="pb-20 mx-auto px-2 sm:px-6 lg:px-8 w-full"
-          style={{ maxWidth: 1200 }}
+          style={{ maxWidth: 840 }}
         >
           <div className="flex flex-row justify-between items-baseline mt-3">
             <h1 className="my-3 text-3xl font-semibold">Your posts</h1>

diff --git a/app/dashboard/tagged/page.js b/app/dashboard/tagged/page.js
@@ -39,7 +39,7 @@ export default async function AccountPage() {
         {/* {userData?.user?.id} */}
         <div
           className="pb-20 mx-auto px-2 sm:px-6 lg:px-8 w-full"
-          style={{ maxWidth: 1200 }}
+          style={{ maxWidth: 840 }}
         >
           <div className="flex flex-row justify-between items-baseline mt-3">
             <h1 className="my-3 text-3xl font-semibold">Your posts</h1>

diff --git a/app/notifications/page.js b/app/notifications/page.js
@@ -0,0 +1,65 @@
+// import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
+// import { cookies } from 'next/headers'
+
+import { fetchUser } from "../actions";
+import Layout from "@/components/new-index/layoutForApp";
+// import Layout from "../../layout";
+// import { redirect } from 'next/navigation'
+// import AccountPageWrapper from './pageWrapper'
+import { HOME_OG_IMAGE_URL } from "@/lib/constants";
+import Dashboard from "@/components/Dashboard/Dashboard";
+import Navigation from "@/components/Dashboard/navigation";
+import NotificationsList from "@/components/Notifications/NotificationsList";
+import { getCssText } from "stitches.config";
+
+export const metadata = {
+  title: "Notifications | Prototypr",
+  description: "Your notifications on Prototypr",
+  image: "",
+  canonical: "https://prototypr.io/notifications",
+  url: "https://prototypr.io/notifications",
+  openGraph: {
+    url: "https://prototypr.io/notifications",
+    title: "Notifications | Prototypr",
+    description:
+      "Your notifications on Prototypr",
+    images: [{ url: HOME_OG_IMAGE_URL }],
+    site_name: "Prototypr",
+  },
+  twitter: {
+    handle: "@prototypr",
+    site: "@prototypr",
+    cardType: "summary_large_image",
+  },
+  favicon:{
+    appleTouchIcon: "favicon/apple-touch-icon.png",
+    favicon32: "favicon/favicon-32x32.png",
+    favicon16: "favicon/favicon-16x16.png",
+    siteManifest: "favicon/site.webmanifest",
+    msTileColor: "#da532c",
+    themeColor: "#ffffff",
+
+  }
+};
+
+export default async function NotificationsPage() {
+  const userData = await fetchUser();
+
+  return (
+    <Layout sessionUser={userData?.user?.id} background={"#fbfcff"}>
+      <div className="flex flex-col overflow-y-auto pt-[96px] mx-auto w-full">
+        {/* {userData?.user?.id} */}
+        <div
+          className="pb-20 mx-auto px-2 sm:px-6 lg:px-8 w-full"
+          style={{ maxWidth: 800 }}
+        >
+          <div className="flex flex-row justify-between items-baseline mt-3">
+            <h1 className="my-3 text-3xl font-semibold">Notifications</h1>
+          </div>
+          <NotificationsList />
+        </div>
+        {/* <AccountPageWrapper userData={userData}/> */}
+      </div>
+    </Layout>
+  );
+}
diff --git a/components/InterviewDialog.js b/components/InterviewDialog.js
@@ -43,7 +43,7 @@ const InterviewDialog = ({
                     src={tool?.attributes?.logo?.data?.attributes?.url}
                     className="w-20 h-20 mx-auto rounded-2xl shadow-lg "
                   />
-                  <h2 className="text-white font-medium mt-1 text-xl tracking-tight drop-shadow-md">
+                  <h2 className="text-white text-center font-medium mt-1 text-xl tracking-tight drop-shadow-md">
                     {tool.attributes?.title}
                   </h2>
                 </div>

diff --git a/components/Navbar/NavbarApp.js b/components/Navbar/NavbarApp.js
@@ -185,9 +185,9 @@ const Navbar = ({
                   <WMButton />
                 </div> */}
 
-              <NavigationMenu>
-                <NavigationMenuList>
-                  <LocationMenu
+              <NavigationMenu className="relative flex justify-center w-auto z-10">
+              <NavigationMenuList className="flex justify-center p-[4px] ronded-[6px] list-none">
+              <LocationMenu
                     user={user}
                     sessionUser={sessionUser}
                     hideLocaleSwitcher={hideLocaleSwitcher}

diff --git a/components/Navbar/UserMenu.jsx b/components/Navbar/UserMenu.jsx
@@ -53,14 +53,14 @@ const UserMenu = ({ user, userLoading, sessionUser }) => {
             <div className="bg-gray-200 hover:shadow border border-1 ml-2 rounded-full my-auto w-8 h-8 cursor-pointer"></div>
           ) : (
             <div className="hidden lg:flex">
-              <Link className="my-auto" href="/onboard?signin=true">
+              {/* <Link className="my-auto" href="/onboard?signin=true">
                 <div className="flex cursor-pointer text-gray-700 text-sm mr-4">
                   <div className="my-auto font-medium">Log in</div>
                 </div>
-              </Link>
+              </Link> */}
               <Link href="/onboard">
               <Button className="text-sm bg-blue-600 hover:bg-blue-500 rounded-xl" variant={"confirmRounded"}>
-              Sign up
+              Sign in
             </Button>
             </Link>
             </div>

diff --git a/components/Navbar/parts/ActiveIconButtonLink.js b/components/Navbar/parts/ActiveIconButtonLink.js
@@ -0,0 +1,24 @@
+import { usePathname } from "next/navigation";
+import { useRouter } from "next/navigation";
+import IconButton from "@/components/Primitives/IconButton";
+
+const ActiveIconButtonLink = ({ children, href }) => {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const handleClick = e => {
+    e.preventDefault();
+    router.push(href);
+  };
+
+  return (
+    <a href={href} onClick={handleClick}>
+      <IconButton
+        className={`${pathname == href ? "!bg-blue-100 !text-blue-700" : "!bg-transparent !text-gray-800"} flex flex-col text-center align-center rounded-[4px] justify-center outline-none !border-none !my-auto !cursor-pointer h-[28px] w-[28px] !shadow-none !hover:bg-gray-50 !hover:text-gray-900 !hover:shadow-none !hover:border-none !hover:outline-none`}
+      >
+        {children}
+      </IconButton>
+    </a>
+  );
+};
+export default ActiveIconButtonLink;
diff --git a/components/Navbar/parts/LocationMenu.jsx b/components/Navbar/parts/LocationMenu.jsx
@@ -1,12 +1,8 @@
 import React from "react";
 import dynamic from "next/dynamic";
-import Button from "../../Primitives/Button";
-
-import Link from "next/link";
 
 import {
   NavigationMenuItem,
-  NavigationMenuLink,
 } from "@/components/Primitives/Navigation";
 
 const LocaleSwitcher = dynamic(() => import("../../Locale/LocaleSwitcher"), {
@@ -15,14 +11,16 @@ const LocaleSwitcher = dynamic(() => import("../../Locale/LocaleSwitcher"), {
 
 import { useIntl } from "react-intl";
 import NewPostDialog from "./NewPostDialog";
+import { BellIcon } from "@/components/icons";
+import ActiveIconButtonLink from "./ActiveIconButtonLink";
 
 export const LocationMenu = ({
   collapsed,
   user,
   hideLocaleSwitcher,
   editor,
   showWriteButton,
-  sessionUser
+  sessionUser,
 }) => {
   const intl = useIntl();
   const title3 = intl.formatMessage({ id: "navbar.menu.title3" });
@@ -31,7 +29,7 @@ export const LocationMenu = ({
     <>
       {/* {!hideLocaleSwitcher && <LocaleSwitcher showWriteButton={showWriteButton} collapsed={collapsed} />} */}
 
-      {((!user || !user?.isLoggedIn ) && !sessionUser)? (
+      {(!user || !user?.isLoggedIn) && !sessionUser ? (
         <NavigationMenuItem
           className={`hidden md:block md:flex md:flex-col md:justify-center`}
         >
@@ -46,7 +44,7 @@ export const LocationMenu = ({
           <NavigationMenuItem
             className={`hiddenlg:block lg:flex lg:flex-col lg:justify-center mr-2`}
           >
-            <NewPostDialog/>
+            <NewPostDialog />
             {/* <Link href="/write">
               <div className="flex text-gray-700 text-sm mr-3">
                   <NotePencil size={22} className="mr-1.5" />
@@ -56,6 +54,11 @@ export const LocationMenu = ({
           </NavigationMenuItem>
         )
       )}
+      <div className="mr-3">
+        <ActiveIconButtonLink href="/notifications">
+          <BellIcon className={'mx-auto'} size={22} />
+        </ActiveIconButtonLink>
+      </div>
     </>
   );
 };

diff --git a/components/Navbar/parts/MenuItemsApp.js b/components/Navbar/parts/MenuItemsApp.js
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 import React from "react";
 import { keyframes } from "@stitches/react";
 import { styled } from "../../../stitches.config";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { CaretDownIcon } from "@radix-ui/react-icons";
 import { indigo, mauve, green, teal } from "@radix-ui/colors";
 import Link from "next/link";
-import { useRouter } from 'next/navigation'
-import { usePathname } from 'next/navigation'
+import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 
 import { FormattedMessage, useIntl } from "react-intl";
 import { DotsThree } from "@/components/icons";
@@ -112,6 +112,7 @@ const CustomTrigger = ({ children, to, ...props }) => {
       }}
     >
       <StyledTrigger
+        className="unset bg-transparent flex justify-between align-center py-[8px] px-[12px] outline-none user-select-none line-[1]"
         onPointerMove={event => event.preventDefault()}
         onPointerLeave={event => {
           event.preventDefault();
@@ -134,31 +135,36 @@ const StyledCaret = styled(CaretDownIcon, {
   },
 });
 
-
 const StyledTriggerWithCaret = React.forwardRef(
   ({ children, ...props }, forwardedRef) => {
-    const pathname =usePathname();
+    const pathname = usePathname();
 
     let isActive = Boolean(pathname == props.href);
 
     if (
       props.href == "toolbox" &&
       (pathname.indexOf("/toolbox") > -1 ||
-      pathname.indexOf("/prototyping") > -1)
+        pathname.indexOf("/prototyping") > -1)
     ) {
       isActive = true;
     }
     if (
       props.href == "articles" &&
-      (pathname.indexOf("/posts") > -1 ||
-        pathname.indexOf("/topics") > -1)
+      (pathname.indexOf("/posts") > -1 || pathname.indexOf("/topics") > -1)
     ) {
       isActive = true;
     }
     return (
       <CustomTrigger active={isActive} {...props} ref={forwardedRef}>
         {children}
-        {props.showCaret !== false ? <StyledCaret aria-hidden /> : ""}
+        {props.showCaret !== false ? (
+          <StyledCaret
+            className="relative top-[1] text-blue-500 my-auto"
+            aria-hidden
+          />
+        ) : (
+          ""
+        )}
       </CustomTrigger>
     );
   }
@@ -257,7 +263,7 @@ const NextLink = ({ children, ...props }) => {
 
   return (
     <Link href={props.href} target={target} passHref>
-      <StyledLink asChild>
+      <StyledLink className="px-[12px] py-[8px]" asChild>
         <span
           style={props.css}
           className={
@@ -459,8 +465,8 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
     <div
       className={`hidden md:flex justify-between space-x-4 w-full relative py-2 text-sm`}
     >
-      <NavigationMenu>
-        <NavigationMenuList>
+      <NavigationMenu className="relative flex justify-center w-auto z-10">
+        <NavigationMenuList className="flex justify-center p-[4px] ronded-[6px] list-none">
           <NavigationMenuItem className="hidden -ml-4 text-sm xl:mr-2.5 md:block md:flex md:flex-col md:justify-center">
             <NavigationMenuLink href="/">
               {/* {submenuTitle4} */}
@@ -618,7 +624,7 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
           </NavigationMenuItem>
         </NavigationMenuList>
         <NavigationMenuIndicator />
-        <ViewportPosition className="ml-0 ml-36">
+        <ViewportPosition className="ml-0 ml-36 absolute flex justify-center w-full top-100 left-0">
           <NavigationMenuViewport />
         </ViewportPosition>
       </NavigationMenu>