Add transitions, footer & auth components improvements

src/app/auth/layout.tsx

@@ -1,3 +1,4 @@
+import Footer from "@/components/footer";
 import { cn } from "@/utils";
 import type { ReactNode } from "react";
 
@@ -7,15 +8,18 @@ interface AuthLayoutProps {
 
 const AuthLayout = (props: AuthLayoutProps) => {
   return (
-    <main
-      className={cn(
-        "mt-20 flex w-full flex-col items-center justify-center space-y-8",
-      )}
-    >
-      <div className="flex flex-col items-center justify-center">
-        {props.children}
-      </div>
-    </main>
+    <>
+      <main
+        className={cn(
+          "mt-20 flex w-full flex-col items-center justify-center space-y-8",
+        )}
+      >
+        <div className="flex flex-col items-center justify-center">
+          {props.children}
+        </div>
+      </main>
+      <Footer className="fixed bottom-0 py-4" />
+    </>
   );
 };
 

src/app/dashboard/page.tsx

@@ -7,7 +7,7 @@ import LinksLimit from "@/components/links/links-limit";
 import SearchLinks from "@/components/links/search-link";
 import { CreateLink } from "@/components/links/create-link";
 import { Button } from "@/ui/button";
-import { PackageOpenIcon, PlusIcon } from "lucide-react";
+import { PackageOpenIcon, PlusIcon, SparklesIcon } from "lucide-react";
 
 export const metadata: Metadata = {
   title: "Dashboard",
@@ -33,7 +33,7 @@ const DashboardPage = async ({
   });
 
   return (
-    <>
+    <main className="duration-500 animate-in fade-in-5 slide-in-from-bottom-2">
       <div className="mb-2 flex w-full items-center justify-between">
         <SearchLinks className="w-72 max-w-72" />
         <LinksLimit length={data.links.length} />
@@ -51,17 +51,32 @@ const DashboardPage = async ({
       </div>
       {filteredLinks.length === 0 && (
         <div className="mt-4 flex flex-col items-center justify-center space-y-3 text-center">
-          <PackageOpenIcon size={40} strokeWidth={0.5} />
-          <p>No slug found.</p>
+          {query ? (
+            <PackageOpenIcon size={48} strokeWidth={0.5} />
+          ) : (
+            <SparklesIcon size={48} strokeWidth={0.5} />
+          )}
+          {query ? (
+            <p>
+              No links found with <span className="font-mono">{query}</span>{" "}
+              slug
+            </p>
+          ) : (
+            <p>Star creating your first link:</p>
+          )}
           <CreateLink slug={query}>
             <Button variant="outline">
               <PlusIcon size={14} />
-              <p>Create link with <span className="font-mono">{query}</span> slug</p>
+              <span>
+                {query
+                  ? `Create a link with ${query} slug`
+                  : "Create a new link"}
+              </span>
             </Button>
           </CreateLink>
         </div>
       )}
-    </>
+    </main>
   );
 };
 

src/app/dashboard/settings/page.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 const SettingsPage = async () => {
   const session = await auth();
   return (
-    <div>
+    <main className="animate-in duration-500 slide-in-from-bottom-2 fade-in-5">
       {JSON.stringify(session)}
       <form
         action={async () => {
@@ -19,7 +19,7 @@ const SettingsPage = async () => {
       >
         <button>Sign Out</button>
       </form>
-    </div>
+    </main>
   );
 };
 

src/components/auth/sign-out.tsx

@@ -3,12 +3,16 @@
 import { handleSignOut } from "@/server/actions/auth";
 import { DropdownMenuItem } from "@/ui/dropdown-menu";
 import { LogOutIcon } from "lucide-react";
+import { toast } from "sonner";
 
 export function SignOut() {
   const iconSize = 15;
 
   const handleLogout = async () => {
-    await handleSignOut();
+    toast.promise(handleSignOut, {
+      loading: "Signing out...",
+      error: "Failed to sign out. Please try again.",
+    });
   };
 
   return (

src/components/auth/social-login.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/ui/button";
-import { GithubLogo, GoogleLogo } from "@/components/logos";
+import { GithubLogo, GoogleLogo } from "@/components/icons/logos";
 import { signIn } from "next-auth/react";
 import { DEFAULT_LOGIN_REDIRECT_URL } from "@/routes";
 import { useSearchParams } from "next/navigation";

src/components/auth/user-menu.tsx

@@ -5,11 +5,10 @@ import {
   ArrowUpRight,
   BugIcon,
   LayoutDashboardIcon,
-  LogOutIcon,
   SettingsIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { XLogo } from "../logos";
+import { XLogo } from "@/components/icons/logos";
 
 const UserMenu = () => {
   const iconSize = 15;

src/components/footer.tsx

@@ -1,17 +1,47 @@
 import Container from "@/ui/container";
+import ExternalLink from "@/ui/external-link";
 import { cn } from "@/utils";
 import React from "react";
+import { T3Logo, XLogo } from "./icons/logos";
+import { ArrowUpRight, Heart } from "lucide-react";
 
 interface FooterProps {
   className?: string;
 }
 
 const Footer = (props: FooterProps) => {
   return (
-    <footer className={cn("w-full", props.className)}>
+    <footer
+      className={cn(
+        "group w-full text-sm text-neutral-600 dark:text-neutral-400",
+        props.className,
+      )}
+    >
       <Container className="flex items-center justify-between">
-        <p>Crafted with ❤️ by pheralb</p>
-        <div></div>
+        <div className="flex items-center space-x-2">
+          <Heart
+            size={14}
+            className="text-red-500 group-hover:transform group-hover:animate-pulse"
+          />
+          <ExternalLink
+            href="https://create.t3.gg/"
+            className="flex items-center space-x-1"
+          >
+            <p>Made by Pablo using</p>
+            <T3Logo className="h-4 w-4" />
+            <ArrowUpRight size={14} />
+          </ExternalLink>
+        </div>
+        <div className="flex items-center space-x-2">
+          <XLogo className="h-3 w-3" />
+          <ExternalLink
+            href="https://twitter.com/pheralb_"
+            className="flex items-center space-x-1"
+          >
+            <p>Twitter</p>
+            <ArrowUpRight size={14} />
+          </ExternalLink>
+        </div>
       </Container>
     </footer>
   );

src/components/header.tsx

@@ -1,13 +1,15 @@
-import Container from "@/ui/container";
-import { ModeToggle } from "./change-theme";
-import Logo from "./logo";
 import Link from "next/link";
-import ExternalLink from "@/ui/external-link";
 import { cn } from "@/utils";
+
+import Container from "@/ui/container";
 import { buttonVariants } from "@/ui/button";
-import UserButton from "./auth/user-btn";
+import ExternalLink from "@/ui/external-link";
 import { Badge } from "@/ui/badge";
-import { GithubLogo } from "./logos";
+
+import { ModeToggle } from "@/components/change-theme";
+import UserButton from "@/components/auth/user-btn";
+import Logo from "@/components/icons/logo";
+import { GithubLogo } from "@/components/icons/logos";
 
 const Header = () => {
   return (

src/components/logo.tsx → src/components/icons/logo.tsx

@@ -1,9 +1,5 @@
 import type { ComponentProps } from "react";
 
-interface LogoProps extends ComponentProps<"svg"> {
-  dark?: boolean;
-}
-
 const Logo: React.FC<ComponentProps<"svg">> = (props) => {
   return (
     <svg

src/components/logos.tsx → src/components/icons/logos.tsx

@@ -56,3 +56,29 @@ export const XLogo = (props: SharedLogoProps) => (
     ></path>
   </svg>
 );
+
+export const T3Logo = (props: SharedLogoProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 258 199"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M165.735 25.07L188.947.972H.466V25.07h165.269z"
+      clipRule="evenodd"
+    ></path>
+    <path
+      fill="currentColor"
+      d="M163.981 96.324l90.041-92.64-32.816-.001-75.589 77.078 18.364 15.563zM233.658 131.418c0 23.657-19.178 42.836-42.835 42.836-19.108 0-35.31-12.516-40.823-29.815l-3.375-10.591-19.296 19.295 1.763 4.193c10.123 24.085 33.942 41.018 61.731 41.018 36.968 0 66.936-29.968 66.936-66.936 0-24.481-13.36-45.678-32.803-57.328l-4.561-2.732-17.668 17.895 8.061 4.255c13.615 7.188 22.87 21.473 22.87 37.91z"
+    ></path>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M88.263 192.669V45.646H64.165v147.023h24.097z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);