{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "code-block-animated", "type": "registry:block", "title": "Code block animated", "description": "Code block animated", "files": [ { "path": "components/usages/codeblockanimatedusage.tsx", "content": "'use client';\r\n\r\nimport { CodeFrame } from \"@/registry/open-source/code-block-animated\";\r\n\r\n\r\ninterface CodeFrameDemoProps {\r\n typeEffect: boolean;\r\n duration: number;\r\n delay: number;\r\n theme: string;\r\n language: string;\r\n}\r\n\r\nconst SNIPPETS: Record = {\r\n python: `from contextlib import contextmanager\r\nfrom typing import Generator\r\n\r\n@contextmanager\r\ndef safe_file_operation(filepath: str, mode: str = 'r') -> Generator:\r\n \"\"\"Context manager for safe file operations.\"\"\"\r\n file = None\r\n try:\r\n file = open(filepath, mode)\r\n yield file\r\n except FileNotFoundError:\r\n print(f\"File {filepath} not found\")\r\n raise\r\n except IOError as e:\r\n print(f\"IO error: {e}\")\r\n raise\r\n finally:\r\n if file:\r\n file.close()\r\n\r\n# Usage\r\nwith safe_file_operation('data.txt', 'r') as f:\r\n content = f.read()\r\n print(content)`,\r\n javascript: `import { useState, useEffect } from 'react';\r\n\r\nfunction useFetch(url) {\r\n const [data, setData] = useState(null);\r\n const [loading, setLoading] = useState(true);\r\n const [error, setError] = useState(null);\r\n\r\n useEffect(() => {\r\n const controller = new AbortController();\r\n fetch(url, { signal: controller.signal })\r\n .then((res) => res.json())\r\n .then(setData)\r\n .catch(setError)\r\n .finally(() => setLoading(false));\r\n return () => controller.abort();\r\n }, [url]);\r\n\r\n return { data, loading, error };\r\n}\r\n\r\nexport default useFetch;`,\r\n react: `'use client';\r\n \r\nimport * as React from 'react';\r\n \r\ntype MyComponentProps = {\r\n myProps: string;\r\n} & React.ComponentProps<'div'>;\r\n \r\nfunction MyComponent(props: MyComponentProps) {\r\n return (\r\n
\r\n

My Component

\r\n
\r\n );\r\n}\r\n\r\nexport { MyComponent, type MyComponentProps };`,\r\n java: `import java.util.Optional;\r\nimport java.util.function.Function;\r\n\r\npublic class Either {\r\n private final L left;\r\n private final R right;\r\n\r\n private Either(L left, R right) {\r\n this.left = left;\r\n this.right = right;\r\n }\r\n\r\n public static Either left(L value) {\r\n return new Either<>(value, null);\r\n }\r\n\r\n public static Either right(R value) {\r\n return new Either<>(null, value);\r\n }\r\n\r\n public boolean isRight() { return right != null; }\r\n\r\n public T fold(Function leftFn, Function rightFn) {\r\n return isRight() ? rightFn.apply(right) : leftFn.apply(left);\r\n }\r\n}`,\r\n};\r\n\r\nexport default function Usage({\r\n typeEffect,\r\n duration,\r\n delay,\r\n theme,\r\n language,\r\n}: CodeFrameDemoProps) {\r\n const code = SNIPPETS[language] ?? SNIPPETS['react'];\r\n return (\r\n \r\n );\r\n};", "type": "registry:block", "target": "~/example.tsx" }, { "path": "components/usages/codeblockanimatedusage.tsx", "content": "'use client';\r\n\r\nimport { CodeFrame } from \"@/registry/open-source/code-block-animated\";\r\n\r\n\r\ninterface CodeFrameDemoProps {\r\n typeEffect: boolean;\r\n duration: number;\r\n delay: number;\r\n theme: string;\r\n language: string;\r\n}\r\n\r\nconst SNIPPETS: Record = {\r\n python: `from contextlib import contextmanager\r\nfrom typing import Generator\r\n\r\n@contextmanager\r\ndef safe_file_operation(filepath: str, mode: str = 'r') -> Generator:\r\n \"\"\"Context manager for safe file operations.\"\"\"\r\n file = None\r\n try:\r\n file = open(filepath, mode)\r\n yield file\r\n except FileNotFoundError:\r\n print(f\"File {filepath} not found\")\r\n raise\r\n except IOError as e:\r\n print(f\"IO error: {e}\")\r\n raise\r\n finally:\r\n if file:\r\n file.close()\r\n\r\n# Usage\r\nwith safe_file_operation('data.txt', 'r') as f:\r\n content = f.read()\r\n print(content)`,\r\n javascript: `import { useState, useEffect } from 'react';\r\n\r\nfunction useFetch(url) {\r\n const [data, setData] = useState(null);\r\n const [loading, setLoading] = useState(true);\r\n const [error, setError] = useState(null);\r\n\r\n useEffect(() => {\r\n const controller = new AbortController();\r\n fetch(url, { signal: controller.signal })\r\n .then((res) => res.json())\r\n .then(setData)\r\n .catch(setError)\r\n .finally(() => setLoading(false));\r\n return () => controller.abort();\r\n }, [url]);\r\n\r\n return { data, loading, error };\r\n}\r\n\r\nexport default useFetch;`,\r\n react: `'use client';\r\n \r\nimport * as React from 'react';\r\n \r\ntype MyComponentProps = {\r\n myProps: string;\r\n} & React.ComponentProps<'div'>;\r\n \r\nfunction MyComponent(props: MyComponentProps) {\r\n return (\r\n
\r\n

My Component

\r\n
\r\n );\r\n}\r\n\r\nexport { MyComponent, type MyComponentProps };`,\r\n java: `import java.util.Optional;\r\nimport java.util.function.Function;\r\n\r\npublic class Either {\r\n private final L left;\r\n private final R right;\r\n\r\n private Either(L left, R right) {\r\n this.left = left;\r\n this.right = right;\r\n }\r\n\r\n public static Either left(L value) {\r\n return new Either<>(value, null);\r\n }\r\n\r\n public static Either right(R value) {\r\n return new Either<>(null, value);\r\n }\r\n\r\n public boolean isRight() { return right != null; }\r\n\r\n public T fold(Function leftFn, Function rightFn) {\r\n return isRight() ? rightFn.apply(right) : leftFn.apply(left);\r\n }\r\n}`,\r\n};\r\n\r\nexport default function Usage({\r\n typeEffect,\r\n duration,\r\n delay,\r\n theme,\r\n language,\r\n}: CodeFrameDemoProps) {\r\n const code = SNIPPETS[language] ?? SNIPPETS['react'];\r\n return (\r\n \r\n );\r\n};", "type": "registry:ui" }, { "path": "registry/open-source/code-block-animated.tsx", "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '../utilities/cn';\n\n// Credit: \n// https://www.odysseyui.com/docs/components/animate/code-block\n\nconst LANG_SHIKI_MAP: Record = {\n react: 'tsx',\n};\n\nconst languageIcons: Record = {\n react: (\n \n \n \n \n \n \n \n \n \n \n ),\n tsx: (\n \n \n \n \n \n \n \n \n \n \n ),\n javascript: (\n \n \n \n \n ),\n js: (\n \n \n \n \n ),\n python: (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n java: (\n \n \n \n \n \n \n \n ),\n};\n\nconst SHIKI_THEMES = {\n 'One Dark Pro': 'one-dark-pro',\n 'GitHub Dark': 'github-dark',\n 'GitHub Light': 'github-light',\n Dracula: 'dracula',\n Nord: 'nord',\n Monokai: 'monokai',\n 'Tokyo Night': 'tokyo-night',\n 'Solarized Dark': 'solarized-dark',\n} as const;\n\ntype ShikiThemeName = (typeof SHIKI_THEMES)[keyof typeof SHIKI_THEMES];\n\ntype CodeFrameProps = {\n code: string;\n language?: string;\n className?: string;\n typeEffect?: boolean;\n duration?: number;\n delay?: number;\n theme?: ShikiThemeName | string;\n};\n\nexport function CodeFrame({\n code,\n language = 'javascript',\n className,\n typeEffect = false,\n duration = 5000,\n delay = 0,\n theme = 'one-dark-pro',\n}: CodeFrameProps) {\n const [html, setHtml] = React.useState('');\n const [visibleCode, setVisibleCode] = React.useState('');\n const [isDone, setIsDone] = React.useState(false);\n const containerRef = React.useRef(null);\n\n // Typing effect animation\n React.useEffect(() => {\n setVisibleCode('');\n setIsDone(false);\n\n if (!typeEffect) {\n setVisibleCode(code);\n setIsDone(true);\n return;\n }\n\n if (!code.length) return;\n\n const characters = Array.from(code);\n let index = 0;\n const interval = duration / characters.length;\n let intervalId: NodeJS.Timeout;\n\n const timeout = setTimeout(() => {\n intervalId = setInterval(() => {\n if (index < characters.length) {\n setVisibleCode(characters.slice(0, index + 1).join(''));\n index++;\n } else {\n clearInterval(intervalId);\n setIsDone(true);\n }\n }, interval);\n }, delay);\n\n return () => {\n clearTimeout(timeout);\n clearInterval(intervalId);\n };\n }, [code, typeEffect, duration, delay]);\n\n // Syntax highlighting\n React.useEffect(() => {\n if (!visibleCode.length) return;\n\n async function loadHighlightedCode() {\n try {\n const { codeToHtml } = await import('shiki');\n const shikiLang = LANG_SHIKI_MAP[language] ?? language;\n const highlighted = await codeToHtml(visibleCode, {\n lang: shikiLang,\n themes: {\n light: theme,\n dark: theme,\n },\n });\n setHtml(highlighted);\n } catch (error) {\n console.error('Error highlighting code:', error);\n }\n }\n loadHighlightedCode();\n }, [visibleCode, language, theme]);\n\n // Auto-scroll during typing effect\n React.useEffect(() => {\n if (!typeEffect || !containerRef.current) return;\n containerRef.current.scrollTo({\n top: containerRef.current.scrollHeight,\n behavior: 'smooth',\n });\n }, [html, typeEffect]);\n\n const languageKey = language.toLowerCase();\n const icon = languageIcons[languageKey];\n\n return (\n \n
\n
\n {icon ? (\n
\n {icon}{' '}\n \n {language === 'react' ? 'React' : language}\n \n
\n ) : (\n \n {language.toUpperCase()}\n \n )}\n
\n\n \n
\n\n pre]:m-0 [&>pre]:p-4 [&>pre]:bg-transparent',\n typeEffect &&\n !isDone &&\n \"[&_.line:last-of-type::after]:content-['|'] [&_.line:last-of-type::after]:inline-block [&_.line:last-of-type::after]:w-[1ch] [&_.line:last-of-type::after]:animate-pulse\",\n )}\n dangerouslySetInnerHTML={{ __html: html }}\n />\n \n );\n}\n\nexport { SHIKI_THEMES, type ShikiThemeName, type CodeFrameProps };", "type": "registry:ui" }, { "path": "registry/utilities/cn.ts", "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n", "type": "registry:ui" } ] }