"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, LayoutGroup, motion, MotionConfig, useReducedMotion, } from "motion/react"; import { HugeiconsIcon } from "@hugeicons/react"; import { Cancel01Icon, SourceCodeIcon, } from "@hugeicons/core-free-icons"; import clsx from "clsx"; // Change Here — کدی که تایپ می‌شود const SAMPLE_CODE = `export function Hello() { return (

سلام طرحَک

); }`; const ROW_EASE: [number, number, number, number] = [0.215, 0.61, 0.355, 1]; /** Pause weight per character — soft, human cadence. */ function charDelay(ch: string, reduce: boolean): number { if (reduce) return 0; if (ch === "\n") return 140; if (ch === " ") return 28; if (/[.{};()<>/=]/.test(ch)) return 52; if (/[آ-ی]/.test(ch)) return 38; return 22; } /** VS Code Dark+ (default dark) token colors */ const VS = { bg: "#1E1E1E", fg: "#D4D4D4", line: "#858585", comment: "#6A9955", string: "#CE9178", keyword: "#569CD6", control: "#C586C0", tag: "#569CD6", attr: "#9CDCFE", fn: "#DCDCAA", number: "#B5CEA8", cursor: "#AEAFAD", } as const; type TokenKind = | "plain" | "kw" | "control" | "str" | "tag" | "attr" | "fn" | "num" | "cmt"; function highlightLine(line: string) { const parts: { text: string; kind: TokenKind }[] = []; const re = /(\/\/.*$)|("(?:\\.|[^"])*"|'(?:\\.|[^'])*'|`(?:\\.|[^`])*`)|(\b(?:return|if|else|for|while|switch|case|break|continue|await|async|yield|new|typeof|instanceof)\b)|(\b(?:export|function|const|let|var|import|from|default|class|type|interface|extends|implements)\b)|(\b\d+\.?\d*\b)|(<\/?[A-Za-z][\w.]*)|(\b[A-Za-z_][\w]*(?=\s*=))|(\b[A-Za-z_][\w]*(?=\s*\())|([^"'/`<\d]+)/gm; let m: RegExpExecArray | null; let last = 0; while ((m = re.exec(line))) { if (m.index > last) { parts.push({ text: line.slice(last, m.index), kind: "plain" }); } if (m[1]) parts.push({ text: m[1], kind: "cmt" }); else if (m[2]) parts.push({ text: m[2], kind: "str" }); else if (m[3]) parts.push({ text: m[3], kind: "control" }); else if (m[4]) parts.push({ text: m[4], kind: "kw" }); else if (m[5]) parts.push({ text: m[5], kind: "num" }); else if (m[6]) parts.push({ text: m[6], kind: "tag" }); else if (m[7]) parts.push({ text: m[7], kind: "attr" }); else if (m[8]) parts.push({ text: m[8], kind: "fn" }); else if (m[9]) parts.push({ text: m[9], kind: "plain" }); last = m.index + m[0].length; } if (last < line.length) parts.push({ text: line.slice(last), kind: "plain" }); if (parts.length === 0) parts.push({ text: line, kind: "plain" }); return parts; } const kindColor: Record = { plain: VS.fg, kw: VS.keyword, control: VS.control, str: VS.string, tag: VS.tag, attr: VS.attr, fn: VS.fn, num: VS.number, cmt: VS.comment, }; export default function TypedCode() { const reduce = useReducedMotion() ?? false; const layoutGroup = useId().replace(/:/g, ""); const [open, setOpen] = useState(false); const [typed, setTyped] = useState(""); const [done, setDone] = useState(false); const indexRef = useRef(0); const timerRef = useRef(0); const preRef = useRef(null); const stopTyping = useCallback(() => { window.clearTimeout(timerRef.current); }, []); const startTyping = useCallback(() => { stopTyping(); indexRef.current = 0; setTyped(""); setDone(false); const tick = () => { const i = indexRef.current; if (i >= SAMPLE_CODE.length) { setDone(true); return; } const ch = SAMPLE_CODE[i]!; indexRef.current = i + 1; setTyped(SAMPLE_CODE.slice(0, i + 1)); timerRef.current = window.setTimeout( tick, charDelay(ch, reduce), ); }; timerRef.current = window.setTimeout(tick, reduce ? 40 : 320); }, [reduce, stopTyping]); useEffect(() => { if (open) startTyping(); else { stopTyping(); setTyped(""); setDone(false); } return stopTyping; }, [open, startTyping, stopTyping]); useEffect(() => { const el = preRef.current; if (!el) return; el.scrollTop = el.scrollHeight; }, [typed]); const lines = typed.split("\n"); // Keep trailing empty line visible while typing after \n const displayLines = typed.endsWith("\n") && !done ? [...lines] : lines; return (

{!open ? ( setOpen(true)} initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, scale: 0.92, filter: "blur(8px)" }} whileTap={reduce ? undefined : { scale: 0.97 }} className={clsx( "inline-flex cursor-pointer items-center gap-x-3 border border-border bg-card px-5 py-3.5 text-foreground outline-none", "hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring", )} style={{ borderRadius: 20, borderWidth: 1 }} > نمایش کد ) : ( {/* Title bar — VS Code chrome */}

Hello.tsx

{done ? "آماده" : "در حال نوشتن…"}

setOpen(false)} whileTap={reduce ? undefined : { scale: 0.9 }} className="inline-flex size-9 cursor-pointer items-center justify-center rounded-xl hover:bg-[#2A2D2E]" style={{ color: VS.line }} >

{/* Code surface */}

                  
                    {displayLines.map((line, lineIndex) => {
                      const isLast = lineIndex === displayLines.length - 1;
                      const tokens = highlightLine(line);
                      return (
                        
                          
                            {lineIndex + 1}
                          
                          {tokens.map((tok, ti) => (
                            
                              {tok.text}
                            
                          ))}
                          {isLast && !done ? (
                            
                          ) : null}
                          {"\n"}
                        
                      );
                    })}

{/* Soft bottom veil */} {done ? ( ) : null} )}

); }