+
+ );
+};
diff --git a/src/components/animation/fadeInWhenVisible.tsx b/src/components/animation/fadeInWhenVisible.tsx
new file mode 100644
index 0000000..96c03dd
--- /dev/null
+++ b/src/components/animation/fadeInWhenVisible.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { HTMLElements, HTMLMotionProps, motion, useAnimation } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import { useEffect } from "react";
+
+export const FadeInWhenVisible = ({Tag=motion.div, ...rest}: { Tag?: any } & HTMLMotionProps
+
+
+ setIsDragging(true)}
+ onDragEnd={handleDragEnd}
+ style={{ x, perspective: 800, perspectiveOrigin }}
+ >
+ {item} ;
+ })}
+
+
+ {/* Prev Button */}
+ setIndex((i) => i - 1)}
+ className={`prev-button`}
+ >
+
+
+
+ {/* Next Button */}
+ setIndex((i) => i + 1)}
+ className={`next-button`}
+ >
+
+
+
+ {/* Progress Indicator */}
+
+
+ {Array.from({ length: base }).map((_, i) => (
+
+
- Something went wrong. There's probably no blog at this URL.
-
- Try searching through the list of blogs instead! -
;
- }
-
- return <>{children};
-};
-
function code({className, ...properties} : {className: string, children: React.ReactNode}) {
const match = /language-(\w+)/.exec(className || '');
- const {theme} = useContext(ColorModeContext);
+ const {themeLightness} = useContext(ColorModeContext);
return match
- ? - Try searching through the list of blogs instead! -
Loading...
+ }>
+ Loading...
- }>
-