@arolariu/components 0.1.0 → 0.1.2

package/src/components/ui/sidebar.tsx

@@ -5,7 +5,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, VariantProps } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 
-import { useIsMobile } from "@/hooks/use-mobile";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";

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 → useIsMobile.tsx}

@@ -1,44 +1,45 @@
-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;
-}
+"use client";
+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 | null>(null);
+
+  React.useEffect(() => {
+    const mql = globalThis.window.matchMedia(
+      `(max-width: ${MOBILE_BREAKPOINT - 1}px)`,
+    );
+    const onChange = () => {
+      setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/hooks/useWindowSize.tsx

@@ -0,0 +1,72 @@
+/** @format */
+
+"use client";
+
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+type WindowSize = {
+  width: number | null;
+  height: number | null;
+};
+
+type HookReturnType = Readonly<{
+  windowSize: WindowSize;
+  isMobile: boolean;
+  isDesktop: boolean;
+}>;
+
+/**
+ * Client hook to get the window size and whether the window is mobile or desktop.
+ * @returns An object containing the window size and whether the window is mobile or desktop.
+ *@example
+ * ```tsx
+ * function MyComponent() {
+ *   const { windowSize, isMobile, isDesktop } = useWindowSize();
+ *
+ *   return (
+ *     <div>
+ *       <p>Window Size: {windowSize.width} x {windowSize.height}</p>
+ *       <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useWindowSize(): HookReturnType {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: null,
+    height: null,
+  });
+
+  useEffect(() => {
+    /**
+     * This function updates the window size.
+     * It is created inside of useEffect and has a short lifespan.
+     * After it is attached to the window object, it will be garbage collected
+     *  when the component unmounts or the window is resized.
+     */
+    function __handleResize__() {
+      setWindowSize({
+        width: globalThis.window.innerWidth,
+        height: globalThis.window.innerHeight,
+      });
+    }
+
+    globalThis.window.addEventListener("resize", __handleResize__);
+    __handleResize__(); // Call the function once to get the initial window size
+    return () =>
+      globalThis.window.removeEventListener("resize", __handleResize__);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return {
+    windowSize,
+    isMobile:
+      typeof windowSize.width === "number" &&
+      windowSize.width < MOBILE_BREAKPOINT,
+    isDesktop:
+      typeof windowSize.width === "number" &&
+      windowSize.width >= MOBILE_BREAKPOINT,
+  } as const;
+}