Fix type errors

Author: hasparus

src/app/(main)/resources/[category]/categories-config.ts

@@ -1,6 +1,8 @@
 import { LearnPagePath } from "@/components/learn-aggregator/learn-pages"
 import { Kind, Topic } from "@/resources/types"
 
+// TODO: If the pages need to be customized further, consider flattening [category]/page.tsx
+//       into multiple page files and defining the following texts in usual JSX.
 export const categoriesConfig: CategoriesConfig = {
   frontend: {
     heading: "Frontend",

src/app/(main)/resources/video/video-library.tsx

@@ -197,7 +197,7 @@ function TopicsFilter({
                 )}
                 onKeyDown={arrowsMoveSideways}
               >
-                <Tag color={tagColors[topic]}>
+                <Tag color={tagColors[topic as keyof typeof tagColors]}>
                   {topic.replaceAll("-", " ")} ({count})
                 </Tag>
               </button>

src/app/conf/_design-system/tag-colors.tsx

@@ -1,3 +1,4 @@
+
 export const tagColors = {
   newsletter: "#FFCCEF",
   announcements: "#F80",

src/components/blog-page/blog-tags.tsx

@@ -19,7 +19,7 @@ export function BlogTags({
   return (
     <span className={clsx("flex gap-2", className)}>
       {tags.map(tag => {
-        const color = tagColors[tag]
+        const color = tagColors[tag as keyof typeof tagColors]
         if (!color && process.env.NODE_ENV !== "production") {
           throw new Error(`No color found for tag: ${tag}`)
         }

src/components/blog-page/index.tsx

@@ -71,7 +71,7 @@ export function BlogPage({
                       className="-m-1 flex p-1 ring-inset ring-neu-400 transition-opacity duration-75 hover:ring focus:!outline-offset-0 dark:ring-neu-50 [:has(>:hover)>&:not(:hover)]:opacity-70"
                       onKeyDown={arrowsMoveSideways}
                     >
-                      <Tag color={tagColors[tag]}>
+                      <Tag color={tagColors[tag as keyof typeof tagColors]}>
                         {tag.replaceAll("-", " ")} ({count})
                       </Tag>
                     </NextLink>