TypingCodeBlock — بلوک کد تایپی

import { TypingCodeBlock } from '@tokapps/tuk';const steps = [  { type: 'prompt', text: "ali@tokapps:~/projects $ " },  { type: 'type', text: "ls -la", speed: 55 },  { type: 'output', text: "\n" },  { type: 'pause', ms: 220 },  { type: 'output', text: "total 24\ndrwxr-xr-x  6 ali staff  192 Oct 13 10:02 .\ndrwxr-xr-x  9 ali staff  288 Oct 12 18:44 ..\n-rw-r--r--  1 ali staff  512 Oct 13 09:58 package.json\n-rw-r--r--  1 ali staff 2048 Oct 13 09:58 tsconfig.json\ndrwxr-xr-x  7 ali staff  224 Oct 13 10:01 src\n" },  { type: 'pause', ms: 600 },  { type: 'prompt', text: "ali@tokapps:~/projects $ " },  { type: 'type', text: "cat package.json | head -4", speed: 40 },  { type: 'output', text: "\n" },  { type: 'pause', ms: 200 },  { type: 'output', text: "{\n  \"name\": \"tokapps-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true\n" },  { type: 'pause', ms: 600 },  { type: 'prompt', text: "ali@tokapps:~/projects $ " },  { type: 'type', text: "npm run build", speed: 48 },  { type: 'output', text: "\n" },  { type: 'pause', ms: 300 },  { type: 'output', text: "> tokapps-app@0.1.0 build\n> tsc && vite build\n\n" },  { type: 'output', text: "built in 1.24s\n", tone: 'success' },  { type: 'pause', ms: 600 },  { type: 'prompt', text: "ali@tokapps:~/projects $ " },  { type: 'type', text: "node -v", speed: 60 },  { type: 'output', text: "\n" },  { type: 'pause', ms: 180 },  { type: 'output', text: "v22.11.0\n" },  { type: 'prompt', text: "ali@tokapps:~/projects $ " },];<TypingCodeBlock steps={steps} language="terminal" />

import { TypingCodeBlock } from '@tokapps/tuk';const steps = [  { type: 'type', text: "import", kind: 'keyword', speed: 30 },  { type: 'type', text: " { useState } ", speed: 30 },  { type: 'type', text: "from", kind: 'keyword', speed: 30 },  { type: 'type', text: " 'react'", kind: 'string', speed: 30 },  { type: 'type', text: ";\n\n", speed: 30 },  { type: 'type', text: "export", kind: 'keyword', speed: 30 },  { type: 'type', text: " ", speed: 30 },  { type: 'type', text: "function", kind: 'keyword', speed: 30 },  { type: 'type', text: " ", speed: 30 },  { type: 'type', text: "Counter", kind: 'function', speed: 30 },  { type: 'type', text: "({ start = ", speed: 30 },  { type: 'type', text: "0", kind: 'number', speed: 30 },  { type: 'type', text: " }: { start?: ", speed: 30 },  { type: 'type', text: "number", kind: 'type', speed: 30 },  { type: 'type', text: " }) {\n", speed: 30 },  { type: 'type', text: "  const", kind: 'keyword', speed: 30 },  { type: 'type', text: " [count, setCount] = ", speed: 30 },  { type: 'type', text: "useState", kind: 'function', speed: 30 },  { type: 'type', text: "(start);\n", speed: 30 },  { type: 'type', text: "  // Counter increments on every click\n", kind: 'comment', speed: 26 },  { type: 'type', text: "  return", kind: 'keyword', speed: 30 },  { type: 'type', text: " <", speed: 30 },  { type: 'type', text: "button", kind: 'tag', speed: 30 },  { type: 'type', text: " onClick={() => ", speed: 30 },  { type: 'type', text: "setCount", kind: 'function', speed: 30 },  { type: 'type', text: "(count + ", speed: 30 },  { type: 'type', text: "1", kind: 'number', speed: 30 },  { type: 'type', text: ")}>{count}</", speed: 30 },  { type: 'type', text: "button", kind: 'tag', speed: 30 },  { type: 'type', text: ">;\n}", speed: 30 },];<TypingCodeBlock steps={steps} language="TypeScript" />

import { TypingCodeBlock } from '@tokapps/tuk';const steps = [  { type: 'type', text: "@@ Button.tsx @@\n", kind: 'comment', speed: 22 },  { type: 'pause', ms: 150 },  { type: 'type', text: "- const base = \"btn\";\n", kind: 'deleted', speed: 16 },  { type: 'pause', ms: 120 },  { type: 'type', text: "+ const base = \"tds-btn\";\n", kind: 'inserted', speed: 16 },  { type: 'pause', ms: 120 },  { type: 'type', text: "  export function Button() {\n", speed: 16 },  { type: 'pause', ms: 120 },  { type: 'type', text: "-   return <button className={base}>\n", kind: 'deleted', speed: 16 },  { type: 'pause', ms: 120 },  { type: 'type', text: "+   return <button data-tds=\"button\">\n", kind: 'inserted', speed: 16 },  { type: 'pause', ms: 120 },  { type: 'type', text: "  }\n", speed: 16 },];<TypingCodeBlock steps={steps} language="diff" />

import { TypingCodeBlock } from '@tokapps/tuk';const steps = [  { type: 'type', text: "{\n", speed: 14 },  { type: 'type', text: "  ", speed: 14 },  { type: 'type', text: "\"component\"", kind: 'property', speed: 14 },  { type: 'type', text: ": ", speed: 14 },  { type: 'type', text: "\"TypingCodeBlock\"", kind: 'string', speed: 14 },  { type: 'type', text: ",\n", speed: 14 },  { type: 'pause', ms: 260 },  { type: 'type', text: "  ", speed: 14 },  { type: 'type', text: "\"version\"", kind: 'property', speed: 14 },  { type: 'type', text: ": ", speed: 14 },  { type: 'type', text: "1", kind: 'number', speed: 14 },  { type: 'type', text: ",\n", speed: 14 },  { type: 'pause', ms: 260 },  { type: 'type', text: "  ", speed: 14 },  { type: 'type', text: "\"a11y\"", kind: 'property', speed: 14 },  { type: 'type', text: ": { ", speed: 14 },  { type: 'type', text: "\"copyable\"", kind: 'property', speed: 14 },  { type: 'type', text: ": ", speed: 14 },  { type: 'type', text: "true", kind: 'constant', speed: 14 },  { type: 'type', text: ", ", speed: 14 },  { type: 'type', text: "\"reducedMotion\"", kind: 'property', speed: 14 },  { type: 'type', text: ": ", speed: 14 },  { type: 'type', text: "\"respected\"", kind: 'string', speed: 14 },  { type: 'type', text: " }\n", speed: 14 },  { type: 'pause', ms: 200 },  { type: 'type', text: "}", speed: 14 },];<TypingCodeBlock steps={steps} language="JSON" />

import { TypingCodeBlock } from '@tokapps/tuk';<TypingCodeBlock steps={steps} loop speed={2} height="12rem" />

import { TypingCodeBlock } from '@tokapps/tuk';<TypingCodeBlock steps={steps} autoPlay={false} replayLabel="شروع" />