@arolariu/components 0.1.0 → 0.1.1

package/src/components/ui/typewriter.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { motion, stagger, useAnimate, useInView } from "motion/react";
+import { useEffect } from "react";
+
+export const TypewriterText = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}): React.JSX.Element => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+
+  const [scope, animate] = useAnimate();
+  const isInView = useInView(scope);
+  useEffect(() => {
+    if (isInView) {
+      animate(
+        "span",
+        {
+          display: "inline-block",
+          opacity: 1,
+          width: "fit-content",
+        },
+        {
+          duration: 0.3,
+          delay: stagger(0.1),
+          ease: "easeInOut",
+        },
+      );
+    }
+  }, [isInView]);
+
+  const renderWords = () => {
+    return (
+      <motion.div ref={scope} className="inline">
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <motion.span
+                  initial={{}}
+                  key={`char-${index}`}
+                  className={cn(
+                    `dark:text-white text-black opacity-0 hidden`,
+                    word.className,
+                  )}
+                >
+                  {char}
+                </motion.span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </motion.div>
+    );
+  };
+  return (
+    <div
+      className={cn(
+        "text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center",
+        className,
+      )}
+    >
+      {renderWords()}
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn(
+          "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500",
+          cursorClassName,
+        )}
+      ></motion.span>
+    </div>
+  );
+};
+
+export const TypewriterTextSmooth = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}): React.JSX.Element => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+  const renderWords = () => {
+    return (
+      <div>
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <span
+                  key={`char-${index}`}
+                  className={cn(`dark:text-white text-black `, word.className)}
+                >
+                  {char}
+                </span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("flex space-x-1 my-6", className)}>
+      <motion.div
+        className="overflow-hidden pb-2"
+        initial={{
+          width: "0%",
+        }}
+        whileInView={{
+          width: "fit-content",
+        }}
+        transition={{
+          duration: 2,
+          ease: "linear",
+          delay: 1,
+        }}
+      >
+        <div
+          className="text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold"
+          style={{
+            whiteSpace: "nowrap",
+          }}
+        >
+          {renderWords()}{" "}
+        </div>{" "}
+      </motion.div>
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn(
+          "block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-blue-500",
+          cursorClassName,
+        )}
+      ></motion.span>
+    </div>
+  );
+};

package/src/hooks/use-mobile.tsx

@@ -1,44 +1,44 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-/**
- * A custom React hook that detects whether the current device is a mobile device
- * based on the screen width.
- *
- * This hook uses a media query to check if the viewport width is less than the defined
- * mobile breakpoint (768px). It updates the state when the window size changes.
- *
- * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,
- *                   false otherwise.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const isMobile = useIsMobile();
- *
- *   return (
- *     <div>
- *       {isMobile ? 'Mobile View' : 'Desktop View'}
- *     </div>
- *   );
- * }
- * ```
- */
-export function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
-  );
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+/**
+ * A custom React hook that detects whether the current device is a mobile device
+ * based on the screen width.
+ *
+ * This hook uses a media query to check if the viewport width is less than the defined
+ * mobile breakpoint (768px). It updates the state when the window size changes.
+ *
+ * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,
+ *                   false otherwise.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isMobile = useIsMobile();
+ *
+ *   return (
+ *     <div>
+ *       {isMobile ? 'Mobile View' : 'Desktop View'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}