Merge pull request #19 from bookracy/lists-placeholder

improve list page's context
bookracy · Aug 29, 2024 · e1b1057 · e1b1057
2 parents 758d121 + 56cd4ca
commit e1b1057
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 11 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/layout/sheet-menu.tsx b/src/components/layout/sheet-menu.tsx
@@ -24,7 +24,7 @@ export function SheetMenu() {
         <SheetHeader>
           <Button className="mt-3 flex items-center justify-center" variant="link" asChild>
             <Link to="/" className="flex items-center gap-2" search={{ q: "" }} onClick={() => setIsOpen(false)}>
-              {theme === "dark" ? <img src={LogoHeader} className="h-12" /> : <img src={LogoHeaderDark} className="h-12" />}
+              {theme === "dark" ? <img src={LogoHeader} className="h-14" /> : <img src={LogoHeaderDark} className="h-14" />}
             </Link>
           </Button>
         </SheetHeader>

diff --git a/src/components/ui/nav-link.tsx b/src/components/ui/nav-link.tsx
@@ -16,15 +16,15 @@ function isExternalLink(url: string): boolean {
 export function NavLink({ to, target, children }: NavLinkProps) {
   if (isExternalLink(to)) {
     return (
-      <a href={to} target={target} className="transiton-color inline-block text-blue-500 duration-100 hover:text-blue-600" rel="noreferrer">
+      <a href={to} target={target} className="text-blue-500 transition-colors duration-300 hover:underline" rel="noreferrer">
         {children}
       </a>
     );
   }
 
   return (
     <div>
-      <Link to={to} target={target} className="transiton-color inline-block text-blue-500 duration-100 hover:text-blue-600" rel="noreferrer">
+      <Link to={to} target={target} className="text-blue-500 transition-colors duration-300 hover:underline" rel="noreferrer">
         {children}
       </Link>
     </div>

diff --git a/src/main.tsx b/src/main.tsx
@@ -29,7 +29,7 @@ const router = createRouter({
   defaultPendingMs: 100,
   defaultPendingComponent: () => {
     return (
-      <div className="flex flex-1 items-center justify-center">
+      <div className="flex h-screen items-center justify-center">
         <Loader2 className="animate-spin" />
       </div>
     );

diff --git a/src/routes/lists.tsx b/src/routes/lists.tsx
@@ -1,4 +1,5 @@
 import { BookList } from "@/components/books/book-list";
+import { NavLink } from "@/components/ui/nav-link";
 import { useBookmarksStore } from "@/stores/bookmarks";
 import { createFileRoute } from "@tanstack/react-router";
 
@@ -12,7 +13,17 @@ export function Lists() {
   return (
     <div className="flex flex-1 justify-center">
       <div className="flex w-full flex-col gap-4">
-        {bookmarks.length > 0 ? <h1 className="text-2xl font-bold">Your Bookmarks</h1> : null}
+        {bookmarks.length > 0 ? (
+          <h1 className="text-2xl font-bold">Your Bookmarks</h1>
+        ) : (
+          <div>
+            <h1 className="text-2xl font-bold">No Bookmarks</h1>
+            <p className="flex gap-1 text-sm">
+              Start adding some books using the bookmark button. Start searching
+              <NavLink to={"/?q="}>here</NavLink>
+            </p>
+          </div>
+        )}
 
         <BookList books={bookmarks} />
       </div>

diff --git a/src/routes/login.tsx b/src/routes/login.tsx
@@ -2,7 +2,8 @@ import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/componen
 import { Button } from "@/components/ui/button";
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@/components/ui/input-otp";
 import { useIsMobile } from "@/hooks/use-ismobile";
-import { createFileRoute, Link, redirect } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { NavLink } from "@/components/ui/nav-link";
 import { useRouter } from "@tanstack/react-router";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
@@ -123,11 +124,9 @@ function Login() {
               />
             </CardContent>
             <CardFooter className="flex-col justify-between gap-2 xl:flex-row xl:gap-0">
-              <p className="text-sm">
-                No account yet? Create one{" "}
-                <Link to="/register" className="underline">
-                  here
-                </Link>
+              <p className="flex gap-1 text-sm">
+                No account yet? Create one
+                <NavLink to="/register">here</NavLink>
               </p>
               <Button loading={isPending} type="submit" className="w-full lg:w-fit">
                 Login