feat(ui): crate knowledge accordion on about page

src/app/(main)/about/page.tsx

@@ -1,13 +1,17 @@
 import { Metadata } from 'next'
+
 import { AboutMe } from './sections/about-me'
+import { Knowledge } from './sections/knowledge'
+
 import './styles.css'
 
 export const metadata: Metadata = {}
 
 export default function Page() {
   return (
-    <div className="blog-content-w m-auto">
+    <div className="blog-content-w m-auto space-y-40">
       <AboutMe />
+      <Knowledge />
     </div>
   )
 }

src/app/(main)/about/sections/knowledge/accordion.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+import * as Accordion from '@radix-ui/react-accordion'
+import { CaretDown } from '@/shared/lib/phosphor-icons'
+
+import { Knowledge } from './knowledge-categories'
+
+interface AccordionItemProps extends Accordion.AccordionItemProps {
+  children: React.ReactNode
+}
+export const AccordionItem = React.forwardRef(
+  (
+    { children, ...props }: AccordionItemProps,
+    forwardedRef: React.ForwardedRef<HTMLDivElement>
+  ) => (
+    <Accordion.Item
+      className="mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10"
+      {...props}
+      ref={forwardedRef}
+    >
+      {children}
+    </Accordion.Item>
+  )
+)
+
+interface AccordionTriggerProps extends Accordion.AccordionTriggerProps {
+  children: React.ReactNode
+}
+export const AccordionTrigger = React.forwardRef(
+  (
+    { children, ...props }: AccordionTriggerProps,
+    forwardedRef: React.ForwardedRef<HTMLButtonElement>
+  ) => (
+    <Accordion.Header className="flex">
+      <Accordion.Trigger
+        className="group flex flex-1 cursor-default items-center justify-between bg-neutral-200 p-4 py-7 text-lg leading-none shadow-lg shadow-black/5 outline-none duration-300 hover:cursor-pointer hover:bg-neutral-300 dark:bg-neutral-900 hover:dark:bg-neutral-800 md:p-7"
+        {...props}
+        ref={forwardedRef}
+      >
+        {children}
+        <CaretDown
+          className="transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
+          aria-hidden
+        />
+      </Accordion.Trigger>
+    </Accordion.Header>
+  )
+)
+
+interface AccordionContentProps extends Accordion.AccordionContentProps {
+  children: React.ReactNode
+}
+export const AccordionContent = React.forwardRef(
+  (
+    { children, ...props }: AccordionContentProps,
+    forwardedRef: React.ForwardedRef<HTMLDivElement>
+  ) => (
+    <Accordion.Content
+      className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
+      {...props}
+      ref={forwardedRef}
+    >
+      <div className="p-4 py-7 md:p-7">{children}</div>
+    </Accordion.Content>
+  )
+)
+
+export const Info: React.FC<{ knowledge: Knowledge }> = ({ knowledge }) => {
+  const Icon = knowledge.icon
+
+  return (
+    <div className="relative flex w-full items-center">
+      <div className="flex w-1/2 items-center gap-4 md:gap-6 md:text-xl">
+        <span>
+          <Icon />
+        </span>
+        <span>{knowledge.title}</span>
+      </div>
+      <div className="flex-1">
+        <div
+          className={`flex min-w-max items-center rounded-full bg-gradient-to-r from-blue-800/70 bg-no-repeat px-2 leading-none text-neutral-50 dark:from-blue-800/50 dark:text-neutral-300 md:text-lg ${
+            knowledge.level === 1 && 'bg-[length:50%]'
+          }
+          ${knowledge.level === 2 && 'bg-[length:80%]'}
+          ${knowledge.level === 3 && 'to-blue-800/5'}`}
+        >
+          {knowledge.level === 1 && <span>beginner</span>}
+          {knowledge.level === 2 && <span>intermediate</span>}
+          {knowledge.level === 3 && <span>advanced</span>}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/(main)/about/sections/knowledge/index.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import * as Accordion from '@radix-ui/react-accordion'
+
+import { knowledgeCategories, studiedTechs } from './knowledge-categories'
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Info
+} from './accordion'
+
+export function Knowledge() {
+  return (
+    <div className="z-0">
+      <Accordion.Root
+        className="w-full overflow-hidden rounded-3xl border border-neutral-200 dark:border-neutral-900"
+        type="single"
+        collapsible
+      >
+        {knowledgeCategories.map(category => (
+          <AccordionItem key={category.title} value={category.title}>
+            <AccordionTrigger>{category.title}</AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col gap-3">
+                {category.knowledgeList
+                  .sort((a, b) => b.level - a.level)
+                  .map(knowledge => (
+                    <Info key={knowledge.title} knowledge={knowledge} />
+                  ))}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+        <AccordionItem value="Studied techs">
+          <AccordionTrigger>Studied techs</AccordionTrigger>
+          <AccordionContent>
+            <div className="space-y-7">
+              <div className="text-sm text-neutral-500">
+                These are some languages, tools and technology that {"I've"}{' '}
+                already studied, but I {"didn't"} delve into it, and I would
+                need a content review to build something with...
+              </div>
+              <div className="flex flex-wrap gap-3">
+                {studiedTechs.map(tech => (
+                  <div
+                    key={tech.title}
+                    className="flex items-center justify-center gap-1 rounded-2xl bg-neutral-900/5 p-2 dark:bg-neutral-300/5"
+                  >
+                    <span>{tech.icon({})}</span>
+                    <span>{tech.title}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion.Root>
+    </div>
+  )
+}