info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-01 06:50:26 +02:00
Code Issues Releases Wiki Activity

Teams button in navigation

Browse Source
This commit is contained in:
Kamran Ahmed
2023-10-04 15:44:24 +01:00
parent 21b8358683
commit ce47a7433e
2 changed files with 55 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Navigation/Navigation.astro
View File

@@ -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

33
src/components/TeamMarketing/TeamDemo.tsx
View File

@@ -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>
{!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>
)}