Add friends invite page

src/components/AccountSidebar.astro

@@ -31,6 +31,16 @@ const sidebarLinks = [
       classes: 'h-4 w-4',
     },
   },
+  // {
+  //   href: '/account/friends',
+  //   title: 'Friends',
+  //   id: 'friends',
+  //   isNew: true,
+  //   icon: {
+  //     glyph: 'users',
+  //     classes: 'h-4 w-4',
+  //   },
+  // },
   {
     href: '/account/update-profile',
     title: 'Profile',

src/components/Authenticator/authenticator.ts

@@ -37,13 +37,14 @@ function handleGuest() {
     '/account/update-password',
     '/account/settings',
     '/account/road-card',
+    '/account/friends',
     '/account',
     '/team',
     '/team/progress',
     '/team/roadmaps',
     '/team/new',
     '/team/members',
-    '/team/settings'
+    '/team/settings',
   ];
 
   showHideAuthElements('hide');

src/components/Friends/EmptyFriends.tsx

@@ -0,0 +1,48 @@
+import UserPlusIcon from '../../icons/user-plus.svg';
+import CopyIcon from '../../icons/copy.svg';
+import { useAuth } from '../../hooks/use-auth';
+import { useCopyText } from '../../hooks/use-copy-text';
+
+export function EmptyFriends() {
+  const user = useAuth();
+  const { isCopied, copyText } = useCopyText();
+  const befriendUrl = `https://roadmap.sh/befriend?u=${user?.id}`;
+
+  return (
+    <div class="rounded-md">
+      <div class="flex flex-col items-center p-7 text-center max-w-[450px] mx-auto">
+        <img
+          alt="no friends"
+          src={UserPlusIcon}
+          class="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]"
+        />
+        <h2 class="text-lg font-bold sm:text-xl">Invite your Friends</h2>
+        <p className="mb-4 mt-1 max-w-[400px] text-sm text-gray-500">
+          Share the link below with your friends to invite them
+        </p>
+
+        <div class="flex w-full items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm">
+          <input
+            onClick={(e) => {
+              e.currentTarget.select();
+              copyText(befriendUrl);
+            }}
+            type="text"
+            value={befriendUrl}
+            class="w-full border-none bg-transparent px-1.5 outline-none"
+            readonly
+          />
+          <button
+            class={`flex items-center justify-center gap-1 rounded-md border-0 p-2 px-3 text-sm text-black ${isCopied ? 'bg-green-300 hover:bg-green-300' : 'bg-gray-200 hover:bg-gray-300'}`}
+            onClick={() => {
+              copyText(befriendUrl);
+            }}
+          >
+            <img src={CopyIcon} className="h-4 w-4" alt="Invite Friends" />
+            {isCopied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Friends/FriendsPage.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'preact/hooks';
+import CopyIcon from '../../icons/copy.svg';
+import UserPlus from '../../icons/user-plus.svg';
+import { pageProgressMessage } from '../../stores/page';
+import { useAuth } from '../../hooks/use-auth';
+import {EmptyFriends} from "./EmptyFriends";
+
+export function FriendsPage() {
+  const user = useAuth();
+
+  useEffect(() => {
+    pageProgressMessage.set('');
+  }, []);
+
+  const baseUrl = import.meta.env.DEV
+    ? 'http://localhost:3000'
+    : 'https://roadmap.sh';
+  const befriendUrl = `${baseUrl}/befriend?u=${user?.id}`;
+
+  return <EmptyFriends />
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <span className={'text-sm text-gray-400'}>
+          You have 4 friends on Roadmap.sh
+        </span>
+        <button class="flex items-center justify-center gap-2 rounded-md border border-gray-400 bg-gray-50 p-1 px-2 text-sm hover:border-gray-500 hover:bg-gray-100">
+          <img src={UserPlus} className="h-4 w-4" alt="Invite Friends" />
+          Invite Friends
+        </button>
+      </div>
+    </div>
+  );
+}

src/icons/user-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus-2"><path d="M14 19a6 6 0 0 0-12 0"/><circle cx="8" cy="9" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>

src/pages/account/friends.astro

@@ -0,0 +1,15 @@
+---
+import AccountSidebar from '../../components/AccountSidebar.astro';
+import AccountLayout from '../../layouts/AccountLayout.astro';
+import { FriendsPage } from '../../components/Friends/FriendsPage';
+---
+
+<AccountLayout
+  title='Friends'
+  noIndex={true}
+  initialLoadingMessage='Loading friends'
+>
+  <AccountSidebar activePageId='friends' activePageTitle='Friends'>
+    <FriendsPage client:load />
+  </AccountSidebar>
+</AccountLayout>