Feature/theme change transition (#1445)

* Added animatiions while theme change * bookmark Co-authored-by: Sargam <[email protected]>
code100x · Oct 8, 2024 · 9da2796 · 9da2796
1 parent f7e9a72
commit 9da2796
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 49 deletions.
diff --git a/public/NoBookmark.svg b/public/NoBookmark.svg
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -330,4 +330,29 @@
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
+}
+
+::view-transition-group(root) {
+  animation-timing-function: var(--expo-out);
+}
+
+::view-transition-new(root) {
+  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23blur)"/></svg>')
+    top left / 0 no-repeat;
+  mask-origin: content-box;
+  animation: scale 1s;
+  transform-origin: top left;
+}
+
+::view-transition-old(root),
+.dark::view-transition-old(root) {
+  animation: scale 1s;
+  transform-origin: top left;
+  z-index: -1;
+}
+
+@keyframes scale {
+  to {
+    mask-size: 350vmax;
+  }
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -8,7 +8,7 @@ import Link from 'next/link';
 import { ArrowLeft, Menu, Search, X } from 'lucide-react';
 import { Button } from './ui/button';
 import { AppbarAuth } from './AppbarAuth';
-import { SelectTheme } from './ThemeToggler';
+import ThemeToggler from './ThemeToggler';
 import ProfileDropdown from './profile-menu/ProfileDropdown';
 import { SearchBar } from './search/SearchBar';
 
@@ -94,26 +94,7 @@ export const Navbar = () => {
             variants={navItemVariants}
             custom={1}
           >
-            {session?.user && (
-              <>
-                <div className="hidden md:block">
-                  <SearchBar />
-                </div>
-
-                <div className="md:hidden">
-                  <Button
-                    onClick={toggleSearch}
-                    variant={'ghost'}
-                    size={'icon'}
-                    className="mr-2"
-                  >
-                    <Search className="size-6" />
-                  </Button>
-                </div>
-              </>
-            )}
-
-            <SelectTheme text={false} />
+            <ThemeToggler />
             {session?.user && <ProfileDropdown />}
 
             {!session?.user && (

diff --git a/src/components/ThemeToggler.tsx b/src/components/ThemeToggler.tsx
@@ -1,33 +1,40 @@
 'use client';
 
-import * as React from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
+import { Button } from './ui/button';
+
+export default function ThemeToggler() {
+  const { theme, setTheme } = useTheme();
+
+  const switchTheme = () => {
+    switch (theme) {
+      case 'light':
+        setTheme('dark');
+        break;
+      case 'dark':
+        setTheme('light');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const toggleTheme = () => {
+    if (!document.startViewTransition) switchTheme();
+
+    document.startViewTransition(switchTheme);
+  };
 
-export function SelectTheme({ text }: { text?: boolean }) {
-  const { setTheme, theme } = useTheme();
   return (
-    <>
-      {text === false ? (
-        <button
-          className={`flex items-center gap-2 rounded-lg p-3 text-center transition-all duration-300 hover:bg-blue-600/5 hover:text-blue-500`}
-          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-        >
-          <Sun className="size-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute size-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-        </button>
-      ) : (
-        <button
-          className={`flex items-center gap-2 rounded-lg text-center transition-all duration-300 hover:bg-blue-600/5 hover:text-blue-500`}
-          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-        >
-          <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="text-base">
-            {theme === 'light' ? 'Dark' : 'Light'} Mode
-          </span>
-        </button>
-      )}
-    </>
+    <Button
+      onClick={toggleTheme}
+      size="icon"
+      className="group rounded-lg border-none bg-transparent shadow-none hover:bg-blue-600/5"
+    >
+      <Moon className="absolute size-6 rotate-90 scale-0 transition-all group-hover:text-blue-500 dark:rotate-0 dark:scale-100 dark:text-white" />
+      <Sun className="size-6 rotate-0 scale-100 text-black transition-all group-hover:text-blue-500 dark:-rotate-90 dark:scale-0" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
   );
 }
diff --git a/src/components/bookmark/BookmarkView.tsx b/src/components/bookmark/BookmarkView.tsx
@@ -1,5 +1,6 @@
 import BookmarkList from './BookmarkList';
 import { TBookmarkWithContent } from '@/actions/bookmark/types';
+import NoBookmark from './NoBookmark';
 
 const BookmarkView = ({
   bookmarkData,
@@ -11,9 +12,7 @@ const BookmarkView = ({
       {bookmarkData === null ||
       'error' in bookmarkData ||
       !bookmarkData.length ? (
-        <div className="mt-64 flex">
-          <div className="text-2xl font-bold">No bookmark added yet!</div>
-        </div>
+        <NoBookmark />
       ) : (
         <BookmarkList bookmarkData={bookmarkData} />
       )}

diff --git a/src/components/bookmark/NoBookmark.tsx b/src/components/bookmark/NoBookmark.tsx
@@ -0,0 +1,27 @@
+import { Bookmark } from 'lucide-react';
+import Image from 'next/image';
+import React from 'react';
+
+const NoBookmark = () => {
+  return (
+    <div className="flex w-full flex-col items-center justify-start gap-1 overflow-hidden">
+      <Image
+        src={`/NoBookmark.svg`}
+        alt="No Bookmarks"
+        width={40}
+        height={40}
+        className="size-[40%] min-w-[400px] opacity-90 invert dark:invert-0"
+      />
+      <h1 className="lg:font-5xl text-center text-2xl font-bold text-black dark:text-white">
+        Well.. You have&apos;nt Bookmarked anything yet....
+      </h1>
+      <p className="text-center text-lg max-sm:text-base sm:w-[400px]">
+        💡When you find something you want to save for later, Click the &ldquo;
+        <Bookmark className="inline" />
+        &rdquo; icon and it will appear here.
+      </p>
+    </div>
+  );
+};
+
+export default NoBookmark;