From 9da279634bfaa9f0d956d7e3e4eec48068272817 Mon Sep 17 00:00:00 2001 From: Shawn Dsilva <107312993+zzzzshawn@users.noreply.github.com> Date: Wed, 9 Oct 2024 02:37:02 +0530 Subject: [PATCH] Feature/theme change transition (#1445) * Added animatiions while theme change * bookmark Co-authored-by: Sargam --- public/NoBookmark.svg | 9 ++++ src/app/globals.css | 25 +++++++++++ src/components/Navbar.tsx | 23 +--------- src/components/ThemeToggler.tsx | 57 +++++++++++++----------- src/components/bookmark/BookmarkView.tsx | 5 +-- src/components/bookmark/NoBookmark.tsx | 27 +++++++++++ 6 files changed, 97 insertions(+), 49 deletions(-) create mode 100644 public/NoBookmark.svg create mode 100644 src/components/bookmark/NoBookmark.tsx diff --git a/public/NoBookmark.svg b/public/NoBookmark.svg new file mode 100644 index 000000000..0c98ab085 --- /dev/null +++ b/public/NoBookmark.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/globals.css b/src/app/globals.css index 7f2731179..7db494853 100644 --- 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,') + 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; + } } \ No newline at end of file diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index b61debf0a..b3841c077 100644 --- 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 && ( - <> -
- -
- -
- -
- - )} - - + {session?.user && } {!session?.user && ( diff --git a/src/components/ThemeToggler.tsx b/src/components/ThemeToggler.tsx index 2af4772ad..88e613d88 100644 --- 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 ? ( - - ) : ( - - )} - + ); } diff --git a/src/components/bookmark/BookmarkView.tsx b/src/components/bookmark/BookmarkView.tsx index aa78a786a..6f5705016 100644 --- 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 ? ( -
-
No bookmark added yet!
-
+ ) : ( )} diff --git a/src/components/bookmark/NoBookmark.tsx b/src/components/bookmark/NoBookmark.tsx new file mode 100644 index 000000000..4ea68e8ce --- /dev/null +++ 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 ( +
+ No Bookmarks +

+ Well.. You have'nt Bookmarked anything yet.... +

+

+ 💡When you find something you want to save for later, Click the “ + + ” icon and it will appear here. +

+
+ ); +}; + +export default NoBookmark;