add pricing table, fix create blog, add free tier

jordienr · Jun 13, 2024 · 608598d · 608598d
1 parent dab1dc9
commit 608598d
Show file tree

Hide file tree

Showing 12 changed files with 206 additions and 124 deletions.
diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
@@ -14,7 +14,7 @@ const Footer = (props: Props) => {
   ];
 
   return (
-    <footer className="mt-6 border-t bg-zinc-100 p-4 text-xs text-zinc-700 md:p-12">
+    <footer className="mt-6 border-t bg-zinc-50 p-4 text-xs text-zinc-700 md:p-12">
       <div className="mx-auto flex max-w-3xl justify-between">
         <div>
           <ZendoLogo />

diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
@@ -20,6 +20,7 @@ const buttonVariants = cva(
         ghost:
           "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 text-zinc-600",
         link: "text-zinc-800 underline-offset-4 hover:underline dark:text-zinc-50",
+        white: "bg-white text-zinc-900 hover:text-zinc-900",
       },
       size: {
         default: "h-10 px-3 py-2",

diff --git a/apps/web/src/layouts/AppLayout.tsx b/apps/web/src/layouts/AppLayout.tsx
@@ -5,7 +5,7 @@ import { motion } from "framer-motion";
 import Notifications from "@/components/Notifications";
 import Feedback from "@/components/Feedback";
 import Footer from "@/components/Footer";
-import { useIsSubscribed } from "@/queries/subscription";
+import { useIsSubscribed, usePlan } from "@/queries/subscription";
 import AppChecks from "@/components/LoggedInUserChecks";
 import { Loader } from "lucide-react";
 import { HiOutlineInformationCircle } from "react-icons/hi";
@@ -18,7 +18,7 @@ type Props = {
   loading?: boolean;
 };
 export default function AppLayout({ children, loading = false }: Props) {
-  const isSubscribed = useIsSubscribed();
+  const plan = usePlan();
   const user = useUser();
   const router = useRouter();
 
@@ -31,9 +31,11 @@ export default function AppLayout({ children, loading = false }: Props) {
   }, [user, loading]);
 
   return (
-    <div className={`flex min-h-screen flex-col border-b bg-zinc-50 font-sans`}>
+    <div
+      className={`flex min-h-screen flex-col border-b bg-zinc-50/50 font-sans`}
+    >
       <AppChecks>
-        <nav className="sticky top-0 z-20 mx-auto w-full max-w-5xl border-b bg-zinc-50">
+        <nav className="sticky top-0 z-20 mx-auto w-full max-w-5xl border-b bg-zinc-50/50 backdrop-blur-md">
           <div className="mx-auto flex h-full items-center justify-between px-4">
             <div className="z-20  flex h-full items-center gap-2">
               <Link
@@ -43,11 +45,12 @@ export default function AppLayout({ children, loading = false }: Props) {
               >
                 <ZendoLogo hideText />
               </Link>
-              {isSubscribed ? (
+              {plan === "pro" && (
                 <div className="rounded-full bg-blue-50 p-1 px-2 text-xs font-medium text-blue-500">
                   Pro plan
                 </div>
-              ) : (
+              )}
+              {plan === "free" && (
                 <Link
                   title="Upgrade to Pro"
                   href="/account"
@@ -96,7 +99,7 @@ export default function AppLayout({ children, loading = false }: Props) {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.5 }}
-            className="min-h-screen bg-zinc-50 pb-24"
+            className="min-h-screen pb-24"
           >
             {children}
           </motion.main>

diff --git a/apps/web/src/pages/blogs/[blogId]/customise.tsx b/apps/web/src/pages/blogs/[blogId]/customise.tsx
@@ -119,7 +119,7 @@ export default function Customise() {
 
   return (
     <div className="flex min-h-screen bg-stone-50">
-      <aside className="sticky top-0 max-h-screen min-h-screen min-w-72 overflow-y-auto">
+      <aside className="sticky top-0 max-h-screen min-h-screen min-w-72 overflow-y-auto border-r">
         <div className="px-2 py-4">
           <Link href="/blogs">
             <ZendoLogo className="h-8 w-auto" />
@@ -242,7 +242,7 @@ export default function Customise() {
           </Button>
         </div>
       </aside>
-      <main className="max-h-screen min-h-screen flex-grow pr-2 pt-2">
+      <main className="max-h-screen min-h-screen flex-grow px-2 pt-2">
         <Tabs defaultValue="home" className="h-full">
           <TabsList className="flex py-0">
             <TabsTrigger

diff --git a/apps/web/src/pages/blogs/[blogId]/posts.tsx b/apps/web/src/pages/blogs/[blogId]/posts.tsx
@@ -613,7 +613,7 @@ function TabSection({
   actions?: React.ReactNode;
 }) {
   return (
-    <div className="rounded-xl border bg-white py-2">
+    <div className="rounded-xl border bg-white py-2 shadow-sm">
       <div className="flex justify-between border-b px-3 py-1 pb-3">
         <h2 className="text-lg font-medium">{title}</h2>
         {actions}

diff --git a/apps/web/src/pages/blogs/create.tsx b/apps/web/src/pages/blogs/create.tsx
@@ -39,24 +39,21 @@ export default function CreateBlog() {
     }
   }, [watchTitle, setValue]);
 
-  useEffect(() => {
-    const slugEl = document.getElementById("slug-input");
-    if (!slugEl) return;
-
-    if (slug?.length === 0) {
-      slugEl.style.width = " 70px";
-      return;
-    }
-
-    slugEl.style.width = `${slug?.length * 10}px`;
-  }, [slug]);
-
   const createBlog = useCreateBlogMutation();
   const blogsQuery = useBlogsQuery({ enabled: true });
 
   const hasOneBlogAlready = blogsQuery.data?.length === 1;
 
   const onSubmit = async (data: FormData) => {
+    // validate slug is url friendly, allow only lowercase letters, numbers and hyphens
+    const regex = /^[a-zA-Z0-9-]+$/;
+    if (!regex.test(data.slug)) {
+      toast.error(
+        "Slug must be URL friendly. No special characters or spaces allowed."
+      );
+      return;
+    }
+
     if (data.slug.length < 3 && data.slug.length > 24) {
       toast.error("Slug must be at least 3 characters long");
       return;
@@ -89,7 +86,7 @@ export default function CreateBlog() {
 
   if (!isSubscribed && hasOneBlogAlready) {
     return (
-      <AppLayout loading={createBlog.isPending}>
+      <AppLayout loading={createBlog.isPending || createBlog.isSuccess}>
         <div className="section mx-auto my-12 max-w-xl py-12">
           <h2 className="mt-2">
             <div className="flex justify-center">
@@ -142,15 +139,19 @@ export default function CreateBlog() {
                   <div className="sr-only">Slug</div>
                 </Label>
                 <div>
-                  <div className="flex font-mono tracking-tighter">
+                  <div className="flex rounded-lg border font-mono tracking-tighter">
                     <textarea
                       id="slug-input"
                       placeholder="my-blog"
-                      style={{ resize: "none" }}
+                      style={{
+                        resize: "none",
+                        minWidth: "70px",
+                        width: (watch("slug")?.length || 7) * 10 + "px",
+                      }}
                       {...register("slug")}
                       rows={1}
                       cols={24}
-                      className="min-w-4 max-w-48 overflow-hidden rounded-md bg-transparent py-1 pl-1 pr-0.5 text-right text-sm font-medium text-zinc-700 outline-none hover:bg-zinc-100 focus:bg-zinc-100"
+                      className="overflow-hidden rounded-md bg-transparent py-1 pl-1 pr-0.5 text-right text-sm font-medium text-zinc-700 outline-none hover:bg-zinc-100 focus:bg-zinc-100"
                     />
                     <span className="flex-grow py-1 text-sm">.zenblog.com</span>
                   </div>

diff --git a/apps/web/src/pages/blogs/index.tsx b/apps/web/src/pages/blogs/index.tsx
@@ -46,7 +46,7 @@ export default function Dashboard() {
             {data?.map((blog) => {
               return (
                 <li
-                  className="group rounded-xl border border-zinc-100 bg-white transition-all hover:border-zinc-200"
+                  className="group rounded-xl border border-zinc-200 bg-white shadow-sm transition-all hover:border-zinc-200"
                   key={blog.id}
                 >
                   <Link
@@ -67,7 +67,7 @@ export default function Dashboard() {
                     <div className="mt-auto flex justify-end gap-1 justify-self-end align-bottom">
                       <Button
                         size={"icon"}
-                        variant={"ghost"}
+                        variant={"white"}
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
@@ -81,7 +81,7 @@ export default function Dashboard() {
                       </Button>
                       <Button
                         size={"icon"}
-                        variant={"ghost"}
+                        variant={"white"}
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
@@ -94,7 +94,7 @@ export default function Dashboard() {
                         <Settings size="24" />
                       </Button>
                       <Button
-                        variant={"secondary"}
+                        variant={"outline"}
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();