-
+
-
@@ -91,16 +94,19 @@ export default async function UserView({
href={`/u/${username}`}
className="transition-transform duration-300 hover:scale-105"
>
-
+
-
@@ -123,8 +131,12 @@ export default async function UserView({
>
{username}
-
{motto || "Welcome back!"}
@@ -217,9 +229,9 @@ export default async function UserView({
)}
-
+
-
+
{latestArticle ? (
) : null}
-
+
);
}
diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 3200005e..d1a55c20 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -1,7 +1,9 @@
"use client";
+import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
-import { type ReactNode, useRef } from "react";
+import { type ReactNode, useRef, useState } from "react";
+import { mobileMenuVariants } from "@/lib/motion";
interface MobileNavProps {
children: ReactNode;
@@ -16,30 +18,26 @@ export function MobileNav({
closeLabel = "Close menu",
brandLabel = "Atom",
}: MobileNavProps) {
- const detailsRef = useRef(null);
-
- const handleClick = (e: React.MouseEvent) => {
- if ((e.target as HTMLElement).closest("a") && detailsRef.current) {
- detailsRef.current.open = false;
- }
- };
+ const [open, setOpen] = useState(false);
+ const detailsRef = useRef(null);
return (
-
-
+
+ {open ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+
+ )}
+
+
-
-
-
+ {open && (
+
+
-
-
- {brandLabel}
-
-
- {closeLabel}
-
-
+
+
+
+ {brandLabel}
+
+
+ {closeLabel}
+
+
- {children}
-
-
-
+ {children}
+
);
}
diff --git a/src/components/motion-elements.tsx b/src/components/motion-elements.tsx
new file mode 100644
index 00000000..6f3ce819
--- /dev/null
+++ b/src/components/motion-elements.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import type { HTMLMotionProps } from "framer-motion";
+import { motion } from "framer-motion";
+import {
+ fadeIn,
+ fadeInUp,
+ hoverLift,
+ hoverScale,
+ scaleIn,
+ staggerContainer,
+ staggerItem,
+} from "@/lib/motion";
+
+type DivProps = HTMLMotionProps<"div">;
+
+export function AnimatedSection({ children, className, ...props }: DivProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function AnimatedChild({ children, className, ...props }: DivProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function FadeIn({ children, className, ...props }: DivProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function FadeInUp({ children, className, ...props }: DivProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function ScaleIn({ children, className, ...props }: DivProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function HoverCard({ children, className, ...props }: DivProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function HoverButton({ children, className, ...props }: DivProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/motion-page-wrapper.tsx b/src/components/motion-page-wrapper.tsx
new file mode 100644
index 00000000..f178ca11
--- /dev/null
+++ b/src/components/motion-page-wrapper.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+import { pageTransition } from "@/lib/motion";
+
+export default function MotionPageWrapper({
+ children,
+}: {
+ children: ReactNode;
+}) {
+ const pathname = usePathname();
+
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/components/motion-reveal.tsx b/src/components/motion-reveal.tsx
new file mode 100644
index 00000000..36eddf7f
--- /dev/null
+++ b/src/components/motion-reveal.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+
+interface RevealProps {
+ children: ReactNode;
+ className?: string;
+ delay?: number;
+}
+
+export function Reveal({ children, className, delay = 0 }: RevealProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function RevealStagger({ children, className }: RevealProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function RevealItem({ children, className }: RevealProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/nav-dropdown.tsx b/src/components/nav-dropdown.tsx
index 5210bcd6..e84980ef 100644
--- a/src/components/nav-dropdown.tsx
+++ b/src/components/nav-dropdown.tsx
@@ -1,5 +1,9 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
-import type { ReactNode } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { dropdownVariants } from "@/lib/motion";
interface NavDropdownProps {
label: string;
@@ -8,11 +12,37 @@ interface NavDropdownProps {
}
export function NavDropdown({ label, icon, children }: NavDropdownProps) {
+ const [open, setOpen] = useState(false);
+ const ref = useRef
(null);
+
+ useEffect(() => {
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") setOpen(false);
+ }
+ if (open) document.addEventListener("keydown", onKeyDown);
+ return () => document.removeEventListener("keydown", onKeyDown);
+ }, [open]);
+
+ useEffect(() => {
+ function onOutsideClick(e: MouseEvent) {
+ if (ref.current && !ref.current.contains(e.target as Node)) {
+ setOpen(false);
+ }
+ }
+ if (open) {
+ document.addEventListener("mousedown", onOutsideClick);
+ }
+ return () => document.removeEventListener("mousedown", onOutsideClick);
+ }, [open]);
+
return (
-
-
+
-
- {children}
-
-
+
+
+
+ {open && (
+
+ {children}
+
+ )}
+
+