From ce47a7433e4abbbe40fe6fe43d55cd574d0abee7 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 4 Oct 2023 15:44:24 +0100
Subject: [PATCH] Teams button in navigation

---
 src/components/Navigation/Navigation.astro | 25 +++++++++--
 src/components/TeamMarketing/TeamDemo.tsx  | 51 ++++++++++++++--------
 2 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index 2a923d897..8d999a0cb 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -27,9 +27,26 @@ import { AccountDropdown } from './AccountDropdown';
         <a href='/questions' class='text-gray-400 hover:text-white'>Questions</a
         >
       </li>
-      <lif>
-        <a href='/teams' class='text-gray-400 hover:text-white'>Teams</a>
-      </lif>
+      <li>
+        <a href='/teams' class='group relative text-blue-300 hover:text-white'>
+          Teams
+          <span
+            class='ml-0.5 hidden rounded-sm border-black bg-blue-300 px-1 py-0.5 text-xs font-semibold uppercase text-black group-hover:bg-white md:inline'
+          >
+            New
+          </span>
+
+          <span class='inline md:hidden absolute -right-[11px] top-0'>
+            <span class='relative flex h-2 w-2'>
+              <span
+                class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
+              ></span>
+              <span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'
+              ></span>
+            </span>
+          </span>
+        </a>
+      </li>
       <li>
         <kbd
           data-command-menu
@@ -45,7 +62,7 @@ import { AccountDropdown } from './AccountDropdown';
         <a href='/login' class='text-gray-400 hover:text-white'>Login</a>
       </li>
       <li>
-        <AccountDropdown client:only="react" />
+        <AccountDropdown client:only='react' />
 
         <a
           data-guest-required
diff --git a/src/components/TeamMarketing/TeamDemo.tsx b/src/components/TeamMarketing/TeamDemo.tsx
index 6a3a78b15..0f3cb96e8 100644
--- a/src/components/TeamMarketing/TeamDemo.tsx
+++ b/src/components/TeamMarketing/TeamDemo.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { cn } from '../../lib/classname.ts';
+import { isLoggedIn } from '../../lib/jwt.ts';
 
 const demoItems = [
   {
@@ -55,8 +56,10 @@ export function TeamDemo() {
   const [hasViewed, setHasViewed] = useState<number[]>([0]);
   const [activeItem, setActiveItem] = useState(demoItems[0]);
 
+  const isAuthenticated = isLoggedIn();
+
   return (
-    <div className="border-t py-12 hidden sm:block">
+    <div className="hidden border-t py-12 sm:block">
       <div className="container">
         <h2 className="mb-2 text-3xl font-bold">See how it works</h2>
         <p>Here is a sneak peek of what you can do today (more coming soon!)</p>
@@ -71,10 +74,7 @@ export function TeamDemo() {
                 <span key={item.title} className="relative flex items-center">
                   <span
                     onClick={() => {
-                      setHasViewed([
-                          ...hasViewed,
-                          counter
-                      ])
+                      setHasViewed([...hasViewed, counter]);
                       setActiveItem(item);
                     }}
                     className={cn('z-50 cursor-pointer rounded-full p-[6px]', {
@@ -82,13 +82,18 @@ export function TeamDemo() {
                       'bg-gray-300 hover:bg-gray-400': item !== activeItem,
                     })}
                   />
-                  {!hasAlreadyViewed && <span className="pointer-events-none absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-400 opacity-75"></span> }
+                  {!hasAlreadyViewed && (
+                    <span className="pointer-events-none absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-400 opacity-75"></span>
+                  )}
                 </span>
               );
             }
 
             return (
-              <span key={item.title} className=" rounded-full bg-black px-3 py-0.5 text-sm text-white">
+              <span
+                key={item.title}
+                className=" rounded-full bg-black px-3 py-0.5 text-sm text-white"
+              >
                 {activeItem.title}
               </span>
             );
@@ -116,20 +121,32 @@ export function TeamDemo() {
               </p>
               <div className="flex flex-row items-center gap-2">
                 <a
-                  href="/signup"
+                  onClick={() => {
+                    if (isAuthenticated) {
+                      return;
+                    }
+
+                    localStorage.setItem('authRedirect', '/team/new');
+                  }}
+                  href={isAuthenticated ? '/team/new' : '/signup'}
                   className="inline-flex items-center justify-center rounded-lg border border-transparent bg-purple-600 px-5 py-2 text-base font-medium text-white hover:bg-purple-700"
                 >
                   Create your Team
                 </a>
-                <span className="ml-1 text-base">
-                  or &nbsp;
-                  <a
-                    href="/login"
-                    className="text-purple-600 underline  hover:text-purple-700"
-                  >
-                    Login to your account
-                  </a>
-                </span>
+                {!isAuthenticated && (
+                  <span className="ml-1 text-base">
+                    or &nbsp;
+                    <a
+                      onClick={() => {
+                        localStorage.setItem('authRedirect', '/team/new');
+                      }}
+                      href="/login"
+                      className="text-purple-600 underline  hover:text-purple-700"
+                    >
+                      Login to your account
+                    </a>
+                  </span>
+                )}
               </div>
             </div>
           )}