v0.2 Merge pull request #4 from ThaddeusJiang/dev

* feat: Chat UI * test: 测试 vercel 上是否可以 work * remove next.js app directory, 暂时不需要
ThaddeusJiang · Mar 26, 2023 · 0e4bcff · 0e4bcff · vercel · Mar 26, 2023
1 parent 16ba522
commit 0e4bcff
Show file tree

Hide file tree

Showing 30 changed files with 1,804 additions and 438 deletions.
diff --git a/components/Avatars.tsx b/components/Avatars.tsx
@@ -29,11 +29,21 @@ export function Avatars({
           {avatars.map((avatar) => (
             <li key={avatar.username}>
               <Link href={`/chat/${avatar.username}`}>
-                <img
-                  className="mx-auto h-56 w-56 rounded-full"
-                  src={avatar.avatar_url ?? "https://www.gravatar.com/avatar/ANY"}
-                  alt=""
-                />
+                {avatar.avatar_url ? (
+                  <>
+                    <img
+                      className="mx-auto h-56 w-56 rounded-full"
+                      src={avatar.avatar_url}
+                      alt={`Avatar of ${avatar.name}`}
+                    />
+                  </>
+                ) : (
+                  <>
+                    <div className="avatar">
+                      <div className="w-24 rounded-full">{avatar.name[0]}</div>
+                    </div>
+                  </>
+                )}
               </Link>
               <h3 className="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900">{avatar?.name}</h3>
               <h4 className=" text-sm ">@{avatar.username}</h4>

diff --git a/components/icons/Logo.tsx b/components/icons/Logo.tsx
diff --git a/components/lp/Header.tsx b/components/lp/Header.tsx
@@ -40,7 +40,7 @@ function MobileNavIcon({ open }: { open: boolean }) {
 function MobileNavigation() {
   const router = useRouter();
   const supabaseClient = useSupabaseClient();
-  const { user } = useUser();
+  const { user, userDetails } = useUser();
 
   return (
     <Popover>
@@ -77,11 +77,10 @@ function MobileNavigation() {
           >
             {user ? (
               <>
-                <MobileNavLink href="/chat">Chat</MobileNavLink>
+                <MobileNavLink href="/settings/avatars">Your Avatars</MobileNavLink>
                 <MobileNavLink href="/avatars">Avatars</MobileNavLink>
                 <hr className="m-2 border-slate-300/40" />
                 <MobileNavLink href="/settings/profile">Your Profile</MobileNavLink>
-                <MobileNavLink href="/settings/avatars">Your Avatars</MobileNavLink>
                 <MobileNavLink href="/settings/pricing">Pricing</MobileNavLink>
                 <hr className="m-2 border-slate-300/40" />
                 <Popover.Button
@@ -115,7 +114,7 @@ function MobileNavigation() {
 export function Header() {
   const router = useRouter();
   const supabaseClient = useSupabaseClient();
-  const { user } = useUser();
+  const { user, userDetails } = useUser();
 
   return (
     <header className="py-10">
@@ -127,8 +126,8 @@ export function Header() {
             </Link>
             {user ? (
               <div className="hidden md:flex md:gap-x-6">
-                <NavLink href="/chat">Chat</NavLink>
-                <NavLink href="/avatars">Avatars</NavLink>
+                <NavLink href="/settings/avatars">Your Avatars</NavLink>
+                <NavLink href="/avatars">Other Avatars</NavLink>
               </div>
             ) : (
               <div className="hidden md:flex md:gap-x-6">
@@ -159,11 +158,22 @@ export function Header() {
                         <div>
                           <Menu.Button className="bg-white rounded-full flex items-center space-x-2 text-lg tracking-tight text-slate-900 ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100">
                             <span className="sr-only">Open user menu</span>
-                            <img
-                              className="h-8 w-8 rounded-full"
-                              src={"https://www.gravatar.com/avatar/ANY"}
-                              alt={"User"}
-                            />
+
+                            {userDetails?.avatar_url ? (
+                              <>
+                                <img
+                                  className="mx-auto h-8 w-8 rounded-full"
+                                  src={userDetails.avatar_url}
+                                  alt={`Avatar of ${userDetails.full_name}`}
+                                />
+                              </>
+                            ) : (
+                              <>
+                                <div className="avatar">
+                                  <div className="w-24 rounded-full">{userDetails?.full_name?.[0]}</div>
+                                </div>
+                              </>
+                            )}
                             <span>Personal</span>
                           </Menu.Button>
                         </div>
@@ -191,19 +201,6 @@ export function Header() {
                                 </Link>
                               )}
                             </Menu.Item>
-                            <Menu.Item>
-                              {({ active }) => (
-                                <Link
-                                  href="/settings/avatars"
-                                  className={clsx(
-                                    active ? "bg-gray-100" : "",
-                                    "block px-4 py-2 text-lg tracking-tight text-slate-900"
-                                  )}
-                                >
-                                  Your Avatars
-                                </Link>
-                              )}
-                            </Menu.Item>
                             <hr className="m-2 border-slate-300/40" />
                             <Menu.Item>
                               {({ active }) => (

diff --git a/components/lp/Landing.tsx b/components/lp/Landing.tsx
@@ -39,6 +39,7 @@ export default function Landing({
       </Head>
 
       <main>
+        <Header />
         <Hero />
         {/* <PrimaryFeatures /> */}
         {/* <SecondaryFeatures /> */}

diff --git a/components/Layout.tsx → components/lp/LandingLayout.tsx b/components/Layout.tsx → components/lp/LandingLayout.tsx
@@ -5,14 +5,13 @@ import { useRouter } from "next/router";
 
 import { getURL } from "~/utils/helpers";
 
-import { PageMeta } from "../types";
-import { Header } from "./lp/Header";
+import { PageMeta } from "../../types";
 
 interface Props extends PropsWithChildren {
   meta?: PageMeta;
 }
 
-export default function Layout({ children, meta: pageMeta }: Props) {
+export default function LandingLayout({ children, meta: pageMeta }: Props) {
   const router = useRouter();
   const meta = {
     title: "AIer",
@@ -41,7 +40,6 @@ export default function Layout({ children, meta: pageMeta }: Props) {
         <meta name="twitter:description" content={meta.description} />
         <meta name="twitter:image" content={`${getURL()}api/og`} />
       </Head>
-      <Header />
       <main id="skip">{children}</main>
     </>
   );

diff --git a/components/ui/Avatar/MiniAvatar.tsx b/components/ui/Avatar/MiniAvatar.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+
+export const MiniAvatar = ({
+  avatar
+}: {
+  avatar: {
+    id: string;
+    username: string;
+    name: string;
+    desc?: string;
+    avatar_url?: string;
+    twitterUrl?: string;
+    linkedinUrl?: string;
+  };
+}) => {
+  return (
+    <div className="flex space-x-2 items-center">
+      <div className="avatar">
+        <div className="w-8 rounded-full ring ring-offset-base-100 ring-offset-2">
+          <img src={avatar.avatar_url ?? "https://www.gravatar.com/avatar/ANY"} />
+        </div>
+      </div>
+
+      <div>
+        <div className="text-base font-semibold leading-7 tracking-tight text-gray-900">{avatar?.name}</div>
+        <div className=" text-sm ">@{avatar.username}</div>
+      </div>
+    </div>
+  );
+};