feat: 🎸 request avatar form

ThaddeusJiang · Mar 22, 2023 · 16ba522 · 16ba522 · vercel · Mar 22, 2023
1 parent 0462d75
commit 16ba522
Show file tree

Hide file tree

Showing 15 changed files with 375 additions and 162 deletions.
diff --git a/components/Avatars.tsx b/components/Avatars.tsx
@@ -14,7 +14,7 @@ export function Avatars({
   }[];
 }) {
   return (
-    <div className="bg-white ">
+    <section id="avatars" aria-label="Pricing" className="bg-white py-20 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 text-center lg:px-8">
         <div className="mx-auto max-w-2xl">
           <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Public Avatars</h2>
@@ -68,6 +68,6 @@ export function Avatars({
           ))}
         </ul>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/components/lp/Footer.jsx b/components/lp/Footer.jsx
@@ -15,6 +15,7 @@ export function Footer() {
               <NavLink href="#features">Features</NavLink>
               <NavLink href="#testimonials">Testimonials</NavLink>
               <NavLink href="#pricing">Pricing</NavLink>
+              <NavLink href="#avatars">Avatars</NavLink>
             </div>
           </nav>
         </div>

diff --git a/components/lp/Header.tsx b/components/lp/Header.tsx
@@ -81,6 +81,7 @@ function MobileNavigation() {
                 <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
@@ -96,8 +97,9 @@ function MobileNavigation() {
               </>
             ) : (
               <>
-                <MobileNavLink href="/#features">Features</MobileNavLink>
-                <MobileNavLink href="/#testimonials">Testimonials</MobileNavLink>
+                {/* <MobileNavLink href="/#features">Features</MobileNavLink>
+                <MobileNavLink href="/#testimonials">Testimonials</MobileNavLink> */}
+                <MobileNavLink href="/#avatars">Avatars</MobileNavLink>
                 <MobileNavLink href="/#pricing">Pricing</MobileNavLink>
                 <hr className="m-2 border-slate-300/40" />
                 <MobileNavLink href="/signin">Sign in</MobileNavLink>
@@ -130,8 +132,9 @@ export function Header() {
               </div>
             ) : (
               <div className="hidden md:flex md:gap-x-6">
-                <NavLink href="/#features">Features</NavLink>
-                <NavLink href="/#testimonials">Testimonials</NavLink>
+                {/* <NavLink href="/#features">Features</NavLink>
+                <NavLink href="/#testimonials">Testimonials</NavLink> */}
+                <NavLink href="/#avatars">Avatars</NavLink>
                 <NavLink href="/#pricing">Pricing</NavLink>
               </div>
             )}
@@ -188,6 +191,19 @@ 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
@@ -1,5 +1,8 @@
+import { GetServerSidePropsContext } from "next";
 import Head from "next/head";
 
+import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs";
+
 import { CallToAction } from "~/components/lp/CallToAction";
 import { Faqs } from "~/components/lp/Faqs";
 import { Footer } from "~/components/lp/Footer";
@@ -10,7 +13,21 @@ import { PrimaryFeatures } from "~/components/lp/PrimaryFeatures";
 import { SecondaryFeatures } from "~/components/lp/SecondaryFeatures";
 import { Testimonials } from "~/components/lp/Testimonials";
 
-export default function Home() {
+import { Avatars } from "../Avatars";
+
+export default function Landing({
+  avatars
+}: {
+  avatars: {
+    id: string;
+    username: string;
+    name: string;
+    avatar_url: string;
+    desc?: string;
+    twitterUrl?: string;
+    linkedinUrl?: string;
+  }[];
+}) {
   return (
     <>
       <Head>
@@ -27,6 +44,7 @@ export default function Home() {
         {/* <SecondaryFeatures /> */}
         <CallToAction />
         {/* <Testimonials /> */}
+        <Avatars avatars={avatars} />
         <Pricing />
         {/* <Faqs /> */}
       </main>

diff --git a/components/lp/Pricing.tsx b/components/lp/Pricing.tsx
@@ -39,7 +39,7 @@ function Plan({
 }: {
   name: string;
   price: string;
-  description: string;
+  description?: string;
   href: string;
   features: string[];
   featured?: boolean;
@@ -115,30 +115,27 @@ export function Pricing({
           <Plan
             featured
             name="Basic"
-            price="$15"
-            description="Perfect for small / medium sized businesses."
+            price="$3"
+            // description=""
             href="/signin"
             features={[
-              "Send 25 quotes and invoices",
-              "Connect up to 5 bank accounts",
-              "Track up to 50 expenses per month",
-              "Automated payroll support",
-              "Export up to 12 reports",
-              "Bulk reconcile transactions",
-              "Track in multiple currencies"
+              "Create up to 3 avatars",
+              "Send 1000 messages per month",
+              "Available when demand is low",
+              "Standard response speed"
             ]}
           />
           <Plan
             name="Plus"
-            price="$39"
-            description="For even the biggest enterprise companies."
+            price="$6"
+            // description="For sharing avatars to  even the biggest enterprise companies."
             href="/signin"
             features={[
-              "Send unlimited quotes and invoices",
-              "Connect up to 15 bank accounts",
-              "Track up to 200 expenses per month",
-              "Automated payroll support",
-              "Export up to 25 reports, including TPS"
+              "Create up to unlimited avatars",
+              "Send unlimited messages",
+              "Earn the revenue from your avatars",
+              "Available even when demand is high",
+              "Faster response speed"
             ]}
           />
         </div>

diff --git a/components/ui/Avatar/Avatar.tsx b/components/ui/Avatar/Avatar.tsx
@@ -0,0 +1,56 @@
+import Link from "next/link";
+
+export const Avatar = ({
+  avatar
+}: {
+  avatar: {
+    id: string;
+    username: string;
+    name: string;
+    desc?: string;
+    avatar_url?: string;
+    twitterUrl?: string;
+    linkedinUrl?: string;
+  };
+}) => {
+  return (
+    <div>
+      <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=""
+        />
+      </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>
+      <p className="text-sm leading-6 text-gray-600">{avatar.desc}</p>
+      <ul role="list" className="mt-6 flex justify-center gap-x-6">
+        {avatar.twitterUrl ? (
+          <li>
+            <a href={avatar.twitterUrl} className="text-gray-400 hover:text-gray-500">
+              <span className="sr-only">Twitter</span>
+              <svg className="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
+              </svg>
+            </a>
+          </li>
+        ) : null}
+        {avatar.linkedinUrl ? (
+          <li>
+            <a href={avatar.linkedinUrl} className="text-gray-400 hover:text-gray-500">
+              <span className="sr-only">LinkedIn</span>
+              <svg className="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </a>
+          </li>
+        ) : null}
+      </ul>
+    </div>
+  );
+};
diff --git a/components/ui/Chat/Chat.tsx b/components/ui/Chat/Chat.tsx
@@ -138,15 +138,15 @@ export function Chat({
             </form>
 
             <div className="mt-6 text-center text-lg">
-              You can talk with
+              talk with{" "}
               <Link href={`/settings/avatars`} className="link">
                 yourself
               </Link>{" "}
               or{" "}
               <Link href={`/avatars`} className="link">
-                other avatars
+                public avatars
               </Link>{" "}
-              anytime.
+              .
             </div>
 
             {loading ? (

diff --git a/pages/api/avatars.ts b/pages/api/avatars.ts
@@ -0,0 +1,40 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs";
+
+export default async function createAvatar(req: NextApiRequest, res: NextApiResponse) {
+  const supabase = createServerSupabaseClient({ req, res });
+
+  const {
+    data: { user }
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return res.status(401).json({ error: "Unauthorized" });
+  }
+
+  const { username, name, source } = req.body as {
+    username: string;
+    name: string;
+    source: string;
+  };
+
+  const { data, error } = await supabase
+    .from("avatars")
+    .insert({
+      id: username, // ID automatically generated by Supabase
+      username,
+      name,
+      source,
+      status: "requested",
+      owner_id: user.id
+    })
+    .select("*")
+    .single();
+
+  if (error) {
+    return res.status(500).json({ error: error.message });
+  }
+
+  return res.status(200).json(data);
+}
diff --git a/pages/avatars.tsx b/pages/avatars.tsx
@@ -23,7 +23,11 @@ export default function AvatarsPage({
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const supabase = createServerSupabaseClient(ctx);
 
-  const { data, error } = await supabase.from("avatars").select().eq("status", "public");
+  const { data, error } = await supabase
+    .from("avatars")
+    .select()
+    .eq("status", "public")
+    .order("created_at", { ascending: false });
 
   if (error) {
     console.error(error);

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,30 +1,33 @@
 import { GetStaticPropsResult } from "next";
 
-import { Product } from "types";
+import { Avatar, Product } from "types";
 
 import Pricing from "~/components/Pricing";
 import Landing from "~/components/lp/Landing";
-import { getActiveProductsWithPrices } from "~/utils/supabase-client";
+import { getActiveProductsWithPrices, getPublicAvatars } from "~/utils/supabase-client";
 
 interface Props {
   products: Product[];
+  avatars: Avatar[];
 }
 
 // export default function PricingPage({ products }: Props) {
 //   return <Pricing products={products} />;
 // }
 
-export default function LandingPage({ products }: Props) {
+export default function LandingPage({ products, avatars }: Props) {
   // return <Pricing products={products} />;
-  return <Landing />;
+  return <Landing avatars={avatars} />;
 }
 
 export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
   const products = await getActiveProductsWithPrices();
+  const avatars = await getPublicAvatars();
 
   return {
     props: {
-      products
+      products,
+      avatars
     },
     revalidate: 60
   };