feat: add Tasks component for displaying weekly tasks with animations and date utilities

Author: code-env

src/components/animations/click-select.tsx

@@ -102,7 +102,7 @@ const ClickSelect = () => {
                   layoutId={select.name}
                   className={cn(
                     "flex cursor-pointer items-center gap-2 rounded-full w-fit py-1 px-2 capitalize relative",
-                    select.className,
+                    select.className
                   )}
                 >
                   <span>{select.name}</span>
@@ -141,7 +141,7 @@ const ClickSelect = () => {
                     onClick={() => handleAdd(item)}
                     className={cn(
                       "flex cursor-pointer items-center gap-4 rounded-full w-fit p-1 px-2 capitalize z-0 relative",
-                      item.className,
+                      item.className
                     )}
                   >
                     <span>{item.name}</span>

src/components/animations/custom-textarea.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import type React from "react";
+import { useRef, useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+
+interface CaretPosition {
+  x: number;
+  y: number;
+  height: number;
+}
+
+interface CustomCaretProps {
+  position: CaretPosition;
+  isVisible: boolean;
+  isFocused: boolean;
+  hasSelection: boolean;
+}
+
+const CustomCaret: React.FC<CustomCaretProps> = ({
+  position,
+  isVisible,
+  isFocused,
+  hasSelection,
+}) => {
+  if (!isFocused || hasSelection) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: isVisible ? 1 : 0 }}
+      transition={{ duration: 0.1 }}
+      className="absolute pointer-events-none w-[2px] bg-blue-500"
+      style={{
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        height: `${position.height}px`,
+      }}
+    />
+  );
+};
+
+interface CustomTextareaProps {
+  placeholder?: string;
+  defaultValue?: string;
+  className?: string;
+  rows?: number;
+}
+
+const CustomTextarea = ({
+  placeholder = "Type something...",
+  defaultValue = "",
+  className = "",
+  rows = 5,
+}: CustomTextareaProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const [text, setText] = useState(defaultValue);
+  const [caretPosition, setCaretPosition] = useState<CaretPosition>({
+    x: 0,
+    y: 0,
+    height: 20,
+  });
+  const [isCaretVisible, setIsCaretVisible] = useState(true);
+  const [isFocused, setIsFocused] = useState(false);
+  const [selectionRange, setSelectionRange] = useState<{
+    start: number;
+    end: number;
+  } | null>(null);
+
+  // Toggle caret visibility for blinking effect
+  useEffect(() => {
+    if (!isFocused) return;
+
+    const interval = setInterval(() => {
+      setIsCaretVisible((prev) => !prev);
+    }, 530); // Standard caret blink rate
+
+    return () => clearInterval(interval);
+  }, [isFocused]);
+
+  // Update caret position when text changes or on selection change
+  const updateCaretPosition = () => {
+    if (!textareaRef.current || !overlayRef.current) return;
+
+    const textarea = textareaRef.current;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+
+    // Update selection range
+    if (start !== end) {
+      setSelectionRange({ start, end });
+    } else {
+      setSelectionRange(null);
+    }
+
+    // Create a temporary element to measure text dimensions
+    const tempElement = document.createElement("div");
+    tempElement.style.position = "absolute";
+    tempElement.style.visibility = "hidden";
+    tempElement.style.whiteSpace = "pre-wrap";
+    tempElement.style.wordBreak = "break-word";
+    tempElement.style.width = `${textarea.clientWidth}px`;
+    tempElement.style.font = window.getComputedStyle(textarea).font;
+    tempElement.style.padding = window.getComputedStyle(textarea).padding;
+
+    // Get text before caret
+    const textBeforeCaret = text.substring(0, start);
+
+    // Handle empty text or caret at the beginning
+    if (!textBeforeCaret) {
+      setCaretPosition({
+        x: Number.parseInt(window.getComputedStyle(textarea).paddingLeft),
+        y: Number.parseInt(window.getComputedStyle(textarea).paddingTop),
+        height:
+          Number.parseInt(window.getComputedStyle(textarea).lineHeight) || 20,
+      });
+      return;
+    }
+
+    // Add text content and line break element
+    tempElement.textContent = textBeforeCaret;
+    tempElement.innerHTML += '<span id="caret-position"></span>';
+
+    // Append to body, measure, then remove
+    document.body.appendChild(tempElement);
+    const caretEl = tempElement.querySelector("#caret-position");
+
+    if (caretEl) {
+      const caretRect = caretEl.getBoundingClientRect();
+      const textareaRect = textarea.getBoundingClientRect();
+
+      setCaretPosition({
+        x: caretRect.left - textareaRect.left,
+        y: caretRect.top - textareaRect.top,
+        height:
+          Number.parseInt(window.getComputedStyle(textarea).lineHeight) || 20,
+      });
+    }
+
+    document.body.removeChild(tempElement);
+  };
+
+  // Handle text change
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target.value);
+    updateCaretPosition(); // Update immediately
+    // Double check position after DOM update
+    requestAnimationFrame(() => {
+      requestAnimationFrame(updateCaretPosition);
+    });
+  };
+
+  // Handle selection and caret position updates
+  const handleSelect = () => {
+    requestAnimationFrame(updateCaretPosition);
+  };
+
+  // Handle key events for caret updates
+  const handleKeyUp = () => {
+    requestAnimationFrame(updateCaretPosition);
+  };
+
+  // Handle mouse events
+  const handleMouseUp = () => {
+    requestAnimationFrame(updateCaretPosition);
+  };
+
+  // Handle focus events
+  const handleFocus = () => {
+    setIsFocused(true);
+    updateCaretPosition();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    setSelectionRange(null);
+  };
+
+  // Focus the textarea when clicking on the container
+  const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === overlayRef.current) {
+      textareaRef.current?.focus();
+    }
+  };
+
+  // Render the selected text highlight
+  const renderHighlight = () => {
+    if (!selectionRange || !isFocused) return null;
+
+    const { start, end } = selectionRange;
+    const beforeSelection = text.substring(0, start);
+    const selection = text.substring(start, end);
+    const afterSelection = text.substring(end);
+
+    return (
+      <div className="absolute inset-0 pointer-events-none whitespace-pre-wrap break-words p-3 text-transparent">
+        <span>{beforeSelection}</span>
+        <span className="bg-blue-200 text-transparent">{selection}</span>
+        <span>{afterSelection}</span>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={`relative rounded-md border border-input ${className}`}
+      onClick={handleContainerClick}
+    >
+      {/* Text highlight overlay */}
+      {renderHighlight()}
+
+      {/* Custom caret */}
+      <AnimatePresence>
+        <CustomCaret
+          position={caretPosition}
+          isVisible={isCaretVisible}
+          isFocused={isFocused}
+          hasSelection={!!selectionRange}
+        />
+      </AnimatePresence>
+
+      {/* Text display overlay */}
+      <div
+        ref={overlayRef}
+        className="absolute inset-0 pointer-events-none whitespace-pre-wrap break-words p-3 text-transparent"
+      >
+        {text || placeholder}
+      </div>
+
+      {/* Actual textarea (invisible but functional) */}
+      <textarea
+        ref={textareaRef}
+        value={text}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        onKeyUp={handleKeyUp}
+        onMouseUp={handleMouseUp}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        rows={rows}
+        className="relative w-full h-full p-3 bg-transparent text-foreground resize-none border"
+        style={{ caretColor: "transparent" }} // Hide the native caret
+      />
+    </div>
+  );
+};
+
+export default CustomTextarea;

src/components/animations/index.ts

@@ -40,6 +40,7 @@ import YearsTabs from "@/components/animations/years-tabs";
 import Feedback from "@/components/shared/feedback";
 import Footer from "@/components/shared/footer";
 import Hero from "@/components/shared/hero";
+import CustomTextarea from "./custom-textarea";
 import DotMatrixClock from "./dotted-matric-clock";
 import DynamicStatusButton from "./dynamic-status-button";
 import FluidButton from "./fluid-button";
@@ -50,6 +51,7 @@ import ModeToggle from "./mode-toggle";
 import Plan from "./plan";
 import StackClick from "./stacked-click";
 import StatusButton from "./status-button";
+import Tasks from "./tasks";
 import TodoList from "./todo-list";
 import View from "./view";
 import Volume from "./volume";
@@ -64,6 +66,7 @@ export {
   ComponentPreview,
   Counter,
   Cursor,
+  CustomTextarea,
   DotMatrixClock,
   DropdownNav,
   DynamicIsland,
@@ -98,6 +101,7 @@ export {
   StackClick,
   StatusButton,
   TabBars,
+  Tasks,
   TelegramInput,
   TodoList,
   Typer,

src/components/animations/joi-download-button.tsx

@@ -30,7 +30,6 @@ const JoiDownloadButton = () => {
         <motion.span animate={{ x: hovered ? -22 : 0 }} transition={TRANSITION}>
           Download for IOS
         </motion.span>
-
         <motion.span
           animate={{ x: hovered ? -12 : 20, opacity: hovered ? 1 : 0 }}
           transition={TRANSITION}