Function CodeBlock

src/components/code/code-block.tsx:19–111

({ source }: Props)

}

export function CodeBlock({ source }: Props) {
  const [contents, setContents] = useState<Record<string, string>>({})
  const [copiedStates, setCopiedStates] = useState<Record<string, boolean>>({})
  const { copy } = useClipboard()

  const handleCopy = async (key: string, value: string | null) => {
    if (value) {
      const didCopy = await copy(value)
      if (!didCopy) return
      setCopiedStates((prev) => ({ ...prev, [key]: true }))
      setTimeout(() => {
        setCopiedStates((prev) => ({ ...prev, [key]: false }))
      }, 2000)
    }
  }
  useEffect(() => {
    const fetchContents = async () => {
      const loadedContents: Record<string, string> = {}
      for (const [name, path] of Object.entries(source)) {
        try {
          const response = await fetch(`/stubs/${path}.json`)
          const data = await response.json()
          loadedContents[name] = data.files[0].content
        } catch (error) {
          console.error(`Error fetching ${path}:`, error)
        }
      }
      setContents(loadedContents)
    }

    fetchContents()
  }, [source])

  return (
    <>
      {contents && Object.keys(contents).length > 0 ? (
        <Tabs className="relative gap-0">
          <div className="flex items-center justify-between gap-x-2">
            <TabList className="gap-x-4 gap-y-0 border-0">
              {Object.keys(contents).map((key) => (
                <Tab
                  className={(values) =>
                    twMerge(
                      'flex min-w-0 cursor-default items-center gap-x-1 truncate py-2 text-sm/6 *:data-[slot=icon]:hidden sm:*:data-[slot=icon]:block',
                      values.isSelected || values.isFocused || values.isFocusVisible
                        ? 'text-fg'
                        : 'text-muted-fg hover:text-fg'
                    )
                  }
                  key={key}
                  id={key}
                >
                  {key.includes('css') ? (
                    <BrandCssIcon className="size-4 text-blue-500" />
                  ) : key.includes('.tsx') ? (
                    <BrandReactjsIcon className="size-4 text-sky-500" />
                  ) : key.includes('.ts') ? (
                    <BrandTypescriptIcon className="size-4 text-sky-500" />